@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;1,600&display=swap');

:root {
    --color-primary: #174195; 
    --color-darker: #104368;
    --color-lighter: #c9e8ff;
    --color-blue-sky: #93d1ff;
    --color-white: #ffffff;
    --color-gray: #00000010;
    --color-danger: #FF4433;
}
body{
    overflow-x: hidden ;
    font-family: 'Cabin', sans-serif !important;
    background-color: #f9fafb !important;
    position: relative;
    overflow-x: hidden;
}
.bg-blue{
    background-color: var(--color-darker);
    border: none;
    color: var(--color-blue-sky);
    border-radius: 40px 10px 40px 10px;
    box-shadow:0 1px 20px rgb(0 0 0 / 10%);
    transform: scale(1);
    transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

.bg-blue:hover{
    transform: scale(1.1) !important;
}

p{
    line-height: 26px !important;
}
.nav-link{
    font-size: 1.2rem;
}
li.nl-2{
  background-color: #00bbff !important;
}
.text-primary{
    color: #174195 !important;
}

.welcome-section {
    background-color: var(--color-darker);
    /* background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('./../assets/welcome.webp'); */
    background-size: cover;
    min-height: 90vh;
    position: relative;
    z-index: 10;
    width: 100%;
    /* overflow-x: scroll; */

}

.welcome-section .icons{
    position: absolute;
    color: var(--color-blue-sky);
    z-index: 1;
}


.welcome-section .row {
    position: relative;
    min-height: 100%;
    z-index: 100;
}


.header-n1{
    font-size: 2.5rem;
    background-color: var(--color-darker);
    color: #fff;
}
.header-n2{
  background-color: var(--color-darker);
  color: #fff;
}
.formulaire-section{
    height: 100%;
}
.navbar .nav-link{
    font-weight: 500;
    margin: 0 0.2rem;
}
.formation-section img{
    position: relative;
    width: 100% ;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-bottom: .5rem;
}
.formation-section h5{
    position: relative;
}

.formation-item{
    background: #fff;
    box-shadow:0 1px 20px rgb(0 0 0 / 10%);
    transition: all .2s ease-in-out;
    transform: translateY(0px);
    overflow: hidden;
    max-width: 320px !important;

}

.formation-item h2{
    text-align: start;
}
.formation-image {
   width: 100%;
   aspect-ratio: 1,7;
}

#search {
    border: 1px solid #000000df;
}
#search input{
    border: none;
}
#search input:focus{
    outline: 0;
    border: 0;
    box-shadow: none;
}
.btn-primary{
    background-color: #9facb86b !important;
    color: rgb(63, 63, 63) !important   ;
}



.btn-secondary {
  background: #fff !important;
  backface-visibility: hidden !important;
  border-radius: .375rem !important;
  border-style: solid !important;
  border-width: .125rem !important;
  box-sizing: border-box !important;
  color: #212121 !important;
  cursor: pointer !important;
  font-size: 1.125rem !important ;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  padding: .875rem 1.125rem !important;
  position: relative;
  text-align: center !important;
  text-decoration: none !important;
  transform: translateZ(0) scale(1) !important;
  transition: transform .2s !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important; 
}

.btn-secondary:not(:disabled):hover {
  transform: scale(1.05) !important;
}

.btn-secondary:not(:disabled):hover:active {
  transform: scale(1.05) translateY(.125rem);
}

.btn-secondary:focus {
  outline: 0 solid transparent;
}

.btn-secondary:focus:before {
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.btn-secondary:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.btn-secondary:focus:not(:focus-visible):before {
  border-width: 0;
}

.btn-secondary:not(:disabled):active {
  transform: translateY(.125rem);
}
.btn-primary {
  backface-visibility: hidden !important;
  background: #00bbff !important;
  border: 0 !important;
  border-radius: .375rem !important;
  box-sizing: border-box !important;
  color: #fff !important;
  cursor: pointer;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  padding: .5rem .75rem !important;
  position: relative !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: translateZ(0) scale(1) !important;
  transition: transform .2s !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}


.btn-primary:disabled {
  color: #787878;
  cursor: auto;
}

.btn-primary:not(:disabled):hover {
  transform: scale(1.05) !important;
}

.btn-primary:not(:disabled):hover:active {
  transform: scale(1.05) translateY(.125rem);
}

.btn-primary:focus {
  outline: 0 solid transparent;
}

.btn-primary:focus:before {
  border-width: .125rem;
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.btn-primary:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.btn-primary:not(:disabled):active {
  transform: translateY(.125rem);
}


.client-choix .nav-link.active{
    background-color: #174195 !important;
    color: #fff !important;
}
.client-choix .nav-link{
    background-color: #ffffff00 !important;
    color: #fff !important;
}
.animate-logo{
    transition: all .3s ease-out !important;
}
.animate-logo:hover{
    transform: scale(1.1);
}
label{
    font-weight: 500 ;
}

.formation-filter-responsive{
    display: none;
}

@media screen and (max-width: 950px) {
    .welcome-section i{
      display: none;
    }
}