/*
Template Name       :   STM
Template Author     :   Yousef Alaa
Template Version    :   1.0
My Email            :   yousefalaa11223344@gmail.com
Date Created        :   15/10/2020
Last Update         :   7/11/2020
*/

/*
Import Google Fonts
===================
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@500&display=swap');

/*

font-family: 'Bebas Neue', cursive;
font-family: 'Inter', sans-serif;
font-family: 'Poppins', sans-serif;

*/

/*
Main Rules
==========
*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --main-color: #0f63f9;
}

body {
    background-color: #000;
    font-family: 'Poppins', sans-serif;
}

p {color: #7d7d7d}

h1,h2,h3,h4,h5,h6 {color: #FFF;font-family: 'Inter', cursive;}

.stm {
    font-family: 'Poppins', sans-serif;
    color: #FFF;
    border: 2px solid var(--main-color);
    padding: 3px 15px;
    display: inline-block;
    border-radius: 50%;
    font-size: 25px;
}

.h-span {border-bottom: 2px solid var(--main-color)}
.blue-sp {color:  var(--main-color)}

/* Start Preloader */
.preloader {
    background: #000;position: fixed;top: 0;left: 0;
    width: 100%;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;z-index: 100;
}

.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-animation: sk-chase 2.5s infinite linear both;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: sk-chase-dot 2.0s infinite ease-in-out both;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: var(--main-color);
  border-radius: 100%;
  -webkit-animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }

@-webkit-keyframes sk-chase {
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes sk-chase {
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes sk-chase-dot {
  80%, 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes sk-chase-dot {
  80%, 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes sk-chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  } 100%, 0% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@keyframes sk-chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  } 100%, 0% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* End Preloader */


/* Start Nav */
nav {
    background-color: #000;
    color: #FFF;
    border-bottom: 1px solid #282828
}

nav .navbar-brand {cursor: default}
nav .nav-item {position: relative;margin-right: 10px}
nav .nav-item .nav-link {color: #FFF;-webkit-transition: .5s all ease-in-out;transition: .5s all ease-in-out}
nav .nav-item .nav-link i {color: var(--main-color);}

nav .nav-link:after {
    position: absolute;bottom: -17px;left: 0;content: "";
    width: 0%;height: 1px;background: var(--main-color);-webkit-transition: .5s all ease-in-out;transition: .5s all ease-in-out
}

nav .navbar-toggler {border: 1px solid var(--main-color)}
nav .navbar-toggler:focus {outline: none;}
nav .navbar-toggler span {color: var(--main-color)}


nav .active .nav-link,
nav .nav-link:hover {color: var(--main-color);}
nav .active .nav-link:after,
nav .nav-link:hover:after{width: 100%;}

/* End Nav */

/* Start Footer */
footer {margin-top: 75px}
footer h2 {margin-bottom: 30px;}

footer .contact {padding-bottom: 75px}
footer section:first-of-type {}
footer section:first-of-type p:first-of-type {color: #FFF;margin-bottom: 22px;}
footer section:first-of-type p:last-of-type {color: #FFF;margin-top: 10px;}

footer .form-control {
    background: #000;
    border: none;
    border-bottom: 1px solid #CCC;
    margin-bottom: 20px;
}

footer .form-control:focus {
    background: #000;
    border: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid var(--main-color);
    margin-bottom: 20px;
    color: #FFF
}

footer form a {
    display: inline-block;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: #FFF;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    margin-right: 7px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

footer form a:hover {background: #FFF;color: var(--main-color);}

footer hr {border-top: 1px solid #CCC;}

footer .copy {padding: 10px 0}
footer .copy p {display: inline-block}
footer .copy p:first-of-type {font-size: 11px;}
footer .copy p:last-of-type {float: right;}

/* End Footer */

/* Start To Top Btn */

.to-top {
    display: block;width: 35px;height: 35px;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;
    position: fixed;bottom: -40px;right: 35px;border: 1px solid var(--main-color);
    background: var(--main-color);color: #FFF;border-radius: 50%;text-indent: -1px;
}

.to-top:hover {background: #FFF;color: var(--main-color);}

/* End To Top Btn */


@media (max-width: 991px) {
    footer .copy p {display: block;float: none !important;text-align: center}
}

@media (max-width: 767.8px) {
    nav .nav-item {margin-bottom: 8px;}
    nav .nav-item:last-of-type {margin-bottom: 0px;}
    nav .nav-link:after {bottom: -5px}

    footer section:last-of-type {margin-top: 35px}
}