1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / customassist / mediagepr.com / social / facebook /
Filename : index.html
back
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Media Age Facebook &copy;</title>
    
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

     <meta name="description" content="Media Age &copy;">

     <meta name="keywords" content="Brand Reputation Management Services">

     <meta name="author" content="Custom Webs">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="ico/png" href="../../assets/img/logo1.png">
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/logo1.png">

    <!-- Load Require CSS -->
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font CSS -->
    <link href="../../assets/css/boxicon.min.css" rel="stylesheet">

     <link rel="stylesheet" href="../../css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

    <!-- Load Tempalte CSS -->
    <link rel="stylesheet" href="../../assets/css/style.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="../../assets/css/custom.css">



    <!-- Carousel -->
    <link rel="stylesheet" href="../../assets/css/owl.carousel.min.css">



    <!--Animations-->
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/blink.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/bounce.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/flicker.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/jello.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/pulsate.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/shake.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/vibrate.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/attention/wobble.css">


    <!--Lottie Flies-->
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>


    <!--Lottie Flies Interactivity-->
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>



    <!--Lottie Flies Installations-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie_canvas.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie_canvas_worker.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie_html.min.js"></script>



<style type="text/css">


  /*Background Overlay Black & White*/
.background-overlay,
.background-overlay-black,
.background-overlay-white,
.background-overlay-red {
    position: relative;
    z-index: 2;
    background-position: center center;
    background-size: cover;
}


.background-overlay:before,
.background-overlay-black:before,
.background-overlay-white:before,
.background-overlay-red:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}

.background-overlay-black:before {
    background-color: rgba(0, 0, 0, 0.5);
}

.background-overlay-white:before {
    background-color: rgba(255, 255, 255, 0.6);
}



.background-overlay-red:before {
    background-color: rgba(255, 0, 0, 0.8);
}




/*Background Overlay Border Radius*/

.background-overlay1,
.background-overlay-black1,
.background-overlay-white1 {
    position: relative;
    z-index: 2;
    background-position: center center;
    background-size: cover;
}




.background-overlay1:before,
.background-overlay-black1:before,
.background-overlay-white1:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 10px;
}

.background-overlay-black1:before {
    background-color: rgba(0, 0, 0, 0.5);
}

.background-overlay-white1:before {
    background-color: rgba(255, 255, 255, 0.6);
}



video {
  width: 100%;
}



.sticky-header {
  background: red !important;
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  box-shadow: 0 0 8px 0 gray;
  z-index: 999;
}


.sticky-header .navbar-brand{
  width: 30%;
}



.sticky-header .navbar-brand img {
  width: 160%;
}


.sticky-header .navbar-brand img:hover {
  -webkit-animation: pulsate-fwd 2.5s ease-in-out infinite both;
          animation: pulsate-fwd 2.5s ease-in-out infinite both;
}


/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {

 .sticky-header .navbar-brand img {
  width: 100%;
 }

}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
.sticky-header .navbar-brand{
  margin-left: 10px;
 }

}




/*Navbar Toggler Collapse*/



/* If the screen size is 600px wide or less */
@media screen and (max-width: 600px) {


.navbar-collapse li a{
  color: white !important;
}


.navbar-collapse li a:hover{
  background: none !important;
}

  }




ul.navbar-nav li.nav-item a.nav-link {
  color: #FEFAFA !important;
}





/*Boxicons*/

.navbar .bx {
  color: #FEFAFA;
}



/*Navbar Icons*/

.head-icons {
  position: absolute;
  padding: 3px 3px;
  margin-left: 70%;
  top: 20px;
  border: 1px solid #FEFAFA;
  border-radius: 100px;
}



.head-icons i{
  font-size: 20px !important;
}



/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
.head-icons {
  display: none;
  position: absolute;
  width: 10%;
  margin-left: 1035px;
  top: 70px;
}

 }




/*Banner Content*/

.banner-content {
  padding: 10px;
}


.banner-content-p1 {
  padding: 10px 20px;
  border-radius: 5px;
  background: rgba(256, 250, 250, 0.8);
}


.banner-content-p1 p{
  font-family: Georgia !important;
  font-weight: 500;
}


.banner-content p{
  color: #880808;
  padding: 20px;
}



/* If the screen size is 601px wide or more */
@media screen and (min-width: 601px) {
  .banner-content {
  margin-top: 100px !important;
}

 }

/*Banner 2*/
.contact-header p {
  font-family: Time New Romans !important;
}



/*Content Carousel*/

.site-section h2.text-primary {
    background: linear-gradient(-45deg, #782727, #E31E25);
    background-size: 200% 200%;
    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    -webkit-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;
}



a.related-content i {
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 3px;
  margin-left: 25px;
  margin-top: 5px;
  background: linear-gradient(-45deg, #782727, #E31E25);
    background-size: 200% 200%;
    -webkit-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;
  -webkit-animation:tada 5s ease infinite;
  animation:tada 5s ease infinite
}

.bg-left-half {
  position: relative; }
  .bg-left-half:before {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    background-color: #FEFAFA; }


.media-29101 video {
  width: 50%;
  margin-bottom: -20px;
}


.media-29101 img {
  margin-bottom: 20px;
}


.media-29101 p {
  color: white !important;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(95deg, #E31E25, #FF0000);
    background-size: 400% 400%;
    -webkit-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;
}


.media-29101 h5 {
  text-transform: uppercase;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 18px;
  font-weight: bold;
}
  .media-29101 h3 a {
    color: #6c757d; 
  }

.owl-2-style .owl-nav {
  display: none; }

.owl-2-style .owl-dots {
  text-align: center;
  position: relative;
  bottom: -30px; }
  .owl-2-style .owl-dots .owl-dot {
    display: inline-block; }
    .owl-2-style .owl-dots .owl-dot span {
      display: inline-block;
      width: 15px;
      height: 3px;
      border-radius: 0px;
      background: #cccccc;
      -webkit-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
      -o-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
      transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
      margin: 3px; }
    .owl-2-style .owl-dots .owl-dot.active span {
      background: red; }
    .owl-2-style .owl-dots .owl-dot:active, .owl-2-style .owl-dots .owl-dot:focus {
      outline: none; }



/*Double Slider*/



/* If the screen size is 601px wide or more */
@media screen and (min-width: 601px) {

.media img {
  margin-bottom: 20px;
}

 }

 

/* If the screen size is 600px wide or less */
@media screen and (max-width: 600px) {

.media {

}

.media img { 
  float: left;
  width: 48% !important;
  margin-left: 4px;
}

 }





/*Unbeatable Grid*/

#unbeat-grid {
  width: 98%;
  display: grid;
  grid-template-rows: 140px 140px 140px 140px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  
}

#unbeat-grid > div {
  color: black;
  font-size: 4vw;
  border-radius: 10px;
  margin: 0;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4);
  
}

#unbeat-grid div div{
  font-weight: bold;
  color: #FEFAFA;
  font-size: 12px;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 2px;
  border-radius: 10px;
  background: red;
  box-shadow: 0.2px 0.4px 3.5px red;
}


#unbeat-grid div div p{
  margin-top: 20px;
  text-align: center;
  padding: 0 10px;
}


#unbeat-grid div div span{
  text-align: center;
  font-size: 12px;
  color: red;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 50px;
  background: #FEFAFA;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}


#unbeat-grid div div i{
  float: right;
  margin-right: 10px;
  margin-top: 4px;
}

#unbeat-grid > div div img{
  width: 30%;
  height: 50%;
  border-radius: 10px;
}



.bottom-grid {
    margin-top: -80px;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 4px 0 red;
}



/* If the screen size is 601px wide or more */
@media screen and (min-width: 601px) {

  #unbeat-grid {
  width: 80%;
  display: grid;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  
}

  #unbeat-grid div div{
  width: 100%;
  height: 100%;
  padding: 2px;
}


#unbeat-grid div div p{
  margin-top: 20px;
}

 }



/*Feature Work*/

 .feature-work {

 }


 .orm {
  background: linear-gradient(95deg, #A82023, #E31E25, #FF0000);
    background-size: 400% 400%;
    -webkit-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;
 }


 .orm p{
  color: white !important;
 }


 .orm h3{
  color: white !important;
 }


 .orm h1{
  color: #FEFAFA !important;
 }


 .orm ul.feature-work-footer {
  text-align: justify;
  padding: 10px;
  border-radius: 10px;
 }


 .orm ul.feature-work-footer li{
  margin-top: 10px;
  color: black !important;
 }


.orm ul.feature-work-footer li i{
  color: #FEFAFA;
  font-size: 12px;
  margin: 5px;
  padding: 2px;
  border-radius: 100px;
  background: red;
 }




/*Filter Buttons*/

.filter-btn {
  font-weight: bold;
  font-size: 14px;
  margin: 5px;
  color: #FEFAFA !important;
}





/*Divider Bar*/
.divider{
  height: 5px;
  background: linear-gradient(-285deg, #782727, #E31E25, #A82023, #880808);
    background-size: 100% 100%;
    -webkit-animation: gradient 5s ease infinite;
    animation: gradient 5s ease infinite;
}





/*Gradient animation color change keyframes*/
@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}





/*Strategy Section*/

.strategy-section {
    width: 80%;
    border-radius: 10px;
    background-image: url(../../assets/img/bg/12.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.strategy-section h1{
  color: white;
  font-size: 22px;
}

.strategy {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
    background: rgba(255, 0, 0, 0.2);
}

.strategy h4 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: white;
}


.strategy p {
    color: white;
}



/*Pricing List*/
.pricing-list-body ul li {
  margin-top: 15px;
  border-bottom: 1px solid rgba(255, 0, 0, 0.1);
}


.pricing-list-body ul.light-300 li i{
  color: #FEFAFA;
  font-size: 12px;
  margin: 5px;
  padding: 2px;
  border-radius: 100px;
  background: red;
 }





/*Contact Form*/



.contact-info li.h5 {
  font-weight: bold;
  text-decoration: underline !important;
  margin-bottom: 4px !important;
}


.contact ul.contact-info li {
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 1px;
}


.contact ul.contact-info li a {
  text-decoration: none;
  font-weight: bold;
}



form.contact-form {
  border-radius: 10px;
  padding: 30px;
}


form.contact-form input{
  color: red;
  border: 1px solid red;
  background: none;
}


form.contact-form textarea{
  color: red;
  border: 1px solid red;
  background: none;
}




 /*Slogan*/
 .slogan h4{
  color: black;
 }


/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {

section.slogan {
  display: none;
}

 }

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
footer .slogan {
  display: none;
}


section.slogan h4{
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

 }






/*Accordion*/

label.accordion {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

label.accordion:after {
  font-family: FontAwesome;
  content: "\f150";
  font-family: "fontawesome";
  font-size: 18px;
  float: right;
}

label.accordion.is-open:after {
  content: "\f151";
}

label.accordion:hover,
label.accordion.is-open {
}

.accordion-content {
  background: rgba(256, 250, 250, 0.8);
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  border-radius: 5px;
  margin-top: -15px;
  padding: 0 20px;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.accordion-content1 {
  background: rgba(256, 250, 250, 0.9);
  border-radius: 10px;
  margin-top: -15px;
  padding: 0 20px;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.accordion-content p{
  background: none;
}

#accordion-div {
  display: none;
}


#accordion-ul {
  display: none;
}

#accordion-ul1 {
  display: none;
}


.accordion-ul1 {
  margin-bottom: 40px !important;
}


.accordion-ul i{
  color: #FEFAFA;
}


.accordion-ul1 i{
  color: #FEFAFA;
}


label.accordion span{
  color: white;
  text-decoration: underline;
  font-size: 14px;
}


#accordion-div:checked ~ label {
  transform: scale(1, -1);
}


#accordion-div:checked ~ label span{
  display: none;
}



#accordion-ul:checked ~ label {
  transform: scale(1, -1);
}


#accordion-ul1:checked ~ label {
  transform: scale(1, -1);
}


#accordion-ul:checked ~ label i{
  margin-top: 10px;
}



#accordion-ul1:checked ~ label i{
  margin-top: 10px;
}


.arrow_container {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0px auto;
}



.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}


@keyframes pulse {
  to {
    opacity: 1;
  }
}


/*Form Section*/

form {
  background-image: url(../../assets/img/bg/12.jpg);
  background-position: bottom;
  background-size: cover;
  background-attachment: fixed;
}



.service-work {
    border: 1px solid red;
}


</style>

</head>

<body>
    <!-- Header -->
    <nav id="main_nav" class="sticky-header navbar navbar-expand-lg navbar-light bg-white shadow">
    
     <div class="container d-flex justify-content-between align-items-center">

            <a class="navbar-brand h1" href="../../">
                <img src="../../assets/img/logo6.png" class='bx-flashing-hover shadow'>
            </a>


          

                <div class="head-icons" align="center">
                <a href="tel:+256755348728"><i class="bx-fw bx bx-phone"></i></i></a>
                </div>




            <label class="menu-button-wrapper navbar-toggler border-0" for="" data-bs-toggle="collapse" data-bs-target="#navbar-toggler-success" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <input type="checkbox" class="menu-button">
    <div class="icon-wrapper">
      <label class="hamburger">
        <input class="hamburger-input" type="checkbox">
        <span class="hamburger-line first"></span>
        <span class="hamburger-line second"></span>
        <span class="hamburger-line third"></span>
      </label>
    </div>
    <div class="item-list">
      <a href="../../"> <div> Home </div> </a>
     <a href="../../services">  <div> Services </div> </a>
     <a href="../../pages/about"> <div> About </div> </a>
     <a href="../../pages/portfolio">  <div> Portfolio </div> </a>
      <a href="../../pages/contact"> <div> Contact </div> </a>
    </div>
  </label>



            <div class="align-self-center collapse navbar-collapse flex-fill  d-lg-flex justify-content-lg-between" id="navbar-toggler-success">
                <div class="flex-fill mx-xl-5 mb-2">
                    <ul class="nav navbar-nav d-flex justify-content-between mx-xl-5 text-center text-dark">
                        <li class="nav-item">
                            <a class="nav-link btn-outline-primary rounded-pill px-3" href="../../index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn-outline-primary rounded-pill px-3" href="../../services">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn-outline-primary rounded-pill px-3" href="../../pages/about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn-outline-primary rounded-pill px-3" href="../../pages/portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn-outline-primary rounded-pill px-3" href="../../pages/contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <div class="navbar align-self-center d-flex">
                    <a class="nav-link" href="#"><i class='bx bx-bell bx-sm bx-tada-hover'></i></a>
                    <a class="nav-link" href="#"><i class='bx bx-message bx-sm'></i></a>
                    <a class="nav-link" href="../../ems"><i class='bx bx-user-circle bx-sm'></i></a>
                </div>
            </div>
        </div>

</nav>



    <!-- Close Header -->


    <!-- Start Banner Hero -->
    <div id="work_banner" class="banner-wrapper bg-light w-100 py-5">
        <div class="banner-vertical-center-work container text-light d-flex justify-content-center align-items-center py-5 p-0">
            <div class="banner-content col-lg-8 col-12 m-lg-auto text-center">
                <h1 class="banner-heading h2 display-3 pb-5 semi-bold-600 typo-space-line-center">Media Age Facebook</h1>
                <h3 class="h4 pb-2 regular-400">Corperate brand & reputation management</h3>
                
                

            </div>
        </div>
    </div>
    <!-- End Banner Hero -->

    <!-- Start Our Work -->
    <section class="container py-5">
        

        <div class="row projects gx-lg-5">
            
            <div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0" nonce="ov7rF80C"></script>

<div class="fb-page" data-href="https://www.facebook.com/MediageprEA/" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/MediageprEA/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MediageprEA/">Mediage PR EA Ltd</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/MediageprEA/" data-tabs="events, messages" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/MediageprEA/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MediageprEA/">Mediage PR EA Ltd</a></blockquote></div>

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FMediageprEA%2F&tabs=timeline&width=262&height=131&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="262" height="131" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            
        </div>
        
    </section>
    <!-- End Our Work -->


    <!-- Start Footer -->
    <footer class="bg-secondary pt-4">
        <div class="container">
            <div class="row py-4">

                <div class="col-lg-3 col-12 align-left">

                    
                    <ul class="list-inline footer-icons light-300">
                        <li class="list-inline-item m-0">
                            <a class="text-light" target="_blank" href="http://facebook.com/">
                                <i class='bx bxl-facebook bx-md'></i>
                            </a>
                        </li>
                        <li class="list-inline-item m-0">
                            <a class="text-light" target="_blank" href="https://www.flickr.com/">
                                <i class='bx bxl-instagram bx-md'></i>
                            </a>
                        </li>
                        <li class="list-inline-item m-0">
                            <a class="text-light" target="_blank" href="https://www.medium.com/">
                                <i class='bx bxl-twitter bx-md' ></i>
                            </a>
                        </li>
                        <li class="list-inline-item m-0">
                            <a class="text-light" target="_blank" href="https://www.linkedin.com/">
                                <i class='bx bxl-linkedin-square bx-md'></i>
                            </a>
                        </li>
                        <li class="list-inline-item m-0">
                            <a class="text-light" target="_blank" href="https://www.whatsapp.com/">
                                <i class='bx bxl-whatsapp bx-md'></i>
                            </a>
                        </li>
                        
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 my-sm-0 mt-4">
                    <h3 class="h4 pb-lg-3 text-light light-300">Explore</h2>
                        <ul class="list-unstyled text-light light-300">
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light" href="index.html">Home</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="#about.html">About Us</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="#work.html">Work</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i></i><a class="text-decoration-none text-light py-1" href="#pricing.html">Price</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="#contact.html">Contact</a>
                            </li>
                        </ul>
                </div>

                <div class="col-lg-3 col-md-4 my-sm-0 mt-4">
                    <h3 class="h4 pb-lg-3 text-light light-300">Explore</h2>
                        <ul class="list-unstyled text-light light-300">
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light" href="../../">Home</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../pages/about">About Us</a>
                            </li>
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../pages/portfolio">Portfolio</a>
                            </li>
                            
                            <li class="pb-2">
                                <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../pages/contact">Contact</a>
                            </li>
                        </ul>
                </div>

                <div class="col-lg-3 col-md-4 my-sm-0 mt-4">
                    <h2 class="h4 pb-lg-3 text-light light-300">Our Services</h2>
                    <ul class="list-unstyled text-light light-300">
                      <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/public">Public Relations</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/media">Media Relations</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/marketing">Marketing PR</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/media">Media Events</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/reputation">Reputation Management</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/brand">Brand Management</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bxs-chevron-right bx-xs'></i><a class="text-decoration-none text-light py-1" href="../../services/crisis">Crisis Management</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 my-sm-0 mt-4">
                    <h2 class="h4 pb-lg-3 text-light light-300">Contacts</h2>
                    <ul class="list-unstyled text-light light-300">
                        <li class="pb-2">
                    <i class='bx-fw bx bx-phone bx-xs'></i><a class="text-decoration-none text-light py-1" href="tel:+256414348728">+256 414 348 728</a>
                        </li>
                        <li class="pb-2">
                    <i class='bx-fw bx bx-printer bx-xs'></i><a class="text-decoration-none text-light py-1" href="fax:+256414348721">+256 414 348 721</a>
                        </li>
                        <li class="pb-2">
                    <i class='bx-fw bx bx-mobile bx-xs'></i><a class="text-decoration-none text-light py-1" href="tel:+256755348728">+256 755 348 728</a>
                        </li>
                        <li class="pb-2">
                            <i class='bx-fw bx bx-mail-send bx-xs'></i><a class="text-decoration-none text-light py-1" href="mailto:info@mediage.com">info@mediage.com</a>
                        </li>
                        <li class="pb-2">
                    <i class='bx-fw bx bx-building bx-xs'></i><a class="text-decoration-none text-light py-1" href="#">Commercial Plaza, Kampala Rd</a>
                        </li>
                        <i class='bx-fw bx bx-envelope bx-xs'></i><a class="text-decoration-none text-light py-1" href="#">P.O Box 34821 Kampala, Uganda</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="w-100 bg-primary py-3">
            <div class="container">
                <div class="row pt-2">
                    <div class="col-lg-6 col-sm-12">
                        <p class="text-lg-start text-center text-light light-300" style="font-size: 14px;">
                            Media Age © <script>document.write(new Date().getFullYear());</script> Copyright. All Rights Reserved.
                        </p>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <p class="text-lg-end text-center text-light light-300" style="font-size: 12px;">
                            Powered by <a rel="sponsored" class="text-decoration-none text-light" href="https://customassistinc.com/" target="_blank"><strong>Custom Assist Inc.</strong></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </footer>
    <!-- End Footer -->




<!-- Bootstrap -->
    <script src="../../assets/js/bootstrap.bundle.min.js"></script>
    <!-- Lightbox -->
    <script src="../../assets/js/fslightbox.js"></script>
    <script>
        fsLightboxInstances['gallery'].props.loadOnlyCurrentSource = true;
    </script>
    <!-- Load jQuery require for isotope -->
    <script src="../../assets/js/jquery.min.js"></script>
    <!-- Isotope -->
    <script src="../../assets/js/isotope.pkgd.js"></script>
    <!-- Page Script -->
    <script>
        $(window).load(function() {
            // init Isotope
            var $projects = $('.projects').isotope({
                itemSelector: '.project',
                layoutMode: 'fitRows'
            });
            $(".filter-btn").click(function() {
                var data_filter = $(this).attr("data-filter");
                $projects.isotope({
                    filter: data_filter
                });
                $(".filter-btn").removeClass("active");
                $(".filter-btn").removeClass("shadow");
                $(this).addClass("active");
                $(this).addClass("shadow");
                return false;
            });
        });
    </script>



    <!-- Templatemo -->
    <script src="../../assets/js/script.js"></script>
    <!-- Custom -->
    <script src="../../assets/js/custom.js"></script>



     <!-- Carousel -->

    <script src="../../assets/js/jquery-3.3.1.min.js"></script>
    <script src="../../assets/js/popper.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/owl.carousel.min.js"></script>
    <script src="../../assets/js/main.js"></script>
    <script src="../../assets/js/data-aos.js"></script>

    



     <script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
  </script>



  <!--Accordion Js-->

<script type="text/javascript">

const accordionBtns = document.querySelectorAll(".accordion");

accordionBtns.forEach((accordion) => {
  accordion.onclick = function () {
    this.classList.toggle("is-open");

    let content = this.nextElementSibling;
    console.log(content);

    if (content.style.maxHeight) {
      //this is if the accordion is open
      content.style.maxHeight = null;
    } else {
      //if the accordion is currently closed
      content.style.maxHeight = content.scrollHeight + "px";
      console.log(content.style.maxHeight);
    }
  };
});

</script>


    

</body>

</html>