/**
  Font
  General
  Header  
  Footer 
  Responsive
*/

/* Font */

@font-face {
  font-family: "Sailec Thin";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("sailec/sailec-thin.eot");
  src: url("sailec/sailec-thin.ttf") format("truetype"),
    url("sailec/sailec-thin.woff") format("woff"),
    url("sailec/sailec-thin.woff2") format("woff2"),
    url("sailec/sailec-thin.svg") format("svg");
}

@font-face {
  font-family: "Sailec Light";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("sailec/sailec-light.eot");
  src: url("sailec/sailec-light.ttf") format("truetype"),
    url("sailec/sailec-light.woff") format("woff"),
    url("sailec/sailec-light.woff2") format("woff2"),
    url("sailec/sailec-light.svg") format("svg");
}

@font-face {
  font-family: "Sailec Medium";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("sailec/sailec-medium.eot");
  src: url("sailec/sailec-medium.ttf") format("truetype"),
    url("sailec/sailec-medium.woff") format("woff"),
    url("sailec/sailec-medium.woff2") format("woff2"),
    url("sailec/sailec-medium.svg") format("svg");
}

@font-face {
  font-family: "Sailec Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("sailec/sailec-bold.eot");
  src: url("sailec/sailec-bold.ttf") format("truetype"),
    url("sailec/sailec-bold.woff") format("woff"),
    url("sailec/sailec-bold.woff2") format("woff2"),
    url("sailec/sailec-bold.svg") format("svg");
}

/* General */

html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  width: 100%;
  height: 100%;
}
body {
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  font-family: "Sailec Light";
}

a {
  text-decoration: none !important;
}

.text-black {
  color: #000;
}
.bg-black {
  background: #000;
}

.animated-heading {
  font-family: "Sailec Bold";
  position: relative;
  display: inline-block;
  font-size: 1.75rem;
  color: #333536;
}
.animated-heading:after {
  background-color: #4386fc;
  opacity: 25%;
  bottom: 0.3rem;
  content: "";
  height: 32%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
  transform: all 0.9s ease;
  animation: 1.5s ease-out 0s 1 slideInFromLeft;
}
@keyframes slideInFromLeft {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.animated-button {
  position: relative;
  font-family: "Sailec Medium";
  font-size: 0.875rem;
  padding: 0.4rem 0;
  color: #000;
  z-index: 1;
}
.animated-button:hover {
  color: #000;
}
.animated-button:before,
.animated-button:after {
  content: "";
  height: 100%;
  position: absolute;
  left: -1.5rem;
  top: 0;
  opacity: 1;
  z-index: -1;
  transition: all 0.6s 0s cubic-bezier(0.7, 0, 0.3, 1);
}
.animated-button::before {
  background-color: #4386fc;
  width: 68%;
}
.animated-button::after {
  background-color: rgba(115, 110, 254, 0.5);
  width: 68%;
}
.animated-button:hover:before {
  left: 0;
  opacity: 0;
  width: 100%;
}
.animated-button:hover:after {
  width: 100%;
}

.logo .gif {
  width: 65px;
}
.logo .text {
  width: 85px;
}

/* Header */

header .small-nav {
  padding: 0.25rem 3.5rem;
  background: #000;
}
header .small-nav [class^="flaticon-"]:before {
  font-size: 1.125rem;
  margin-left: 0px;
  vertical-align: middle;
}
header .small-nav a {
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.815rem;
}
header .main-nav {
  border-bottom: 0.1rem solid #eeeeee;
  padding: 0.9rem 3.5rem;
}
header .main-nav .navbar-nav li.active > .nav-link {
  color: #4386fc;
}
header .main-nav .navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  color: #8d8fa6;
}
header .main-nav .btn {
  font-size: 0.815rem;
  font-family: "Sailec Medium";
  padding: 0.375rem 1.25rem;
  box-shadow: none;
}
header .main-nav .btnSignup {
  border-radius: 50rem;
  background-color: #4386fc;
  color: #fff;
}

/* Footer */

footer {
  padding: 2.5rem 0 0;
  background: url(../images/web/footer-bg.jpg);
  background-size: 100% auto;
  background-color: #000a1e;
  color: #fff;
  line-height: 22px;
  background-repeat: no-repeat;
  overflow: hidden;
}
footer .description {
  font-family: "Sailec Medium";
  line-height: 1.5;
}
footer .messages i::before {
  background: #07b4fe;
  border-radius: 4px;
  width: 24px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  margin-bottom: 6px;
  display: inline-block;
}
footer .messages i.flaticon-heart::before {
  background: #4386fc;
}
footer .messages i.flaticon-shield::before {
  background: #9266fd;
}
footer .messages {
  z-index: 1;
  position: relative;
}
footer .messages p.desc {
  font-size: 0.75rem;
}
footer .get-start {
  font-family: "Sailec Medium";
  background: url(../images/web/get-start.png);
  background-size: 100% 100%;
  padding: 35px 20px;
  position: relative;
}
footer .img-circle {
  position: absolute;
  width: 250px;
  right: -102px;
  top: -160px;
}
footer .get-start h6 {
  font-family: "Sailec Bold";
}
footer .get-start .animated-button::before {
  background-color: #fff;
}
footer .get-start .animated-button::after {
  background-color: rgb(255 255 255 / 50%);
}
footer .links h4 {
  font-family: "Sailec Medium";
  font-size: 0.84rem;
  margin-bottom: 0.75rem;
}
footer ul.quicklinks li a {
  padding: 0.125rem 0;
}
footer .links p,
footer .copy-right p,
footer ul.quicklinks li a {
  color: #a5a5a5;
  font-size: 12px;
}
footer ul.sociallinks li a {
  font-size: 16px;
}
footer .copy-right {
  border-top: 2px solid #141d30;
  padding: 0.125rem 0;
}

/* Responsive */

@media (min-width: 768px) and (max-width: 993px) {
  header .main-nav .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
  }
}
@media (max-width: 767.98px) {
  header .main-nav .navbar-toggler {
    padding: 0;
    border: 0px;
    outline: 0;
  }
  header .main-nav,
  header .small-nav {
    padding: 0.5rem 1.5rem;
  }
  header .main-nav .navbar-collapse {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 99;
    top: 81px;
    left: 0px;
    font-family: "Sailec Medium";
    border-top: 1px solid #ebebeb;
    padding: 12px 0 20px;
  }
  footer .messages p.desc {
    width: 320px;
    display: inline-block;
  }
  footer .messages .media {
    display: block;
  }
}

@media (max-width: 576px) {
  footer .messages p.desc {
    width: 305px;
  }
}