/**
 * @author Abdelaziz Bardich
 * @email abdelazizbardich@gmail.com
 * @Url : https://abdelazizbardich.com
 * @Phone : +212 6 03768705",
 * @Github : https://github.com/abdelazizbardich
 * @create date 2021-11-12 19:37:05
 * @modify date 2021-11-12 19:38:02
 * @desc ""
 */


@font-face {
  font-family: "hacen-casablanca";
  src: url("../fonts/hacen-casablanca.woff2") format("woff2"),
    url("../fonts/hacen-casablanca.woff") format("woff");
}
:root {
  --color-primary: #fa6300;
  --color-secondary: #ffba00;
  --color-dark: #000000;
  --color-white: #ffffff;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

html,
body {
  direction: rtl;
}
body {
  font-family: "hacen-casablanca";
  color: #000;
}
header nav {
  font-weight: bold;
  background-color: #ffffff;
}
header .navbar-nav .nav-link {
  color: inherit;
}
header nav ul li {
  opacity: 1;
  color: black;
  font-size: 1.3rem;
  /* font-weight: 400; */
  font-weight: bold;
  margin-inline: 8px;
  padding-inline: 8px;
  margin-block: 8px;
  width: fit-content;
  border-radius: 25px;
}
header nav ul li.nav-item:hover .nav-link {
  color: var(--color-primary) !important;
}
header nav ul li.login {
  color: var(--color-primary);
  background-color: #f8fafc;
  box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;
}
header nav ul li.sign_up {
  color: #ffffff;
  background-color: var(--color-secondary);
  box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body p {
  font-size: 0.8rem;
}

header {
  position: sticky;
  top: 0;
  height: 50px;
  z-index: 99;
}

main {
  min-height: calc(100vh - 120px);
  padding-block: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
}
h1.title {
  color: var(--color-primary);
  font-size: 4rem;
  max-width: 700px;
}
.form-group {
  margin-block-end: 18px;
}
.form-control {
  border-radius: 0px;
  border-color: var(--color-dark);
  padding: 8px 16px;
}
.btn {
  border-radius: 8px;
  padding: 8px 16px;
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-color: var(--color-secondary);
}
.btn-scondary {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-color: var(--color-secondary);
}
.btn-scondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.text-primary {
  color: var(--color-primary) !important;
}
hr {
  background: var(--color-primary);
  height: 1 px;
  width: 100%;
}
/* Responsive youtube embed */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
/* End */