*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}

:root{
  --blue : #0981bd;
  --dark-blue: #07005e;
  --orange: #f96f09;
  --red: #7e0109;
  --white: #fff;
  --black: #333;
}
/* nav bar*/

nav{
  position: fixed;
  top: 0;
  left: 0;
  height: 55px;
  z-index: 999;
  background: var(--white);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.10);
  width: 100%;
}

/* boutons */
.accueil,.contact{
  background: var(--blue);
}
.services{
  background: var(--red);
}
.projets{
  background: var(--orange);
}
.propos{
  background: var(--dark-blue);
}
.btn{
  border: none !important;
  color: var(--white);
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.10);
}

.btn:hover{
  border: none !important;
  background: var(--black);
  color: var(--white);
  outline: none !important;
}

.send{
  background: var(--orange);
  color: var(--white);
  width: 100%;
}

/** banner  ***/
.banner{
  position: relative;
  top: 55px;
  height: 550px;
}

#background-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  }

#sub-banner{
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(45deg,var(--blue),var(--orange));
  z-index: 1;
  opacity: 0.6;
}

#img-banner{
  width: 200px !important;
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
}

.title-banner{
  z-index: 2;
  position: absolute;
  top: 25%;
  left: 4%;
  color: var(--white);
  font-size: 45px;
  text-shadow: rgba(0, 0, 0, 0.50) 2px 2px 2px ;
}

.text-banner{
  z-index: 2;
  position: absolute;
  top: 40%;
  left: 4%;
  color: var(--orange);
  width: 50%;
  font-size: 21px;
  text-shadow: rgba(0, 0, 0, 0.30) 1px 1px 1px ;
}

/** Qui sommes nous */

.whoweare-banner{
  position: relative;
  top: 35px;
}
.whoweare{
  font-size: 20px;
}

.whoweare-card{
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.10);
  transition: scale 0.1s ease-in-out;
}

.whoweare-card:hover{
  cursor: pointer;
  scale: 0.98;
  background: #f8f8f8;
}

.whoweare-paragraph{
  padding: 2%;
  text-shadow: rgba(0, 0, 0, 0.10) 1px 1px 1px;
}
.title{
  color: var(--blue);
  font-size: 20px;
  text-align: center;
}
.title-presentation{
  color: var(--blue);
}


.icon{
  color: var(--red);
  font-size: 50px;
}

/** Services **/

.box{
  position: relative;
  height: 250px;
  width: 100%;
  background: repeating-conic-gradient(from var(--a),#ee6407 0%, #ee6407 5%, transparent 5%, transparent 40%, #7b0008 50%);
  animation: animate 8s linear infinite;
  border-radius: 20px;
  cursor: pointer;
}

.box::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(from var(--a),#0981ba 0%, #0981ba 5%, transparent 5%, transparent 40%, #070e76 50%);
  animation: animate 8s linear infinite;
  animation-delay: -1s;
  border-radius: 20px;
}

.box::after{
  content: '';
  position: absolute;
  inset: 2px;
  background: #fff;
  border-radius: 15px;
  border: 2px solid #c4c4c4;
}

.box-title{
  position: absolute;
  z-index: 999;
  text-align: center;
  bottom: 2%;
  margin-left: 6%;
  width: 88% !important;
  left: 0 !important;
  text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px ;
  color: var(--black);
  font-size: 16px;
  background: var(--white);
  padding: 1%;
  border-radius: 4%;
  border: 1px solid #c4c4c4;
}

.box-img{
  width: 90% !important;
  position: absolute;
  object-fit: cover;
  left: 0;
  z-index: 999;
  margin: 11px;
  border: 1px solid #c4c4c4;
  border-radius: 3%;
  transition: scale 0.3s ease-in-out;
}

.box-img:hover{
  scale: 0.9;
}

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes animate {
  0%{
      --a: 0deg;
  }
  100%{
      --a: 360deg;
  }
}

/* parallax **/
.separation{
  height: 100%;
}
.parallax {
  /* The image used */
  background-image: url('../images/informatique.jpg');

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url('../images/marketing.jpg');

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blur{
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(45deg,var(--blue),var(--orange));
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

/** pourquoi choisir */

.why{
  text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px ;
  border-bottom: 3px solid var(--orange);
  padding: 1%;
  font-size: 18px;
  width: 100%;
}

.why-title{
  font-size: 22px;
}


/* projet **/

.swiper{
  width: 80%;
  height: 100%;
  margin: auto;
  padding: 8%;
}

.swiper-card{
  border: 2px solid var(--orange);
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.40);
  height: 70%;
  position: relative;
}

.swiper-img{
  width: 100%;
  object-fit: contain;
  height: 100%;
}

.swiper-text{
  background: var(--white);
  border: 2px solid #c4c4c4;
  border-radius: 4%;
  padding: 6%;
  height: 90px;
  margin-top: 6%;
  overflow: hidden;
}

.swiper-btn{
  width: 100%;
  color: var(--white);
  background: var(--dark-blue);
}

.swiper-title{
  width: 80%;
  margin: auto;
  color: var(--white);
  text-shadow: rgba(0, 0, 0, 0.50) 2px 2px 2px ;
  position: relative;
  top: 90%;
}

/* map **/
#map { 
  height: 500px; 
  width: 100%;
}




/* medias queries **/

/* For Desktop View */
@media screen and (min-width: 1024px) {
  
}

/* For Tablet View */
@media screen and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
  
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) 
  and (orientation: portrait) {
    
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) 
  and (orientation: landscape) {
  
}

/* For Mobile Phones Portrait or Landscape View */
@media screen
  and (max-device-width: 640px) {

    nav{
      width: 100% !important;
      z-index: 9999;
    }
    nav > .row > .col-5{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 100% !important;
    }
    nav > .row > .col{
      display: none !important;
    }

    .title-banner{
      font-size: 35px;
    }
    .text-banner{
      width: 100%;
    }

    .sommes{
      flex-direction: column;
      gap: 45px;
    }

    #service .col-4,#ask .col-6,#footer .col-10,#footer .col-2{
      width: 100%;
      margin-top: 8px !important;
      text-align: center;
    }

    .swiper{
      width: 100%;
    }
    .swiper-card{
      width: 100%;
    }

    .swiper-text{
      display: none;
    }

    #geo{
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
    }

    #map{
      width: 100% !important;
    }

    #location{
      padding: 15px;
    }

    .btn{
      --bs-btn-padding-y: 0.25rem;
      --bs-btn-padding-x: 0.5rem;
      --bs-btn-font-size: 0.875rem;
      --bs-btn-border-radius: 0.25rem;
    }


}