.scroll-content-top-margin {
    scroll-margin-top: 5rem; /* https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/ */
  }

:root {
    --bg-dark-color : #21325A;
    --bg-light-color : white;

    --color: #21325A;
    --gradient-color : #294076;

    --delta-color: #E16D62;
    --alpha-color: #1C99D5;
    --omega-color: #26282E;

    --grey-color: #6F6F6F;
    --grey-light-color: #E0E2E6;
    --sky-color : #F5F8FF;

    --button-bg-color : #E16D62;
    --button-secondary-bg-color : #21325A;
}

.c-grey-light{
    color : var(--grey-light-color) !important;
}

.c-omega{
    color : var(--omega-color) !important;
}

.c-delta{
    color : var(--delta-color) !important;
}

.bg-sky{
    background-color: var(--sky-color);
}

.fw-900{
    font-weight: 900!important;
}
.fs-7rm{
    font-size: 7rem;
}
.pointer{
    cursor: pointer;
}
.mh-400{
    min-height: 400px;
}
*:not(use) { /* exception pour les svg > use*/
    font-family: 'Visby CF',sans-serif;
    font-style: normal;
    color: var(--color);
}

body{
    /*background-size: 100%;*/
    background-image: url('../images/bg.png');
    background-position-x: -250px;
    /*background-attachment: fixed;*/
}

h1,.h1{
    font-size: 4.4rem;
    font-weight: 900;
    letter-spacing: 2px;

    color: var(--sky-color);

    margin-top: 1.25rem;
    margin-bottom: 2rem;
}

h2,.h2{
    font-size: 3.2rem;
    font-weight: 800;
    line-height : 5rem;
    color: var(--color);
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}

h3,.h3{
    font-size: 2.1rem;
    font-weight: 900;
    /*line-height : 3.4rem;*/
    color: var(--color);
}

h4,.h4{
    font-size: 1.3rem;
    font-weight: 800;

    color: var(--alpha-color);
}

p{
    font-family: 'Visby CF Demi';
    font-size: 1.4rem;
    font-weight: 600;
}

section {
    overflow-x: hidden;
}

input[type=text],input[type=file],textarea,select{
    color: var(--grey-color);
    background-color: var(--sky-color);
    border-radius: 5px;
    border: none;
    padding: 15px;
    text-indent: 15px;
    font-weight: bold;
}
textarea{
    text-indent: 0;
    padding-left: 30px;
    resize: none;
}

input[type=text]:focus,input[type=file]:focus,textarea:focus{
    outline-color: var(--alpha-color);
}

/* FLAT CONTROL */

input[type=text].flat,input[type=file].flat,textarea.flat,select.flat{
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #d1d4db;
}

input[type=text].flat:focus,textarea:focus,select.flat:focus{
    outline-color: transparent;
    border-bottom: 1px solid var(--delta-color);
}

select.flat{
    padding: 15px;
    text-indent: 10px;
}

/*textarea.flat::placeholder{padding-top: 23px;}*/

[type=file].flat + label {
    text-align: center;
    padding: 14px;
    /* Decorative */
    background-color: #e3e7f1!important;
    color: var(--color)!important;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

[type=file].flat + label i{
    color:  var(--color)!important;
}
/* END FLAT CONTROL */

hr.rounded {
    border-top: 4px solid var(--alpha-color);
    opacity: 1;
  }

hr.rounded.dark{
    border-color: var(--color);
}

hr.rounded.bold {
    border-width: 8px;
}

hr.rounded.xs {
    border-width: 1px;
}

.nav-tabs{
    border-bottom: 1px solid #21325a44;
    border-top: 1px solid #21325a44;
}

.nav-tabs .nav-link {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;

    border:0;
    background-color: transparent;
    color: #21325a8e;
    font-weight: bold;
    font-size: 1.125rem;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
}


/* Header / Navbar */

.bg .navbar-toggler i,
.bg .navbar-toggler svg {
    color : var(--color);
    fill:   var(--color);
}

.bg.dark .navbar-toggler i,
.bg.dark .navbar-toggler svg {
    color : var(--sky-color);
    fill:   var(--sky-color);
}

.bg{
    background-color: var(--bg-light-color);
}

.bg.dark{
    background-color: var(--bg-dark-color);
}

.bg #navbar-content ul.navbar-nav a.nav-link{
    color : var(--color);
}

.bg.dark #navbar-content ul.navbar-nav a.nav-link{
    color:#FFFFFF;
}

a.nav-link{
    /*font-family: 'Visby CF Demi';*/
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing:0.5px;
}

.navbar-brand img.img-logo,footer img.img-logo,.overlay-scale .img-logo{
    width: 280px;
}

footer{
    margin-top : 10rem;
}

footer .footer-title {
    font-family:'Visby CF';
    color: var(--color);
    font-size: 1.5rem;
    margin-bottom: 3rem;
    padding-top: 0.5rem;
}

footer ul {
    padding-left: 0;
}

footer ul li{
    list-style-type: none;
}

footer ul li:not(:last-child){
    margin-bottom: 1rem;;
}

footer ul li,footer ul li a{
    color : var(--omega-color);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Visby CF';
}

footer nav.social-links a {
    display: inline;
    font-size: 2rem;
    text-decoration: none;
}

footer .copyright{
    font-size: 0.7rem;
    font-family: 'Visby CF';
}
/* Bootstrap overriding */

.btn-primary{
    color: white;
    background-color: var(--button-bg-color);
    border-color: var(--button-bg-color);
    font-weight: bold;
}

.btn-bold{
    padding: 1rem!important;
}

.btn-primary:hover{
    color: white;
    background-color: #e95d50;
    border-color: #e95d50;
    font-weight: bold;
}

.btn-primary:active{
    color: white;
    border-color: var(--button-secondary-bg-color);
    background-color: var(--button-secondary-bg-color);
    font-weight: bold;
}

.btn-primary:focus{
    color: white;
    border-color: #e95d50;/*var(--button-secondary-bg-color);*/
    background-color: #e95d50;/*var(--button-secondary-bg-color);*/
    font-weight: bold;
}

.btn-outline-primary{
    color: var(--button-bg-color);
    border-color: var(--button-bg-color);
}

.btn-outline-primary:hover{
    color: white;
    border-color: var(--button-bg-color);
    background-color: var(--button-bg-color);
}

/*   --------- secondary boutton ----------   */

.btn-secondary{
    color: white;
    background-color: var(--button-secondary-bg-color);
    border-color: var(--button-secondary-bg-color);
}

.btn-secondary:hover{
    color: var(--button-secondary-bg-color);
    border-color: var(--button-secondary-bg-color);
    background-color: white;
}

.btn-outline-secondary{
    color: var(--button-secondary-bg-color);
    border-color: var(--button-secondary-bg-color);
}

.btn-outline-secondary:hover{
    color: white;
    border-color: var(--button-secondary-bg-color);
    background-color: var(--button-secondary-bg-color);
}

.btn-xl{
    padding: 1rem!important;
}

.bi-light{
    color : var(--color) !important;
}

/* custom scrollbar */

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background-color: var(--sky-color);
}

::-webkit-scrollbar-thumb {
    border-radius: 100px;
    border: 5px solid transparent;
    background-clip: content-box;
    /*background-color: var(--sky-color);*/
    background-color: var(--color);
}

@media (min-width: 768px) and (max-width: 993px) {
    #history-image{width: 75%!important;}
    #mission-image{width: 75%!important;}
}

/* bootstrap Media query */


@media (max-width: 768px) {
    .nav-tabs-container{
        width: 100% !important;
    }

    div.tech.sm-mrg {
        margin-right: 2rem !important;
    }

    h1,.h1{
        font-size: 3.4rem;
        line-height : 4rem!important;
    }

    h2,.h2{
        font-size: 2.2rem;
        line-height : 3rem!important;
    }

    .section-mt{
        margin-top: 3rem!important;
    }

    #hero-section .cite{
        padding-top: 6.5rem!important;
    }

    .page-pt{
        padding-top: 3rem;
    }

    .navbar-brand img.img-logo{
        width: 200px!important;
        height: 30px!important;

    }

    #hero-image{
		max-height : 500px!important;
	}

    .card-img-top{
        height: 160px!important;
    }

    .fs1-6rm{
        font-size: 1.6rem;
    }

    .tech-card{
        padding: 3.7rem 1.1rem!important;
    }

    #SAV div.card-body ul{
        padding-left: 2rem!important;
    }
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
    .px-lvl-2{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1200px) {

    .card-icon{
        width: 79px;
        height: 79px;
    }

    .px-lvl-2{
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .tech-bg-web{
        background-image: url(../images/techs/tech-bg-web.webp);
        background-position-x: right ;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
    .tech-bg-mobile{
        background-image: url(../images/techs/tech-bg-mobile.webp);
        background-position-x: right ;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

}

@media (min-width: 1400px) {
    .mx-lvl-0{
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-lvl-1 {
        margin-left: 10.8rem !important;
        margin-right: 10.8rem !important;
    }

    .mx-lvl-2{
        margin-right: 12rem!important;
        margin-left: 12rem!important;
    }

    .mx-lvl-3{
        margin-right: 14rem!important;
        margin-left: 14rem!important;
    }

    img#history-image , img#mission-image{
        max-height: 660px!important;
    }

    .px-lvl-0{
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-lvl-1{
        padding-left: 11.8rem !important;
        padding-right: 11.8rem !important;
    }

    .px-lvl-1_5{
        padding-left: 16rem !important;
        padding-right: 16rem !important;
    }

    .px-lvl-2{
        padding-left: 18rem !important;
        padding-right: 18rem !important;
    }

    .page-pt{
        padding-top: 6rem;
    }

    #partners a{
        display: inline-block;
        margin : 1.5rem 1.75rem !important;
    }

    .card-img-top{
        height: 215px!important;
    }
}
@media (min-width: 1400px) and (max-width: 1670px){
  .w-30-xxl-14x16{
    width: 30.33333333%;
  }

  #our-history .mx-lvl-2{
    margin-right: 0rem!important;
    margin-left: 0rem!important;
  }

  .pt3rem{
    padding-top: 3rem!important;
  }

  .px-lvl-2{
    padding-left: 10rem !important;
    padding-right: 10rem !important;
   }

   .px-lvl-1{
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    }

}
.nav-tabs-container{
    width: 50%;
}

.nav-item.active a{
    border-bottom: 3px solid var(--color);
}

.dark .nav-item.active a{
    border-bottom: 3px solid var(--sky-color);
}

.px2rem{
    padding-left: 2rem;
    padding-right: 2rem;
}

.py2rem{
    padding-top: 2rem;
    padding-top: 2rem;
}

.w-80{
    width: 80%!important;
}

.w-85{
    width: 85%!important;
}

.p2rem{
    padding: 2rem;
}

.py10rem{
    padding: 10rem;
}

.pt10rem{
    padding-top: 10rem;
}
.mt-n4{
    margin-top: -8.5rem!important;
}

.mt-n2{
    margin-top: -4.25rem!important;
}
/*   ----------    CUSTOM CLASSESS    ----------     */
.txt-justify{
    text-align: justify;
}
.shadow-1 {
    box-shadow: 0px 5px 15px #00000019;
}

.shadow-2 {
    box-shadow: 0px 20px 40px #00000019;
}

.subtitle{
    font-size: 1.25rem;
    font-family: 'Visby CF';
    font-style: normal;
}

.not-v-demi{
    font-family:'Visby CF';
}

.v-demi{
    font-family: 'Visby CF Demi';
}


.subtitle.sm{
    font-size: 0.9rem;
}

.subtitle.xs{
    font-size: 0.75rem;
}

.card{
    border : 0;
    border-radius: 10px;
    background-color : white;
}

.card-service:hover {
    background-color: var(--bg-dark-color);
}

.card-service:hover *:not(.btn){
    color: white;
}
.card-img-top{
    height: 200px;
    border-radius: 10px;
}

#alwaha-img{
    max-width: 64px!important;
}

.tech-card{/* RESP*/
    background-color: #FFFFFF;
    border-radius: 1.5rem;
    padding: 3.7rem 2.5rem;
    padding-bottom: 1.7rem;
}
.tech-card:hover {
    background-color: var(--bg-dark-color);
    border-color: var(--bg-dark-color);
}
.tech-card:hover *:not(a){
    color: #ffffff;
}
.tech-card:hover .nav-link{
    color: rgba(128, 128, 128, 0.548)!important;
}
.tech-card:hover .nav-link.active{
    color: #FFFFFF!important;
}
.tech-card:hover .nav-tabs{
    border-color: rgba(128, 128, 128, 0.548)!important;;
}
.tech-card h3{ /* RESP*/
    margin-bottom: 2rem;
}
.tech-card div.tab-content{ /* RESP*/
    padding-top: 4.5rem;
}




.card-text{
    color: var(--omega-color);
    font-size: 1.3rem;
    font-family: 'Visby CF Demi';
    font-weight: 600;
    font-style: normal;
    line-height: 1.9rem;
}

.card-text.sm{
    font-size: 1.2rem;
}

#card-section .card-title{
    font-size: 1.9rem;
}

.card-title.sm{
    /*color: var(--omega-color);*/
    font-size: 1.125rem;
    font-weight: 800;
    font-style: normal;
}

.card-title.md{
    /*color: var(--omega-color);*/
    font-size: 1.5rem;
    font-weight: 800;
    font-style: normal;
}


.card-body > a{
    color:var(--omega-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.card-body > a:hover{
    text-decoration: underline;
}

.card-icon{
    width: 60px;
    height: 60px;
}

/* Home page */

.section-mt{
    margin-top: 8rem;
}

.section-title{
    line-height: 4.4rem;
}

#hero-section{
    background-color: var(--bg-dark-color);
}

#hero-section *:not(button,img) {
    color: var(--sky-color);
}

#hero-section .cite{
    padding-top: 10.5rem;;
    /*text-transform: capitalize;*/
    line-height: 5.4rem;
}

#services-section .card{
    margin-bottom: 1rem;
}

/* PAGE SERVICES */

svg.tech-logo{
    width: 2.5rem;
    height: 2.5rem;
    color:#21325A;
}

svg.tech-logo._3d {
     color: white!important;
     width: 4rem;
     height: 4rem;
}
div.tech {
    text-align: left;
    display: inline-block;
    margin-bottom: 2rem;
}

div.tech p{
    font-size: 0.9rem;
    font-family: 'Visby CF';
    font-weight: 800;
    margin-top: 0.8rem;
}


.double-quote{
    width: 1.8rem;
    height: 1.25rem;
}

.citation{
    line-height: 2rem;
}
.citation p{
    font-style: italic;
    font-size: 1.56rem;
    font-family: 'Visby CF';
    font-weight:600;
    letter-spacing: 0.05rem;
}

.card-body._3d{
    border-radius: 1.25rem;
    background: transparent linear-gradient(65deg, #E16D62 0%, #294076 100%) 0% 0% no-repeat padding-box;
}
.card-body svg._3d{
    margin-right: 2rem;
}
.card-body._3d * {
    color: white !important;
}
.card-body._3d ul , #SAV div.card-body ul{
    font-size: 1.1rem;
    font-weight: bold;
    list-style-type:circle;
    line-height: 2.5rem;
    padding-left: 1rem;
}
.card-img{
    max-height: 206px;
    max-width: 381px;
}

hr.micro{
    width: 50px;
}

#partners a{
    display: inline-block;
    margin : 1rem;
}
#partners img{
    width:auto !important;
    height: 48px !important;
    max-width: 180px !important;
}

#partners img.square{
    width:48px !important;
    height: 48px !important;
}

label.err{
    color: red;
    font-size: 12px;
}


/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--bg-dark-color);
    opacity: 0.96;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(../images/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	/*height: 20%;
	height: calc(100% / 5);*/
	min-height: 54px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    margin-bottom: 1rem;
}

.overlay ul li a {
	font-size: 35px;
	font-weight: bold;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #f0f0f0;
}

/* Effects */
.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
	visibility: visible;
	opacity: 0.96;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}

.overlay a {
	text-decoration: none;
	outline: none;
}

.overlay ul li a.active {
    color: var(--delta-color);
}

#services-section .carousel-indicators{
    position: relative;
}

#services-section .carousel-indicators button{
    background-color: var(--color);
    width: 13px;
    height: 10px;
}

.fsize-1{
    font-size: 1rem !important;
}