@font-face {
  font-family: "SofiaProBold";
  src: url("../ressources/fonts/SofiaProBold.ttf");
}

@font-face {
  font-family: "SofiaProLight";
  src: url("../ressources/fonts/SofiaProLight.ttf");
}

.primary-slider {
  overflow: hidden;
}
.primary-slider::-webkit-scrollbar { width: 0 !important }

html {
  overflow-x:hidden;
}

body {
  overflow-x: hidden;
}

h4 {
  font-size: 130%;
  text-align: center;
}

p {
  font-family: SofiaProLight;
}

a {
  text-decoration: none;
}

/* Main container */

@media (max-width: 600px) {
  #title {
    text-align: center;
  }
  #sub-title {
    text-align: justify;
  }
}

/* Cartes */

@media (max-width: 1000px) {
  #card3 {
    display: none;
  }
}

/* Images */

.mobile-img {
  display: none;
}

.desktop-img {
  display: block;
}

@media (max-width: 1000px) {
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
  }
}


/* Colors */

.primary-color-bg {
  background-color: #000;
}

.secondary-color-bg {
  background-color: #090909;
}

.thirdy-color-bg {
  background-color: #232323
}

.blue-color {
  background-color: #0076BB;
}

.dark-blue-color {
  background-color: #005180;
}

/* texts */

.text-title {
  color: #0076BB;
}

.text-subtitle {
  color: white;
}

.text-content {
  color: white;
  text-align: justify;
}

.text-services-title {
  color: white;
}

.text-services-content {
  color: white;
}

.text-profil-title {
  color: white;
}

/* Bootstrap css */

.navbar {
    background-color: transparent;
}

.navbar.scrolled {
  background-color: #121212 !important;
  transition: background-color 200ms linear;
}

.nav-item{
   text-align: right;
}

.container-fluid {
  padding: 0;
}

.space-1 {
  height: 20px;
  opacity: 0;
}

.space-2 {
  height: 50px;
  opacity: 0;
}

/* elements */

#main-bg {
  background-image: url("../ressources/images/background.jpeg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#title {
  font-size: 500%;
  color: white;
  font-family: SofiaProBold;
}

/* Plugin particles */
#particles-js {
  width: 100%;
}

@media (max-width: 1000px) {
  #particles-js {
    opacity: 0;
  }
}