first commit

assets/js/calendar.js

@@ -0,0 +1,115 @@
+let date = new Date();
+let year = date.getFullYear();
+let month = date.getMonth();
+
+const day = document.querySelector(".calendar-dates");
+
+const currdate = document
+    .querySelector(".calendar-current-date");
+
+const prenexIcons = document
+    .querySelectorAll(".calendar-navigation span");
+
+// Array of month names
+const months = [
+    "Janvier",
+    "Février",
+    "Mars",
+    "Avril",
+    "Mai",
+    "Juin",
+    "Juillet",
+    "Août",
+    "Septembre",
+    "Octobre",
+    "Novembre",
+    "Décembre"
+];
+
+// Function to generate the calendar
+const manipulate = () => {
+
+    // Get the first day of the month
+    let dayone = new Date(year, month, 1).getDay();
+
+    // Get the last date of the month
+    let lastdate = new Date(year, month + 1, 0).getDate();
+
+    // Get the day of the last date of the month
+    let dayend = new Date(year, month, lastdate).getDay();
+
+    // Get the last date of the previous month
+    let monthlastdate = new Date(year, month, 0).getDate();
+
+    // Variable to store the generated calendar HTML
+    let lit = "";
+
+    // Loop to add the last dates of the previous month
+    for (let i = dayone; i > 0; i--) {
+        lit +=
+            `<li class="inactive">${monthlastdate - i + 1}</li>`;
+    }
+
+    // Loop to add the dates of the current month
+    for (let i = 1; i <= lastdate; i++) {
+
+        // Check if the current date is today
+        let isToday = i === date.getDate()
+            && month === new Date().getMonth()
+            && year === new Date().getFullYear()
+            ? "active"
+            : "";
+        lit += `<li class="${isToday}">${i}</li>`;
+    }
+
+    // Loop to add the first dates of the next month
+    for (let i = dayend; i < 6; i++) {
+        lit += `<li class="inactive">${i - dayend + 1}</li>`
+    }
+
+    // Update the text of the current date element
+    // with the formatted current month and year
+    currdate.innerText = `${months[month]} ${year}`;
+
+    // update the HTML of the dates element
+    // with the generated calendar
+    day.innerHTML = lit;
+}
+
+manipulate();
+
+// Attach a click event listener to each icon
+prenexIcons.forEach(icon => {
+
+    // When an icon is clicked
+    icon.addEventListener("click", () => {
+
+        // Check if the icon is "calendar-prev"
+        // or "calendar-next"
+        month = icon.id === "calendar-prev" ? month - 1 : month + 1;
+
+        // Check if the month is out of range
+        if (month < 0 || month > 11) {
+
+            // Set the date to the first day of the
+            // month with the new year
+            date = new Date(year, month, new Date().getDate());
+
+            // Set the year to the new year
+            year = date.getFullYear();
+
+            // Set the month to the new month
+            month = date.getMonth();
+        }
+
+        else {
+
+            // Set the date to the current date
+            date = new Date();
+        }
+
+        // Call the manipulate function to
+        // update the calendar display
+        manipulate();
+    });
+});

assets/js/formhandler.js

@@ -0,0 +1,40 @@
+window.addEventListener("DOMContentLoaded", function() {    
+  var form = document.getElementById("contact-form");
+  var button = document.getElementById("contact-form-button");
+  var status = document.getElementById("contact-form-status");
+
+  function success() {
+    form.reset();
+    button.style = "display: none ";
+    status.innerHTML = "Thanks! Contact form is submitted successfully.";
+  }
+
+  function error() {
+    status.innerHTML = "Oops! There was a problem.";
+  }
+
+  // handle the form submission event
+
+  form.addEventListener("submit", function(ev) {
+    ev.preventDefault();
+    var data = new FormData(form);
+    ajax(form.method, form.action, data, success, error);
+  });
+});
+
+// helper function for sending an AJAX request
+
+function ajax(method, url, data, success, error) {
+  var xhr = new XMLHttpRequest();
+  xhr.open(method, url);
+  xhr.setRequestHeader("Accept", "application/json");
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState !== XMLHttpRequest.DONE) return;
+    if (xhr.status === 200) {
+      success(xhr.response, xhr.responseType);
+    } else {
+      error(xhr.status, xhr.response, xhr.responseType);
+    }
+  };
+  xhr.send(data);
+}

assets/js/script.js

@@ -0,0 +1,364 @@
+$(document).ready(function () {
+  "use strict";
+  //Copyright Date
+  // var newYear = document.getElementById("newYear");
+  // newYear.innerHTML = new Date().getFullYear();
+  
+  // Scroll to top
+  $("a[href='#top']").click(function () {
+    $("html, body").animate(
+      {
+        scrollTop: 0,
+      },
+      "slow"
+    );
+    return false;
+  });
+
+  // Smooth scroll
+  $("a.scroll-to").on("click", function (event) {
+    $("html, body")
+      .stop()
+      .animate(
+        {
+          scrollTop: $(this.hash).offset().top - 50,
+        },
+        1000
+      );
+    event.preventDefault();
+    if (screen.width < 992) {
+      $(".navbar-toggler").click();
+    }
+  });
+
+  // AOS initialize
+  AOS.init({
+    disable: "mobile",
+  });
+
+  // Service Item Match Height
+  $(".service-item").matchHeight({
+    byRow: 0,
+  });
+
+  // .blog-content Match Height
+  $(".blog-content").matchHeight({
+    byRow: 0,
+  });
+  $(".story-slider").slick({
+    dots: true,
+    infinite: true,
+    speed: 300,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: true,
+    responsive: [
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  });
+  $(".quotes-slider").slick({
+    dots: true,
+    infinite: true,
+    speed: 300,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: true,
+    responsive: [
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  });
+  $(".clients-slider").slick({
+    dots: true,
+    infinite: true,
+    speed: 300,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: true,
+    responsive: [
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  });
+  $(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
+    disableOn: 700,
+    type: "iframe",
+    mainClass: "mfp-fade",
+    removalDelay: 160,
+    preloader: false,
+    fixedContentPos: false,
+  });
+  // Magnific Gallery
+  $(".gallery").magnificPopup({
+    delegate: "a",
+    type: "image",
+    closeOnContentClick: false,
+    closeBtnInside: false,
+    mainClass: "mfp-with-zoom mfp-img-mobile",
+    image: {
+      verticalFit: true,
+      titleSrc: function (item) {
+        return (
+          item.el.attr("title") +
+          ' &middot; <a class="image-source-link" href="' +
+          item.el.attr("data-source") +
+          '" target="_blank">image source</a>'
+        );
+      },
+    },
+    gallery: {
+      enabled: true,
+    },
+    zoom: {
+      enabled: true,
+      duration: 300, // don't foget to change the duration also in CSS
+      opener: function (element) {
+        return element.find("img");
+      },
+    },
+  });
+});
+
+// Add nav bg
+$(window).on("scroll", function () {
+  if ($(window).scrollTop()) {
+    $(".main-nav").addClass("nav-bg");
+  } else {
+    $(".main-nav").removeClass("nav-bg");
+  }
+});
+// G-Map
+/**
+ * Created by Kausar on 06/10/2016.
+ */
+ window.marker = null;
+
+ function initialize() {
+   var map;
+   var lat = $("#map").data("lat");
+   var long = $("#map").data("long");
+   console.log(lat, long);
+   var mapCenter = new google.maps.LatLng(lat, long);
+   var style = [
+    {
+        "featureType": "all",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#202c3e"
+            }
+        ]
+    },
+    {
+        "featureType": "all",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "gamma": 0.01
+            },
+            {
+                "lightness": 20
+            },
+            {
+                "weight": "1.39"
+            },
+            {
+                "color": "#ffffff"
+            }
+        ]
+    },
+    {
+        "featureType": "all",
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "weight": "0.96"
+            },
+            {
+                "saturation": "9"
+            },
+            {
+                "visibility": "on"
+            },
+            {
+                "color": "#000000"
+            }
+        ]
+    },
+    {
+        "featureType": "all",
+        "elementType": "labels.icon",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "lightness": 30
+            },
+            {
+                "saturation": "9"
+            },
+            {
+                "color": "#29446b"
+            }
+        ]
+    },
+    {
+        "featureType": "poi",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "saturation": 20
+            }
+        ]
+    },
+    {
+        "featureType": "poi.park",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "lightness": 20
+            },
+            {
+                "saturation": -20
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "lightness": 10
+            },
+            {
+                "saturation": -30
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#193a55"
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "saturation": 25
+            },
+            {
+                "lightness": 25
+            },
+            {
+                "weight": "0.01"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "all",
+        "stylers": [
+            {
+                "lightness": -20
+            }
+        ]
+    }
+  ];
+   var mapOptions = {
+     // SET THE CENTER
+     center: mapCenter,
+     // SET THE MAP STYLE & ZOOM LEVEL
+     mapTypeId: google.maps.MapTypeId.ROADMAP,
+     // REMOVE ALL THE CONTROLS EXCEPT ZOOM
+     zoom: 12,
+     panControl: false,
+     scrollwheel: false,
+     zoomControl: true,
+     mapTypeControl: false,
+     scaleControl: false,
+     streetViewControl: false,
+     overviewMapControl: false,
+     zoomControlOptions: {
+       style: google.maps.ZoomControlStyle.LARGE,
+     },
+   };
+ 
+   map = new google.maps.Map(document.getElementById("map"), mapOptions);
+   // SET THE MAP TYPE
+   var mapType = new google.maps.StyledMapType(style, {
+     name: "Grayscale",
+   });
+   map.mapTypes.set("grey", mapType);
+   map.setMapTypeId("grey");
+   //CREATE A CUSTOM PIN ICON
+   var marker_image = $("#map").data("pin");
+   var pinIcon = new google.maps.MarkerImage(
+     marker_image,
+     null,
+     null,
+     null
+   );
+   marker = new google.maps.Marker({
+     position: mapCenter,
+     map: map,
+     icon: pinIcon,
+     title: "CoHub",
+   });
+ }
+ 
+ if ($("#map").length > 0) {
+   google.maps.event.addDomListener(window, "load", initialize);
+ }
+ 

assets/scss/_animatedtext.scss

@@ -0,0 +1,84 @@
+.jt {
+  position: relative;
+  font-size: 20vmin;
+  font-family: 'Staatliches', sans-serif;
+  text-transform: uppercase;
+  font-display: swap;
+  text-shadow: 0 0 10px tomato;
+}
+
+.jt__row {
+  display: block;
+}
+.jt__row:nth-child(1) {
+  clip-path: polygon(-10% 75%, 110% 75%, 110% 110%, -10% 110%);
+}
+.jt__row:nth-child(2) {
+  clip-path: polygon(-10% 50%, 110% 50%, 110% 75.3%, -10% 75.3%);
+}
+.jt__row:nth-child(3) {
+  clip-path: polygon(-10% 25%, 110% 25%, 110% 50.3%, -10% 50.3%);
+}
+.jt__row:nth-child(4) {
+  clip-path: polygon(-10% 0%, 110% 0%, 110% 25.3%, -10% 25.3%);
+}
+
+.jt__row.jt__row--sibling {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  witdh:800px;
+}
+
+.jt__text {
+  display: block;
+  transform-origin: bottom left;
+  animation: moveIn 2s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;
+}
+.jt__row:nth-child(1) .jt__text {
+  transform: translateY(-0.1em);
+}
+.jt__row:nth-child(2) .jt__text {
+  transform: translateY(-0.3em) scaleY(1.1);
+}
+.jt__row:nth-child(3) .jt__text {
+  transform: translateY(-0.5em) scaleY(1.2) ;
+}
+.jt__row:nth-child(4) .jt__text {
+  transform: translateY(-0.7em) scaleY(1.3) ;
+}
+.jt__row:nth-child(5) .jt__text {
+  transform: translateY(-0.9em) scaleY(1.4) ;
+}
+.jt__row:nth-child(6) .jt__text {
+  transform: translateY(-1.1em) scaleY(1.5) ;
+}
+
+@keyframes moveIn {
+  50%, 100% {
+    transform: translateY(0em)
+  }
+  0%   {
+  opacity: 0;
+  filter: blur(10px);
+
+  }
+  100% {
+  opacity: 1;
+  filter: blur(0px);
+  }
+}
+
+
+
+.debug .jt__row:nth-child(even) {
+  color: black;
+  background: white;
+}
+.debug .jt__row:nth-child(odd) {
+  color: white;
+  background: black;
+}
+
+* { box-sizing: border-box }

assets/scss/_buttons.scss

@@ -0,0 +1,12 @@
+.btn-primary {
+  background: $primary-color;
+  color: $white;
+  border: 1px solid $primary-color;
+  font-family: $primary-font;
+  font-size: 14px;
+  padding: 15px 40px;
+  transition: 0.3s $site-ease;
+  &:hover {
+    transform: translateY(-3px);
+  }
+}

assets/scss/_common.scss

@@ -0,0 +1,183 @@
+.section {
+  padding: 100px 0;
+  @include desktop {
+    padding: 50px 0;
+  }
+
+  &-title {
+    text-align: center;
+    margin-bottom: 100px;
+    position: relative;
+    @include mobile {
+      margin-bottom: 70px;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100px;
+      height: 5px;
+      background: $text-color;
+      border-radius: 5px;
+      bottom: -25px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    h2 {
+      font-size: 40px;
+      color: #252525;
+      margin-bottom: 15px;
+
+      @include tablet {
+        font-size: 25px;
+      }
+    }
+
+    h3 {
+      font-size: 40px;
+      color: $white;
+      margin-bottom: 15px;
+
+      @include tablet {
+        font-size: 25px;
+      }
+    }
+
+    p {
+      width: 66%;
+      margin: 0 auto;
+
+      @include mobile-xs {
+        width: 72%;
+      }
+
+      @include mobile {
+        width: 90%;
+      }
+
+      @include tablet {
+        font-size: 16px;
+      }
+
+      @include desktop {
+        width: 100%;
+      }
+    }
+  }
+}
+.page-header {
+  text-align: center;
+  padding-bottom: 100px;
+  @include desktop-lg {
+    padding-bottom: 60px;
+  }
+  @include tablet {
+    padding-bottom: 50px;
+  }
+
+  h2 {
+    font-size: 40px;
+    color: #252525;
+    margin-bottom: 15px;
+
+    @include tablet {
+      font-size: 30px;
+    }
+  }
+
+  p {
+    width: 66%;
+    margin: 0 auto;
+
+    @include mobile-xs {
+      width: 72%;
+    }
+
+    @include mobile {
+      width: 90%;
+    }
+
+    @include tablet {
+      font-size: 16px;
+    }
+
+    @include desktop {
+      width: 100%;
+    }
+  }
+}
+.about {
+  padding-top: 150px;
+  @include mobile {
+    padding-top: 120px;
+  }
+}
+// bloge page-title
+.page-title {
+  padding: 200px 0 50px;
+  text-align: center;
+  @include desktop-lg {
+    padding: 130px 0 50px;
+  }
+  @include desktop {
+    padding: 140px 0 50px;
+  }
+  @include mobile {
+    padding: 110px 0 30px;
+  }
+  @include mobile-xs {
+    padding: 110px 0 0px;
+  }
+
+  h1 {
+    margin-bottom: 15px;
+  }
+
+  .breadcrumb {
+    padding: 0;
+    background: transparent;
+    justify-content: center;
+  }
+
+  .breadcrumb-item {
+    font-family: $primary-font;
+
+    a {
+      font-weight: 600;
+      color: $primary-color;
+    }
+  }
+}
+
+.privacy-policy {
+  background-color: $border-color;
+  padding: 150px 0;
+  @include mobile {
+    padding-bottom: 40px;
+  }
+  &-content {
+    padding: 50px;
+    background-color: $white;
+    border-radius: 20px;
+    @include desktop {
+      padding: 30px;
+    }
+  }
+  &-item {
+    margin-bottom: 40px;
+    h2 {
+      margin-bottom: 10px;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 26px;
+    }
+    p {
+      margin-bottom: 20px;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 26px;
+      color: $text-color;
+    }
+  }
+}

assets/scss/_mixins.scss

@@ -0,0 +1,48 @@
+@mixin mobile-xs{
+  @media(max-width:400px){
+    @content;
+  }
+}
+@mixin mobile{
+  @media(max-width:575px){
+    @content;
+  }
+}
+@mixin tablet{
+  @media(max-width:767px){
+    @content;
+  }
+}
+@mixin desktop{
+  @media(max-width:991px){
+    @content;
+  }
+}
+@mixin desktop-lg{
+  @media(max-width:1199px){
+    @content;
+  }
+}
+
+@mixin desktop-xl{
+  @media(max-width:1400px){
+    @content;
+  }
+}
+
+@mixin desktop-1500{
+  @media(min-width:1500px){
+    @content;
+  }
+}
+
+@mixin desktop-4k{
+  @media(min-width:2000px){
+    @content;
+  }
+}
+
+
+@mixin size($size){
+  width: $size; height: $size;
+}

assets/scss/_typography.scss

@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400|Open+Sans:300,400,600,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+body {
+  font-family: $secondary-font;
+  font-size: 16px;
+  color: $text-color;
+  background: $body-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $text-color-dark;
+  font-family: $primary-font;
+  font-weight: 400;
+}
+
+p {
+  font-size: 16px;
+  color: $text-color;
+  line-height: 26px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+h1 {
+  font-size: 44px;
+  line-height: 58px;
+}
+
+h2 {
+  font-size: 33px;
+  line-height: 45px;
+  font-weight: 300;
+}
+
+h3 {
+  font-size: 19px;
+  font-weight: 400;
+  color: $text-color-dark;
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: 400;
+}

assets/scss/_variables.scss

@@ -0,0 +1,17 @@
+//site color variables
+$body-color: #FFF;
+$bg-color:#DFF1F4;
+$primary-color: #007af5;
+$secondary-color: #5477F8;
+$text-color: #808080;
+$text-color-dark:#252525;
+$site-ease: cubic-bezier(0.77, 0, 0.175, 1);
+$border-color: #EDEDF4;
+
+// solid colors
+$white: #fff;
+$black: #000;
+
+// Font Variables
+$primary-font: 'Montserrat', sans-serif;
+$secondary-font: 'Open Sans', sans-serif;

assets/scss/components/_blog.scss

@@ -0,0 +1,228 @@
+.blog {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  @include tablet {
+    padding-top: 60px;
+    padding-bottom: 60px;
+  }
+  @include mobile {
+    padding: 30px 0;
+  }
+  &-post {
+    margin-bottom: 30px;
+    @include mobile {
+      margin-bottom: 15px;
+    }
+    img {
+      width: 100%;
+      border-radius: 5px 5px 0 0;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+  &-content {
+    padding: 30px 20px;
+    border-left: 1px solid #ececec;
+    border-right: 1px solid #ececec;
+    border-bottom: 1px solid #ececec;
+    border-radius: 0px 5px 5px 5px;
+
+    h3 {
+      @include mobile-xs {
+        margin-top: 20px;
+      }
+
+      a {
+        font-size: 18px;
+        line-height: 26px;
+        color: $text-color-dark;
+        text-transform: capitalize;
+
+        @include mobile-xs {
+          font-size: 15px;
+        }
+
+        &:hover {
+          text-decoration: none;
+          color: $primary-color;
+        }
+      }
+
+      font-weight: 500;
+    }
+
+    a.more {
+      font-size: 14px;
+      font-weight: 400;
+      font-family: $primary-font;
+      text-transform: capitalize;
+      transition: 0.3s $site-ease;
+
+      span {
+        display: inline-block;
+        margin-left: 5px;
+      }
+
+      &:hover {
+        text-decoration: none;
+        letter-spacing: 1px;
+      }
+    }
+  }
+
+  &-pagination {
+    margin-top: 40px;
+
+    .pagination {
+      justify-content: center;
+
+      .page-item {
+        &:not(:last-child) {
+          margin-right: 10px;
+        }
+
+        .page-link {
+          font-size: 18px;
+          border-radius: 5px;
+          border: none;
+          padding: 12px 20px;
+          color: $text-color-dark;
+          font-weight: 300;
+          transition: all 0.3s ease;
+          font-family: $primary-font;
+        }
+
+        &.active {
+          .page-link {
+            background-color: $primary-color;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+.post {
+  text-align: center;
+  padding-top: 150px;
+  padding-bottom: 90px;
+
+  @include desktop {
+    padding-bottom: 50px;
+  }
+  @include mobile {
+    padding-top: 110px;
+    padding-bottom: 40px;
+  }
+
+  &-title {
+    padding-bottom: 20px;
+
+    h2 {
+      font-size: 33px;
+      line-height: 35px;
+
+      @include mobile {
+        font-size: 30px;
+      }
+      @include mobile-xs {
+        font-size: 25px;
+      }
+    }
+  }
+
+  &-meta {
+    padding-bottom: 50px;
+    @include mobile {
+      padding-bottom: 20px;
+    }
+
+    p {
+      a {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &-image {
+    img {
+      max-width: 100%;
+      border-radius: 6px;
+    }
+  }
+
+  &-body {
+    text-align: left;
+    padding-top: 30px;
+    p {
+      line-height: 32px;
+      margin-bottom: 30px;
+      @include mobile-xs {
+        font-size: 15px;
+      }
+    }
+
+    blockquote {
+      p{
+        font-size: 16px;
+        line-height: 30px;
+        color: $text-color-dark;
+        margin-bottom: 40px;
+        font-family: $primary-font;
+        font-weight: 400;
+        font-style: italic;
+        @include mobile-xs {
+          font-size: 15px;
+        }
+      }
+    }
+    ul,
+    ol {
+      margin: 0;
+      padding-left: 20px;
+      li {
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+        font-weight: 300;
+      }
+    }
+  }
+
+  &-list {
+    text-align: left;
+    li {
+      font-size: 22px;
+      @include mobile-xs {
+        font-size: 18px;
+      }
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  p{
+    .tags{
+      font-size: 14px;
+      color: #666;
+      font-weight: 500;
+      transition: all .3s ease-in-out;
+      display: inline-block;
+      text-decoration: none;
+      &:nth-child(2) {
+        margin-left: 5px !important;
+      }
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+      &:hover{
+        color: #0056b3;
+        text-decoration: underline;
+      }
+    } 
+  }
+}

assets/scss/components/_clients.scss

@@ -0,0 +1,60 @@
+.clients {
+  position: relative;
+  padding: 50px 0;
+  overflow: hidden;
+  text-align: center;
+  background-color: #8080802e;
+  margin: 100px 0;
+  @include desktop {
+    margin-bottom: 50px;
+  }
+  @include tablet {
+    margin: 50px 0 30px 0;
+  }
+  &-slider {
+    position: relative;
+    padding: 50px 0;
+    @include mobile {
+      padding: 20px 0;
+    }
+    &-item {
+      position: relative;
+      outline: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        max-width: 80%;
+        margin: 0 auto;
+        display: block;
+      }
+    }
+    .slick-dots {
+      position: absolute;
+      bottom: -50px;
+      display: flex;
+      justify-content: center;
+      @include mobile {
+        bottom: -30px;
+      }
+      li {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        button {
+          background: $text-color;
+          text-indent: -999999999px;
+          border-radius: 50%;
+          width: 3px;
+          height: 3px;
+          outline: 0;
+        }
+      }
+    }
+    .slick-dots li.slick-active button {
+      background: $primary-color;
+    }
+  }
+}

assets/scss/components/_contact.scss

@@ -0,0 +1,112 @@
+.contact {
+  .container-fluid {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  &-aria {
+    background: #222029;
+    padding: 100px;
+    @include desktop {
+      text-align: center;
+      padding: 50px;
+    }
+    @include mobile {
+      padding: 30px;
+    }
+    @include mobile-xs {
+      padding: 30px 10px;
+    }
+    a:link {
+      text-decoration: none;
+    }
+    h3 {
+      font-size: 25px;
+      line-height: 38px;
+      font-weight: 300;
+      color: $white;
+    }
+
+    ul {
+      padding: 0;
+      margin: 30px 0;
+
+      li {
+        list-style: none;
+        a {
+          color: $white;
+          line-height: 32px;
+          font-size: 19px;
+          font-weight: 400;
+          text-decoration: underline;
+          font-family: $primary-font;
+        }
+      }
+    }
+
+    h2 {
+        color: $white;
+      }
+
+    p {
+      color: $white;
+      font-weight: 300;
+      line-height: 32px;
+      margin-bottom: 20px;
+
+      @include desktop {
+        width: 80%;
+        margin: 0 auto;
+        padding-bottom: 20px;
+      }
+
+      @include mobile {
+        width: 100%;
+      }
+    }
+  }
+  #map {
+    height: 100%;
+
+    @include desktop {
+      height: 500px;
+    }
+    @include tablet {
+      height: 400px;
+    }
+    @include mobile {
+      height: 300px;
+    }
+    @include mobile-xs {
+      height: 200px;
+    }
+  }
+  &-section {
+    padding: 140px 0 100px 0;
+    @include mobile {
+      padding: 120px 0 50px 0;
+    }
+  }
+  &-form {
+    text-align: center;
+    h2 {
+      font-size: 30px;
+      margin-bottom: 40px;
+      @include mobile-xs {
+        font-size: 24px;
+        line-height: 40px;
+      }
+    }
+    form {
+      .form-control {
+        padding: 17px 20px;
+        margin-bottom: 30px;
+        @include mobile-xs {
+          margin-bottom: 20px;
+        }
+      }
+      .form-check {
+        margin-bottom: 30px;
+      }
+    }
+  }
+}

assets/scss/components/_cta.scss

@@ -0,0 +1,17 @@
+.cta {
+  padding-bottom: 50px;
+  @include tablet {
+    padding-bottom: 20px;
+  }
+  &-content {
+    text-align: center;
+
+    h2 {
+      margin-bottom: 15px;
+
+      @include mobile-xs {
+        font-size: 20px;
+      }
+    }
+  }
+}

assets/scss/components/_error.scss

@@ -0,0 +1,121 @@
+.error {
+  background: #f0f2f5;
+  position: relative;
+  overflow: hidden;
+  &-content {
+    padding: 270px 0 245px;
+    text-align: center;
+
+    @include desktop-lg {
+      padding: 200px 0;
+    }
+
+    @include desktop {
+      padding: 150px 0 100px;
+    }
+    @include mobile {
+      padding: 120px 0 60px;
+    }
+
+    h2 {
+      font-size: 170px;
+      display: inline-block;
+      margin-bottom: 80px;
+
+      @include desktop {
+        font-size: 100px;
+        margin-bottom: 60px;
+      }
+
+      @include tablet {
+        font-size: 80px;
+        margin-bottom: 50px;
+      }
+
+      @include mobile {
+        font-size: 50px;
+        margin-bottom: 30px;
+      }
+
+      @include mobile-xs {
+        font-size: 40px;
+        margin-bottom: 20px;
+      }
+    }
+
+    p {
+      font-size: 30px;
+      font-weight: 500;
+      color: $text-color-dark;
+      @include mobile-xs {
+        font-size: 24px;
+      }
+    }
+
+    form {
+      padding: 30px 0 70px;
+      width: 50%;
+      margin: 0 auto;
+
+      @include tablet {
+        width: 80%;
+      }
+      @include mobile {
+        padding: 30px 0 40px;
+      }
+
+      .input-group {
+        .form-control {
+          background: white;
+          padding: 20px 50px 20px 40px;
+          border-radius: 50px;
+          color: $text-color;
+          position: relative;
+          z-index: 0;
+          border: none;
+
+          @include mobile-xs {
+            padding: 10px 50px 10px 20px;
+          }
+        }
+
+        .input-search {
+          position: absolute;
+          top: 50%;
+          left: 95%;
+          transform: translate(-95%, -50%);
+
+          @include mobile-xs {
+            left: 90%;
+          }
+
+          a {
+            text-decoration: none;
+            font-size: 30px;
+            i {
+              color: $text-color;
+            }
+          }
+        }
+      }
+    }
+
+    &-link {
+      a {
+        background: $primary-color;
+        padding: 15px 30px;
+        color: $white;
+        border-radius: 30px;
+        font-size: 16px;
+        font-weight: 600;
+        text-decoration: none;
+        text-transform: capitalize;
+        text-decoration: none;
+
+        i {
+          padding-right: 10px;
+        }
+      }
+    }
+  }
+}

assets/scss/components/_faq.scss

@@ -0,0 +1,52 @@
+.faq {
+  background: #b8cfe6 ;
+  padding: 100px 0;
+  @include desktop {
+    text-align: center;
+    padding: 0 0 50px 0;
+  }
+
+  .text-block {
+    h2 {
+      color: #002255;
+      @include tablet {
+        margin-bottom: 40px;
+      }
+      @include mobile-xs {
+        font-size: 20px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-content {
+    margin: 0 auto 30px;
+    @include tablet {
+      text-align: center;
+    }
+    @include mobile {
+      width: 100%;
+    }
+    @include mobile-xs {
+      margin-bottom: 15px;
+    }
+    h3 {
+      color: #002255;
+      font-weight: 500;
+      margin: 0 0 10px;
+      @include desktop {
+        margin-top: 0;
+      }
+    }
+
+    p {
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    a {
+      text-decoration: underline;
+      font-size: 14px;
+    }
+  }
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,152 @@
+.footer {
+  padding: 100px 0;
+  background: #f7f8fc;
+  @include desktop {
+    padding: 50px 0;
+    text-align: center;
+  }
+
+  @include tablet {
+    text-align: center;
+  }
+
+  &-logo {
+    margin-bottom: 30px;
+  }
+
+  &-menu {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding-bottom: 20px;
+
+    @include tablet {
+      justify-content: center;
+    }
+
+    @include desktop {
+      padding-bottom: 10px;
+      justify-content: center;
+    }
+
+    img {
+      width: 15%;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+        display: inline-block;
+
+        &:not(:first-child) {
+          padding-left: 50px;
+
+          @include desktop {
+            padding-left: 30px;
+          }
+        }
+
+        a {
+          font-size: 12px;
+          color: $text-color-dark;
+          transition: all 0.5s ease-in-out;
+
+          &:hover {
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+  }
+
+  &-text-block {
+    @include desktop {
+      text-align: center;
+    }
+
+    p {
+      margin-bottom: 0;
+      font-family: $primary-font;
+    }
+  }
+
+  &-icon {
+    display: flex;
+    justify-content: flex-end;
+    padding-bottom: 20px;
+
+    @include desktop {
+      justify-content: center;
+      margin-top: 40px;
+    }
+
+    @include desktop {
+      padding-bottom: 10px;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+
+      li {
+        list-style: none;
+        padding-left: 15px;
+        display: inline-block;
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        a {
+          color: #666666;
+          transition: all 0.3s ease-in-out;
+          text-decoration: none;
+
+          i {
+            font-size: 1.5rem;
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+  }
+
+  &-copyright-text {
+    display: flex;
+    justify-content: flex-end;
+    opacity: 0.5;
+
+    @include desktop {
+      justify-content: center;
+    }
+
+    p {
+      font-size: 12px;
+      margin-bottom: 0;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+
+      li {
+        list-style: none;
+        display: inline-block;
+        padding-left: 20px;
+
+        a {
+          font-size: 12px;
+          color: #666666;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+  }
+
+  li:hover > a {
+    color: $primary-color;
+  }
+}

assets/scss/components/_gallery.scss

@@ -0,0 +1,56 @@
+.gallery {
+  padding: 100px 0;
+  @include desktop-lg {
+    padding: 70px 0 50px;
+  }
+  @include tablet {
+    padding: 50px 0 0;
+  }
+  &-item {
+    opacity: 1;
+    transition: all 0.5s $site-ease;
+    margin-bottom: 30px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
+    a {
+      cursor: url(../images/plus.png), auto;
+    }
+    img {
+      max-width: 100%;
+    }
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
+
+  &-button-platform {
+    padding-bottom: 20px;
+
+    a {
+      background: $primary-color;
+      transition: all 0.3s ease-in-out;
+      position: relative;
+      font-family: "Lato", sans-serif;
+      padding: 10px 50px;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      .badge {
+        top: -7px;
+        position: absolute;
+        color: #f7f1f1;
+        background: #31639c;
+        border-radius: 50px;
+        padding: 7px 20px;
+        font-size: 10px;
+        font-weight: 400;
+        right: -20px;
+      }
+    }
+
+    &-pragrap {
+      font-size: 12px;
+    }
+  }
+}

assets/scss/components/_hero.scss

@@ -0,0 +1,147 @@
+.hero {
+  padding: 250px 0 200px;
+  position: relative;
+  background-position: center;
+  background-size: cover;
+
+  @include desktop-lg {
+    padding: 150px 0 120px;
+  }
+  @include desktop {
+    padding: 200px 0 120px;
+  }
+  @include tablet {
+    padding: 150px 0 100px;
+  }
+  @include mobile {
+    padding: 120px 0 80px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba($color: $black, $alpha: 0.5);
+  }
+
+  &-content {
+    text-align: center;
+    position: relative;
+    z-index: 1;
+
+    h1 {
+      color: whitesmoke;
+      margin-bottom: 15px;
+      font-size: 50px;
+      line-height: 70px;
+
+      @include tablet {
+        font-size: 40px;
+        line-height: 55px;
+      }
+      @include mobile {
+        font-size: 30px;
+        line-height: 45px;
+      }
+
+      @include mobile-xs {
+        font-size: 24px;
+        line-height: 40px;
+      }
+    }
+
+    h2 {
+      color: #cc0016;
+    }
+
+    h3 {
+      color: whitesmoke;
+      margin-bottom: 5px;
+      font-size: 20px;
+      line-height: 30px;
+
+      @include tablet {
+        font-size: 150px;
+        line-height: 35px;
+      }
+      @include mobile {
+        font-size: 15px;
+        line-height: 25px;
+      }
+
+      @include mobile-xs {
+        font-size: 18px;
+        line-height: 20px;
+      }
+    }
+
+    p {
+      color: #b8cfe6;
+      font-size: 19px;
+      line-height: 32px;
+      width: 83%;
+      margin: 0 auto 50px;
+
+      @include desktop {
+        width: 100%;
+      }
+      @include mobile {
+        margin: 0;
+      }
+    }
+  }
+
+  &-video-player {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    flex-direction: column;
+
+    @include desktop {
+      margin-top: 60px;
+    }
+    @include mobile {
+      margin-top: 30px;
+    }
+    .hero-video-player-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      a {
+        display: block;
+        position: relative;
+        background: #b8cfe6;
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        color: $white;
+        margin-bottom: 20px;
+        transition: 0.3s ease-in-out;
+
+        &:hover {
+          transform: scale(1.2);
+          i {
+            color: $primary-color;
+            font-size: 20px;
+          }
+        }
+        i {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+    span {
+      color: #b8cfe6;
+      font-family: $primary-font;
+    }
+  }
+}

assets/scss/components/_liens.scss

@@ -0,0 +1,29 @@
+.lien {
+  padding: 100px 0;
+  @include desktop-lg {
+    padding: 70px 0 50px;
+  }
+  @include tablet {
+    padding: 50px 0 0;
+  }
+  &-infos {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  &-thumb {
+      margin-bottom: 20px;
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+      img {
+        width: 100%;
+        border-radius: 8px;
+        transition: all 0.5s ease-in-out;
+      }
+      &:hover {
+        img {
+          transform: scale(1.2);
+        }
+      }
+    }
+  }

assets/scss/components/_navigation.scss

@@ -0,0 +1,153 @@
+.main-nav {
+  padding: 30px 35px 20px;
+  transition: all 0.5s ease-in-out;
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  width: 100%;
+  @include desktop {
+    background: $white;
+    padding: 30px;
+  }
+  @include mobile {
+    padding: 15px 30px;
+    width: 95%;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 10px;
+  }
+  .navbar-nav {
+    .nav-item {
+      .nav-link {
+        color: $white;
+        padding-left: 20px;
+        font-weight: 500;
+        font-size: 14px;
+        padding-right: 20px;
+        letter-spacing: 1px;
+        position: relative;
+        font-family: $primary-font;
+        z-index: 1;
+        transition: all 0.5s ease-in-out;
+        @include desktop {
+          color: $text-color-dark;
+        }
+      }
+    }
+
+    @include desktop {
+      align-items: center;
+    }
+  }
+
+  .navbar-brand {
+    .logo-main {
+      display: none;
+      @include desktop {
+        display: block;
+      }
+    }
+    .logo-white {
+      display: block;
+      @include desktop {
+        display: none;
+      }
+    }
+    img {
+      width: 100px;
+    }
+  }
+
+  .navbar-toggler {
+    outline: 0;
+    padding: 0;
+
+    .icon-bar {
+      width: 25px;
+      height: 2px;
+      background: $secondary-color;
+      transition: all 0.2s;
+      display: block;
+
+      &:not(:last-child) {
+        margin-bottom: 5px;
+      }
+
+      &:nth-child(1) {
+        transform: rotate(45deg);
+        transform-origin: 10% 10%;
+      }
+
+      &:nth-child(2) {
+        opacity: 0;
+        filter: alpha(opacity=0);
+      }
+
+      &:nth-child(3) {
+        transform: rotate(-45deg);
+        transform-origin: 10% 90%;
+      }
+    }
+
+    &.collapsed {
+      .icon-bar {
+        &:nth-child(1) {
+          transform: rotate(0);
+        }
+
+        &:nth-child(2) {
+          opacity: 1;
+          filter: alpha(opacity=1);
+        }
+
+        &:nth-child(3) {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  &.nav-bg {
+    background: $white;
+    padding: 20px;
+    border: none;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
+    top: 0;
+    @include mobile {
+      top: 10px;
+      padding: 20px 20px;
+    }
+    .navbar-brand {
+      .logo-main {
+        display: block;
+      }
+
+      .logo-white {
+        display: none;
+      }
+    }
+
+    .nav-link {
+      color: $text-color-dark !important;
+
+      &::before {
+        background: darken($color: $white, $amount: 10) !important;
+      }
+    }
+
+    .account-list {
+      li {
+        a {
+          color: $white;
+          background: $secondary-color;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  &-colored {
+    @extend .nav-bg;
+    box-shadow: none;
+  }
+}

assets/scss/components/_pricing.scss

@@ -0,0 +1,184 @@
+.pricing {
+  padding: 100px 0;
+  @include desktop {
+    padding: 50px 0;
+  }
+  @include mobile-xs {
+    padding: 30px 0;
+  }
+  &-wraper {
+    transition: all 0.3s ease-in-out;
+    .pricing-item {
+      background: $white;
+      padding: 40px 10px;
+      text-align: center;
+      border: 1px solid #0000001c;
+      border-radius: 6px 6px 0 0;
+      position: relative;
+      h2 {
+        color: $white;
+      }
+      h3 {
+        margin-bottom: 20px;
+      }
+      span.price {
+        font-size: 70px;
+        font-weight: 400;
+        font-family: $primary-font;
+        color: $text-color-dark;
+        transition: all 0.3s ease-in-out;
+        sup {
+          font-size: 30px;
+        }
+        display: block;
+        margin-bottom: 20px;
+      }
+      &-badge {
+        position: absolute;
+        background: $primary-color;
+        padding: 5px 10px;
+        font-size: 10px;
+        font-weight: 700;
+        color: $white;
+        text-transform: lowercase;
+        font-family: $primary-font;
+        border-radius: 5px;
+        top: 20px;
+        right: 20px;
+      }
+      p {
+        margin-top: 20px;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+      }
+    }
+    a {
+      border: none;
+      width: 100%;
+      border-radius: 0px 0px 6px 6px;
+      font-size: 13px;
+      padding: 15px;
+      font-weight: 500;
+      transition: all 0.3s ease-in-out;
+      @include desktop {
+        margin-bottom: 20px;
+      }
+    }
+    &:hover {
+      transform: scale(1.05);
+      a {
+        background-color: darken($color: $primary-color, $amount: 10);
+        transform: translateY(0);
+      }
+      span.price {
+        color: $primary-color;
+      }
+    }
+  }
+}
+
+.calendar-container {
+    background: $white;
+    /* width: 450px; */
+    border-radius: 10px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+}
+
+.calendar-container header {
+    display: flex;
+    align-items: center;
+    padding: 25px 30px 10px;
+    justify-content: space-between;
+}
+
+header .calendar-navigation {
+    display: flex;
+}
+
+header .calendar-navigation span {
+    height: 38px;
+    width: 38px;
+    margin: 0 1px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 50%;
+    user-select: none;
+    color: #aeabab;
+    font-size: 1.9rem;
+}
+
+.calendar-navigation span:last-child {
+    margin-right: -10px;
+}
+
+header .calendar-navigation span:hover {
+    background: #f2f2f2;
+}
+
+header .calendar-current-date {
+    font-weight: 500;
+    font-size: 1.45rem;
+}
+
+.calendar-body {
+    padding: 15px;
+}
+
+.calendar-body ul {
+    list-style: none;
+    flex-wrap: wrap;
+    display: flex;
+    text-align: center;
+}
+
+.calendar-body .calendar-dates {
+    margin-bottom: 20px;
+}
+
+.calendar-body li {
+    width: calc(100% / 7);
+    font-size: 1rem;
+    color: #414141;
+}
+
+.calendar-body .calendar-weekdays li {
+    cursor: default;
+    font-weight: 500;
+}
+
+.calendar-body .calendar-dates li {
+    margin-top: 30px;
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.calendar-dates li.inactive {
+    color: #aaa;
+}
+
+.calendar-dates li.active {
+    color: #fff;
+}
+
+.calendar-dates li::before {
+    position: absolute;
+    content: "";
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.calendar-dates li.active::before {
+    background: $primary-color;
+}
+
+.calendar-dates li:not(.active):hover::before {
+    background: $bg-color;
+}

assets/scss/components/_quotes.scss

@@ -0,0 +1,54 @@
+.quotes {
+  text-align: center;
+  &-slider {
+    &-item {
+      outline: none;
+      h2 {
+        font-size: 40px;
+        font-weight: 500;
+        display: block;
+        line-height: 50px;
+        margin: 0 140px 20px 140px;
+        @include tablet {
+          margin: 0 50px 20px 50px;
+        }
+        @include mobile {
+          margin: 0 10px 20px 10px;
+          font-size: 30px;
+          line-height: 40px;
+        }
+        @include mobile-xs {
+          font-size: 25px;
+          line-height: 35px;
+        }
+      }
+      span {
+        font-size: 16px;
+      }
+    }
+    .slick-dots {
+      position: absolute;
+      bottom: -40px;
+      display: flex;
+      justify-content: center;
+      li {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        button {
+          background: $text-color;
+          text-indent: -999999999px;
+          border-radius: 50%;
+          width: 3px;
+          height: 3px;
+          outline: 0;
+        }
+      }
+    }
+    .slick-dots li.slick-active button {
+      background: $primary-color;
+    }
+  }
+}

assets/scss/components/_service.scss

@@ -0,0 +1,45 @@
+.service {
+  background: #f7f8fc;
+  padding: 50px 0;
+  @include mobile {
+    padding: 20px 0;
+  }
+  &-item {
+    background: $white;
+    padding: 50px 30px 50px;
+    text-align: center;
+    border: 1px solid #0000001c;
+    border-radius: 6px;
+    margin-bottom: 30px;
+    transition: all 0.3s ease-in-out;
+    @include mobile {
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+    i {
+      font-size: 40px;
+      margin-bottom: 40px;
+      color: #002255;
+      /* color: $text-color-dark; */
+      display: inline-block;
+      transition: all 0.3s ease-in-out;
+    }
+    h3 {
+      color: #002255;
+      text-transform: capitalize;
+      line-height: 26px;
+    }
+    p {
+      font-size: 14px;
+      color: #666666;
+      line-height: 26px;
+      margin-bottom: 0;
+    }
+    &:hover {
+      transform: scale(1.05);
+      i {
+        color: $primary-color;
+      }
+    }
+  }
+}

assets/scss/components/_story.scss

@@ -0,0 +1,46 @@
+.story {
+  position: relative;
+  display: flex;
+  align-items: center;
+  &-content {
+    @include tablet {
+      text-align: center;
+    }
+    h2 {
+      margin-bottom: 20px;
+    }
+  }
+  &-slider {
+    .slider-item {
+      outline: none;
+      img {
+        width: 100%;
+        transition: 0.5s $site-ease;
+      }
+    }
+    .slick-dots {
+      position: absolute;
+      bottom: -40px;
+      display: flex;
+      justify-content: center;
+      li {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        button {
+          background: $text-color;
+          text-indent: -999999999px;
+          border-radius: 50%;
+          width: 5px;
+          height: 5px;
+          outline: 0;
+        }
+      }
+    }
+    .slick-dots li.slick-active button {
+      background: $primary-color;
+    }
+  }
+}

assets/scss/components/_team.scss

@@ -0,0 +1,30 @@
+.team {
+  background: #b8cfe6 ;
+  padding-bottom: 100px;
+  @include desktop {
+    padding-bottom: 40px;
+  }
+  @include mobile {
+    padding-bottom: 30px;
+  }
+  .member-informashion {
+    text-align: center;
+    margin-bottom: 30px;
+    .member-thume {
+      margin-bottom: 20px;
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+      img {
+        width: 100%;
+        border-radius: 8px;
+        transition: all 0.5s ease-in-out;
+      }
+      &:hover {
+        img {
+          transform: scale(1.2);
+        }
+      }
+    }
+  }
+}

assets/scss/components/_testimonial.scss

@@ -0,0 +1,60 @@
+.testimonial {
+  position: relative;
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
+  padding: 100px 0;
+  @include desktop {
+    padding: 50px 0;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba($color: $black, $alpha: 0.5);
+    top: 0;
+    left: 0;
+  }
+  &-content {
+    background: $white;
+    padding: 50px 70px 40px;
+    border-radius: 6px;
+    position: relative;
+    z-index: 1;
+    @include desktop {
+      text-align: center;
+    }
+
+    @include mobile {
+      padding: 30px;
+    }
+    @include mobile-xs {
+      padding: 30px 15px 15px;
+    }
+
+    h3 {
+      font-weight: 300;
+      font-size: 25px;
+      margin-bottom: 35px;
+    }
+
+    blockquote {
+      line-height: 32px;
+      font-family: $primary-font;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      color: $text-color-dark;
+      cite {
+        color: #666666;
+        display: block;
+        margin-top: 30px;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        font-family: $secondary-font;
+        letter-spacing: 0;
+      }
+    }
+  }
+}

assets/scss/critical.scss

@@ -0,0 +1,13 @@
+@import "variables";
+
+@import "plugins/bootstrap.min";
+
+@import "typography";
+
+@import "mixins";
+
+@import "buttons";
+
+@import "components/navigation";
+
+@import "components/hero";

assets/scss/non-critical.scss

@@ -0,0 +1,47 @@
+@import "variables";
+
+@import "mixins";
+
+@import "plugins/themify";
+
+@import "plugins/slick";
+
+@import "plugins/slick-theme";
+
+@import "plugins/aos";
+
+@import "plugins/magnific-popup";
+
+@import "plugins/animate";
+
+@import "common";
+
+@import "components/gallery";
+
+@import "components/cta";
+
+@import "components/service";
+
+@import "components/blog";
+
+@import "components/testimonial";
+
+@import "components/pricing";
+
+@import "components/faq";
+
+@import "components/clients";
+
+@import "components/story";
+
+@import "components/team";
+
+@import "components/liens";
+
+@import "components/quotes";
+
+@import "components/contact";
+
+@import "components/error";
+
+@import "components/footer";

assets/scss/plugins/_magnific-popup.scss

@@ -0,0 +1,470 @@
+/* Magnific Popup CSS */
+.mfp-bg {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1042;
+    overflow: hidden;
+    position: fixed;
+    background: #0b0b0b;
+    opacity: 0.8;
+}
+
+.mfp-wrap {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1043;
+    position: fixed;
+    outline: none !important;
+    -webkit-backface-visibility: hidden;
+}
+
+.mfp-container {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+
+.mfp-container:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.mfp-align-top .mfp-container:before {
+    display: none;
+}
+
+.mfp-content {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 auto;
+    text-align: left;
+    z-index: 1045;
+}
+
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+    width: 100%;
+    cursor: auto;
+}
+
+.mfp-ajax-cur {
+    cursor: progress;
+}
+
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+    cursor: -moz-zoom-out;
+    cursor: -webkit-zoom-out;
+    cursor: zoom-out;
+}
+
+.mfp-zoom {
+    cursor: pointer;
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+
+.mfp-auto-cursor .mfp-content {
+    cursor: auto;
+}
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.mfp-loading.mfp-figure {
+    display: none;
+}
+
+.mfp-hide {
+    display: none !important;
+}
+
+.mfp-preloader {
+    color: #CCC;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    text-align: center;
+    margin-top: -0.8em;
+    left: 8px;
+    right: 8px;
+    z-index: 1044;
+}
+
+.mfp-preloader a {
+    color: #CCC;
+}
+
+.mfp-preloader a:hover {
+    color: #FFF;
+}
+
+.mfp-s-ready .mfp-preloader {
+    display: none;
+}
+
+.mfp-s-error .mfp-content {
+    display: none;
+}
+
+button.mfp-close,
+button.mfp-arrow {
+    overflow: visible;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    display: block;
+    outline: none;
+    padding: 0;
+    z-index: 1046;
+    box-shadow: none;
+    touch-action: manipulation;
+}
+
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+.mfp-close {
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    text-decoration: none;
+    text-align: center;
+    opacity: 0.65;
+    padding: 0 0 18px 10px;
+    color: #FFF;
+    font-style: normal;
+    font-size: 28px;
+    font-family: Arial, Baskerville, monospace;
+}
+
+.mfp-close:hover,
+.mfp-close:focus {
+    opacity: 1;
+}
+
+.mfp-close:active {
+    top: 1px;
+}
+
+.mfp-close-btn-in .mfp-close {
+    color: #333;
+}
+
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+    color: #FFF;
+    right: -6px;
+    text-align: right;
+    padding-right: 6px;
+    width: 100%;
+}
+
+.mfp-counter {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #CCC;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+}
+
+.mfp-arrow {
+    position: absolute;
+    opacity: 0.65;
+    margin: 0;
+    top: 50%;
+    margin-top: -55px;
+    padding: 0;
+    width: 90px;
+    height: 110px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mfp-arrow:active {
+    margin-top: -54px;
+}
+
+.mfp-arrow:hover,
+.mfp-arrow:focus {
+    opacity: 1;
+}
+
+.mfp-arrow:before,
+.mfp-arrow:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin-top: 35px;
+    margin-left: 35px;
+    border: medium inset transparent;
+}
+
+.mfp-arrow:after {
+    border-top-width: 13px;
+    border-bottom-width: 13px;
+    top: 8px;
+}
+
+.mfp-arrow:before {
+    border-top-width: 21px;
+    border-bottom-width: 21px;
+    opacity: 0.7;
+}
+
+.mfp-arrow-left {
+    left: 0;
+}
+
+.mfp-arrow-left:after {
+    border-right: 17px solid #FFF;
+    margin-left: 31px;
+}
+
+.mfp-arrow-left:before {
+    margin-left: 25px;
+    border-right: 27px solid #3F3F3F;
+}
+
+.mfp-arrow-right {
+    right: 0;
+}
+
+.mfp-arrow-right:after {
+    border-left: 17px solid #FFF;
+    margin-left: 39px;
+}
+
+.mfp-arrow-right:before {
+    border-left: 27px solid #3F3F3F;
+}
+
+.mfp-iframe-holder {
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.mfp-iframe-holder .mfp-content {
+    line-height: 0;
+    width: 100%;
+    max-width: 900px;
+}
+
+.mfp-iframe-holder .mfp-close {
+    top: -40px;
+}
+
+.mfp-iframe-scaler {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding-top: 56.25%;
+}
+
+.mfp-iframe-scaler iframe {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #000;
+}
+
+/* Main image in popup */
+img.mfp-img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    line-height: 0;
+    box-sizing: border-box;
+    padding: 40px 0 40px;
+    margin: 0 auto;
+}
+
+/* The shadow behind the image */
+.mfp-figure {
+    line-height: 0;
+}
+
+.mfp-figure:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 40px;
+    bottom: 40px;
+    display: block;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: -1;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #444;
+}
+
+.mfp-figure small {
+    color: #BDBDBD;
+    display: block;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+.mfp-figure figure {
+    margin: 0;
+}
+
+.mfp-bottom-bar {
+    margin-top: -36px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    cursor: auto;
+}
+
+.mfp-title {
+    text-align: left;
+    line-height: 18px;
+    color: #F3F3F3;
+    word-wrap: break-word;
+    padding-right: 36px;
+}
+
+.mfp-image-holder .mfp-content {
+    max-width: 100%;
+}
+
+.mfp-gallery .mfp-image-holder .mfp-figure {
+    cursor: pointer;
+}
+
+@media screen and (max-width: 800px) and (orientation: landscape),
+screen and (max-height: 300px) {
+
+    /**
+         * Remove all paddings around the image on small screen
+         */
+    .mfp-img-mobile .mfp-image-holder {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .mfp-img-mobile img.mfp-img {
+        padding: 0;
+    }
+
+    .mfp-img-mobile .mfp-figure:after {
+        top: 0;
+        bottom: 0;
+    }
+
+    .mfp-img-mobile .mfp-figure small {
+        display: inline;
+        margin-left: 5px;
+    }
+
+    .mfp-img-mobile .mfp-bottom-bar {
+        background: rgba(0, 0, 0, 0.6);
+        bottom: 0;
+        margin: 0;
+        top: auto;
+        padding: 3px 5px;
+        position: fixed;
+        box-sizing: border-box;
+    }
+
+    .mfp-img-mobile .mfp-bottom-bar:empty {
+        padding: 0;
+    }
+
+    .mfp-img-mobile .mfp-counter {
+        right: 5px;
+        top: 3px;
+    }
+
+    .mfp-img-mobile .mfp-close {
+        top: 0;
+        right: 0;
+        width: 35px;
+        height: 35px;
+        line-height: 35px;
+        background: rgba(0, 0, 0, 0.6);
+        position: fixed;
+        text-align: center;
+        padding: 0;
+    }
+}
+
+@media all and (max-width: 900px) {
+    .mfp-arrow {
+        -webkit-transform: scale(0.75);
+        transform: scale(0.75);
+    }
+
+    .mfp-arrow-left {
+        -webkit-transform-origin: 0;
+        transform-origin: 0;
+    }
+
+    .mfp-arrow-right {
+        -webkit-transform-origin: 100%;
+        transform-origin: 100%;
+    }
+
+    .mfp-container {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+}
+
+.mfp-iframe-holder .mfp-close{
+    font-family: $primary-font;
+    font-weight: 300;
+    font-size: 35px;
+}
+
+button.mfp-close{
+    font-family: $primary-font;
+    font-weight: 300;
+    font-size: 35px;
+}
+
+.mfp-zoom-out-cur{
+    cursor: url(../images/minus.png), auto;
+}
+
+.mfp-title, .mfp-counter{
+    font-family: $primary-font;
+}

assets/scss/plugins/_slick-theme.scss

@@ -0,0 +1,199 @@
+@charset 'UTF-8';
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('../fonts/slick.eot');
+    src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg');
+    font-display: swap;
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

assets/scss/plugins/_slick.scss

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}