body {
  font-weight: 400;

  font-family: "Noto Sans", sans-serif;
}

a {
  color: #fff;

  text-decoration: none !important;
}

.si {
  padding: 14px;

  font-size: 30px;

  width: 47px;

  text-align: center;

  text-decoration: none;

  margin: 5px 2px;

  border-radius: 50%;
}

.si:hover {
  opacity: 0.7;
}

.fa-linkedin {
  background: #007bb5;

  color: white;
}

.fa-youtube {
  background: #bb0000;

  color: white;
}

.fa-instagram {
  background: #125688;

  color: white;
}

.fa-facebook {
  background: #3b5998;

  color: white;
}

.fa-twitter {
  background: #55acee;

  color: white;
}

.toppers {
  background: #0c3376;

  padding: 54px;
}

.topheader {
  background: #f3cb0cc2;

  padding: 10px;
}

.topheader {
  color: #fff;
}

.footer2 {
  background: #f3cb0cc2;

  padding: 10px;
}

.footer2 {
  color: #fff;
}

.header {
  background: #0c3376;

  padding: 13px;
}

.nav-link {
  font-size: 13px;

  font-weight: 600;

  color: #fff;

  width: 132px;

  text-align: center;
}

.nav-link:hover {
  background: #f1c936;

  color: #fff;

  border-radius: 5px;

  transition: all 0.4s;
}

#container {
  margin: 0 auto;

  max-width: 890px;
}

p {
  /*text-align: center;*/
  text-align: justify;
}

.toggle,
[id^="drop"] {
  display: none;
}

/* Giving a background-color to the nav container. */

nav {
  z-index: 9999;

  margin: 0;

  padding: 0;
}

#logo {
  display: block;

  padding: 0 30px;

  float: left;

  font-size: 20px;

  line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"

 * we need to add a clear after the container. */

nav:after {
  content: "";

  display: table;

  clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",

 * and adding "position:reltive" */

nav ul {
  float: right;

  padding: 8px;

  margin: 0;

  list-style: none;

  position: relative;
}

/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;

  display: inline-block;

  float: left;

  background-color: #0c3376;
}

/* Styling the links */

nav a {
  display: block;

  padding: 14px 20px;

  color: #fff;

  font-size: 17px;

  text-decoration: none;
}

nav ul li ul li:hover {
  background: lavender;
}

/* Background color change on Hover */

nav a:hover {
  background-color: lavender;
  color: #0c3376;
}

/* Hide Dropdowns by Default

 * and giving it a position of absolute */

nav ul ul {
  display: none;

  position: absolute;

  /* has to be the same number as the "line-height" of "nav a" */

  top: 60px;
}

/* Display Dropdowns on Hover */

nav ul li:hover > ul {
  display: inherit;
}

/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;

  float: none;

  display: list-item;

  position: relative;
}

/* Second, Third and more Tiers 

 * We move the 2nd and 3rd etc tier dropdowns to the left

 * by the amount of the width of the first tier.

*/

nav ul ul ul li {
  position: relative;

  top: -60px;

  /* has to be the same number as the "width" of "nav ul ul li" */

  left: 170px;
}

/* Change ' +' in order to change the Dropdown symbol */

/*li > a:after { content:  ' +'; }*/

li > a:only-child:after {
  content: "";
}

/* Media Queries

--------------------------------------------- */

@media all and (max-width: 768px) {
  #logo {
    display: block;

    padding: 0;

    width: 100%;

    text-align: center;

    float: none;
  }

  nav {
    margin: 0;
  }

  /* Hide the navigation menu by default */

  /* Also hide the  */

  .toggle + a,
  .menu {
    display: none;
  }

  /* Stylinf the toggle lable */

  .toggle {
    display: block;

    background-color: #0c3376;

    padding: 14px 20px;

    color: #fff;

    font-size: 17px;

    text-decoration: none;

    border: none;
  }

  .toggle:hover {
    background-color: #0c3376;
  }

  /* Display Dropdown when clicked on Parent Lable */

  [id^="drop"]:checked + ul {
    display: block;
  }

  /* Change menu item's width to 100% */

  nav ul li {
    display: block;

    width: 100%;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav a:hover,
  nav ul ul ul a {
    background-color: #0c3376;
  }

  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a {
    padding: 14px 20px;

    color: #fff;

    font-size: 17px;
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #212121;
  }

  /* Hide Dropdowns by Default */

  nav ul ul {
    float: none;

    position: static;

    color: #ffffff;

    /* has to be the same number as the "line-height" of "nav a" */
  }

  /* Hide menus on hover */

  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }

  /* Fisrt Tier Dropdown */

  nav ul ul li {
    display: block;

    width: 100%;
  }

  nav ul ul ul li {
    position: static;

    /* has to be the same number as the "width" of "nav ul ul li" */
  }
}

@media all and (max-width: 330px) {
  nav ul li {
    display: block;

    width: 94%;
  }
}

/*.services h3

{

   color: #108bea;

}*/

.latest {
  background-image: url(https://vigil.wpengine.com/wp-content/uploads/2017/09/img1-6.jpg?id=9146);
}

.best h2 {
  font-weight: 700;
  font-size: 29px;
}

.latest .overlay {
  position: absolute;

  content: "";

  background: rgba(240, 243, 246, 0.9);

  left: -7px;

  top: -6px;

  width: 103%;

  height: 103%;

  display: block;
}

.devices h4 {
  font-size: 24px;

  font-weight: 400;

  letter-spacing: 0.5px;

  text-transform: none;

  color: #000000;
}

.devices p {
  color: #888888;

  font-size: 12px;
}

.total {
  background: #f0f3f6;
}

.blink {
  animation: blinker 0.6s linear infinite;

  color: red;

  font-size: 18px;

  font-weight: bold;

  font-family: sans-serif;

  text-align: center;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.blink-one {
  animation: blinker-one 1s linear infinite;
}

@keyframes blinker-one {
  0% {
    opacity: 0;
  }
}

.blink-two {
  animation: blinker-two 1.4s linear infinite;
}

@keyframes blinker-two {
  100% {
    opacity: 0;
  }
}

.btn {
  position: relative;

  display: inline-block;

  /* margin: 15px; */

  padding: 12px 27px;

  text-align: center;

  font-size: 16px;

  letter-spacing: 1px;

  text-decoration: none;

  color: #999999;

  background: #ffffff;

  border: 3px solid #999999;

  cursor: pointer;

  transition: ease-out 0.5s;

  -webkit-transition: ease-out 0.5s;

  -moz-transition: ease-out 0.5s;
}

.btn.btn-border-4::after,
.btn.btn-border-4::before {
  position: absolute;

  content: "";

  width: 0;

  height: 0;

  transition: 0.5s;
}

.btn.btn-border-4::after {
  top: -9px;

  left: -9px;

  border-top: 3px solid transparent;

  border-left: 3px solid transparent;
}

.btn.btn-border-4::before {
  bottom: -9px;

  right: -9px;

  border-bottom: 3px solid transparent;

  border-right: 3px solid transparent;
}

.btn.btn-border-4:hover {
  color: #222222;
}

.btn.btn-border-4:hover::after,
.btn.btn-border-4:hover::before {
  width: calc(100% + 15px);

  height: calc(100% + 15px);

  border-color: #222222;
}

.container1 {
  position: relative;

  width: 50%;
}

.image {
  display: block;

  width: 100%;

  height: auto;
}

.overlay {
  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: #008cba;

  overflow: hidden;

  width: 0;

  height: 100%;

  transition: 0.5s ease;
}

.container1:hover .overlay {
  width: 100%;
}

.text {
  color: white;

  font-size: 20px;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  white-space: nowrap;
}

.container2 {
  width: 100%; /* Full width */

  background-color: #ddd; /* Grey background */
}

.skills {
  text-align: right; /* Right-align text */

  padding-top: 10px; /* Add top padding */

  padding-bottom: 10px; /* Add bottom padding */

  color: white; /* White text color */
}

.html {
  width: 90%;
  background-color: #04aa6d;
} /* Green */

.css {
  width: 80%;
  background-color: #2196f3;
} /* Blue */

.js {
  width: 65%;
  background-color: #f44336;
} /* Red */

.php {
  width: 60%;
  background-color: #808080;
} /* Dark Grey */

.progress {
  background-color: rgba(242, 244, 246, 0.95);

  padding: 146px;
}

.footer {
  background: #0c3376;

  padding: 54px;

  color: #fff;
}

.form {
  /*background: lavender;*/

  /*padding: 30px;*/
}

.ame {
  background: #0c3376;

  color: #fff;

  padding: 10px;

  border-radius: 7px 7px 1px 0px;
}

.en {
  background: lavender;

  padding: 20px;
}

.services {
  background: lavender;

  padding: 23px;

  border-radius: 4px;

  border: 2px solid lavender;
}

.sub-title {
  background: #0c3376;

  padding: 17px;

  border-radius: 8px 8px 0px 0px;

  color: #fff;
}

.heading {
  background: lavender;

  padding: 10px;

  border: 2px solid lavender;

  font-size: 15px;

  font-weight: 500;
}

.dropdown {
  position: relative;

  display: inline-block;
}

.dropdown-content {
  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;
}

.dropdown-content a {
  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

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

.testimonials {
  background-color: #fff;

  position: relative;

  padding-top: 80px;

  &:after {
    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 30%;

    background-color: #ddd;
  }
}

#customers-testimonials {
  .item-details {
    background-color: #333333;

    color: #fff;

    padding: 20px 10px;

    text-align: left;

    h5 {
      margin: 0 0 15px;

      font-size: 18px;

      line-height: 18px;

      span {
        color: red;

        float: right;

        padding-right: 20px;
      }
    }

    p {
      font-size: 14px;
    }
  }

  .item {
    text-align: center;

    /* padding: 20px; */

    margin-bottom: 80px;
  }
}

.owl-carousel .owl-nav [class*="owl-"] {
  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

.owl-carousel .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

.owl-carousel {
  position: relative;
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 50%;

  position: absolute;

  top: 30%;

  font-size: 20px;

  color: #fff;

  border: 1px solid #ddd;

  text-align: center;
}

.owl-carousel .owl-prev {
  left: -70px;
}

.owl-carousel .owl-next {
  right: -70px;
}

.bg-img {
  background-image: url("images/banner2.jpg");

  min-height: 380px;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  padding: 20px;
}

.bg-img1 {
  background-image: url("images/banner3.webp");

  min-height: 380px;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  padding: 20px;
}

/* Add styles to the form container */

/* Full-width input fields */

input[type="text"],
input[type="password"] {
  width: 100%;

  padding: 15px;

  margin: 5px 0 22px 0;

  border: none;

  background: #f1f1f1;
}

input[type="text"]:focus,
input[type="password"]:focus {
  background-color: #ddd;

  outline: none;
}

/* Set a style for the submit button */

.btn {
  background-color: #0c3376;

  color: white;

  padding: 16px 20px;

  border: none;

  cursor: pointer;

  width: 100%;

  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}

.dropdown-btn {
  padding: 6px 8px 6px 16px;

  text-decoration: none;

  font-size: 20px;

  color: #818181;

  display: block;

  border: none;

  background: none;

  width: 100%;

  text-align: left;

  cursor: pointer;

  outline: none;
}

@media screen and (max-width: 479px) {
  .topheader p {
    display: none;
  }

  .email h5 {
    text-align: left !important;

    font-size: 10px;
  }

  .emailmo {
    font-size: 10px;

    margin: -20px -9px 0px 0px;
  }

  .header img {
    max-width: 140px;
  }

  .nav-item {
    display: flex;

    justify-content: end;
  }

  .menubtn {
    position: absolute;

    right: 0;

    top: -30px;
  }

  .heading {
    margin-bottom: 15px;

    text-align: justify;
  }
}

.footer2 p {
  display: none;
}

.emo {
  text-align: left;
}

.footer {
  padding: 10px;
}