/*--------------------------------------------------------------
# Commun
--------------------------------------------------------------*/

:root {
    --bg: #5981ee;
    --bgdark: #364B85;
    --txt: #000;
    --txtlight: #91a8e7;
    --actiontel: #af0413;
    --actionmail: #04991c;
}

html {

    font-family: sans-serif;

    line-height: 1.15;

    -webkit-text-size-adjust: 100%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



article,

aside,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section {

    display: block;

}



body {

    font-family: "Open Sans", sans-serif;

    color: var(--txt);

}



a {

    color: var(--txt);

}



a:hover {

    color: var(--txtlight);

    text-decoration: none;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin-top: 0;

    margin-bottom: 0.5rem;

    line-height: 1.2;

}



p {

    margin-top: 0;

    margin-bottom: 1rem;

}



.img-fluid {

    max-width: 100%;

    height: auto;

}

.img-fluid-portefeuille {

    width: 100%;



}



@media (min-width: 992px) {

    .img-fluid-portefeuille {

        width: 320px;

        height: 180px;

        max-width: 80%;

       

    }

    

}

.img-fluid-services {

    width: 420px;

    height: 236px;

    max-width: 100%;

    /*

    width: 320px; 

    height: 180px;

    */



}





/*

h1,

h2,

h3,

h4,

h5,

h6,

h7



{

    font-family: "Raleway", sans-serif;

}

*/





/*--------------------------------------------------------------

# Preloader

--------------------------------------------------------------*/



#preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9999;

    overflow: hidden;

    background: #fff;

}



#preloader:before {

    content: "";

    position: fixed;

    top: calc(50% - 30px);

    left: calc(50% - 30px);

    border: 6px solid var(--bgdark);

    border-top-color: white;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    -webkit-animation: animate-preloader 1s linear infinite;

    animation: animate-preloader 1s linear infinite;

}



@-webkit-keyframes animate-preloader {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



@keyframes animate-preloader {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}





/*--------------------------------------------------------------

# Back to top button

--------------------------------------------------------------*/



.back-to-top {

    position: fixed;

    display: none;

    right: 15px;

    bottom: 15px;

    z-index: 99999;

}



.back-to-top i {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    width: 40px;

    height: 40px;

    border-radius: 4px;

    background: var(--bgdark);

    color: #fff;

    transition: all 0.4s;

}



.back-to-top i:hover {

    background: #f06f54;

    color: #fff;

}





/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/



#header {

    background: #fff;

    transition: all 0.5s;

    z-index: 997;

    padding: 20px 0;

}



#header.header-scrolled {

    padding: 12px 0;

    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

}



#header .logo {

    font-size: 2rem;

    margin: 0;

    padding: 0;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



#header .logo a {

    color: var(--txt);

}



#header .logo img {

    max-height: 5rem;

}



@media (max-width: 992px) {

    #header .logo {

        font-size: 2rem;

    }

}



    



/*--------------------------------------------------------------

# Navigation Menu

--------------------------------------------------------------*/





/* Desktop Navigation */



.nav-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



.nav-menu>ul {

    display: flex;

}



.nav-menu>ul>li {

    position: relative;

    white-space: nowrap;

    padding: 10px 0 10px 28px;

}



.nav-menu a {

    display: block;

    position: relative;

    color: var(--txt);

    transition: 0.3s;

    font-size: 1.1rem;

    font-family: "Open Sans", sans-serif;

}



.nav-menu a:hover,

.nav-menu .active>a,

.nav-menu li:hover>a {

    color: var(--txtlight);

}



.nav-menu .drop-down ul {

    display: block;

    position: absolute;

    left: 15px;

    top: calc(100% + 30px);

    z-index: 99;

    opacity: 0;

    visibility: hidden;

    padding: 10px 0;

    background: #fff;

    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

    transition: 0.3s;

}



.nav-menu .drop-down:hover>ul {

    opacity: 1;

    top: 100%;

    visibility: visible;

}



.nav-menu .drop-down li {

    min-width: 180px;

    position: relative;

}



.nav-menu .drop-down ul a {

    padding: 10px 20px;

    font-size: 1.1rem;

    font-weight: 400;

    text-transform: none;

    color: var(--txt);

}



.nav-menu .drop-down ul a:hover,

.nav-menu .drop-down ul .active>a,

.nav-menu .drop-down ul li:hover>a {

    color: var(--txtlight);

}



.nav-menu .drop-down>a:after {

    content: "\ea99";

    font-family: IcoFont;

    padding-left: 5px;

}



.nav-menu .drop-down .drop-down ul {

    top: 0;

    left: calc(100% - 30px);

}



.nav-menu .drop-down .drop-down:hover>ul {

    opacity: 1;

    top: 0;

    left: 100%;

}



.nav-menu .drop-down .drop-down>a {

    padding-right: 35px;

}



.nav-menu .drop-down .drop-down>a:after {

    content: "\eaa0";

    font-family: IcoFont;

    position: absolute;

    right: 15px;

}



@media (max-width: 1366px) {

    .nav-menu .drop-down .drop-down ul {

        left: -90%;

    }

    .nav-menu .drop-down .drop-down:hover>ul {

        left: -100%;

    }

    .nav-menu .drop-down .drop-down>a:after {

        content: "\ea9d";

    }

}





/* Get Startet Button */



.get-started-btn {

    margin-left: 25px;

    background: var(--bgdark);

    color: #fff;

    border-radius: 4px;

    padding: 8px 25px 9px 25px;

    white-space: nowrap;

    transition: 0.3s;

    font-size: 14px;

    display: inline-block;

}



.get-started-btn:hover {

    background: var(--bg);

    color: #fff;

}



@media (max-width: 768px) {

    .get-started-btn {

        margin: 0 48px 0 0;

        padding: 6px 20px 7px 20px;

    }

}





/* Mobile Navigation */



.mobile-nav-toggle {

    position: fixed;

    top: 23px;

    right: 15px;

    z-index: 9998;

    border: 0;

    background: none;

    font-size: 24px;

    transition: all 0.4s;

    outline: none !important;

    line-height: 1;

    cursor: pointer;

    text-align: right;

}



.mobile-nav-toggle i {

    color: var(--txt);

}



.mobile-nav {

    position: fixed;

    top: 55px;

    right: 15px;

    bottom: 15px;

    left: 15px;

    z-index: 9999;

    overflow-y: auto;

    background: #fff;

    transition: ease-in-out 0.2s;

    opacity: 0;

    visibility: hidden;

    border-radius: 10px;

    padding: 10px 0;

}



.mobile-nav * {

    margin: 0;

    padding: 0;

    list-style: none;

}



.mobile-nav a {

    display: block;

    position: relative;

    color: var(--txt);

    padding: 10px 20px;

    font-weight: 500;

    outline: none;

}



.mobile-nav a:hover,

.mobile-nav .active>a,

.mobile-nav li:hover>a {

    color: var(--txtlight);

    text-decoration: none;

}



.mobile-nav .drop-down>a:after {

    content: "\ea99";

    font-family: IcoFont;

    padding-left: 10px;

    position: absolute;

    right: 15px;

}



.mobile-nav .active.drop-down>a:after {

    content: "\eaa1";

}



.mobile-nav .drop-down>a {

    padding-right: 35px;

}



.mobile-nav .drop-down ul {

    display: none;

    overflow: hidden;

}



.mobile-nav .drop-down li {

    padding-left: 20px;

}



.mobile-nav-overly {

    width: 100%;

    height: 100%;

    z-index: 9997;

    top: 0;

    left: 0;

    position: fixed;

    background: rgba(4, 12, 21, 0.6);

    overflow: hidden;

    display: none;

    transition: ease-in-out 0.2s;

}



.mobile-nav-active {

    overflow: hidden;

}



.mobile-nav-active .mobile-nav {

    opacity: 1;

    visibility: visible;

}



.mobile-nav-active .mobile-nav-toggle i {

    color: #fff;

}





/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/



#hero {

    width: 100%;

    height: 100vh;

    background-color: rgba(4, 12, 21, 0.8);

    overflow: hidden;

    position: relative;

}



#hero .carousel,

#hero .carousel-inner,

#hero .carousel-item,

#hero .carousel-item::before {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

}



#hero .carousel-item {

    background-size: cover;

    background-position: top center;

    background-repeat: no-repeat;

}



#hero .carousel-item::before {

    content: '';

    background-color: rgba(4, 12, 21, 0.5);

}



#hero .carousel-container {

    display: flex;

    align-items: center;

    position: absolute;

    bottom: 0;

    top: 82px;

    left: 50px;

    right: 50px;

}



#hero h1 {

    color: #fff;

    margin: 0;

    font-size: 36px;

    font-weight: 700;

}



#hero h2 {

    color: #fff;

    margin: 0;

    font-size: 36px;

    font-weight: 700;

}



#hero p {

    -webkit-animation-delay: 0.4s;

    animation-delay: 0.4s;

    color: #fff;

    margin-top: 10px;

}



@media (min-width: 1200px) {

    #hero p {

        width: 50%;

    }

}



#hero .carousel-inner .carousel-item {

    transition-property: opacity;

    background-position: center top;

}



#hero .carousel-inner .carousel-item,

#hero .carousel-inner .active.carousel-item-left,

#hero .carousel-inner .active.carousel-item-right {

    opacity: 0;

}



#hero .carousel-inner .active,

#hero .carousel-inner .carousel-item-next.carousel-item-left,

#hero .carousel-inner .carousel-item-prev.carousel-item-right {

    opacity: 1;

    transition: 0.5s;

}



#hero .carousel-inner .carousel-item-next,

#hero .carousel-inner .carousel-item-prev,

#hero .carousel-inner .active.carousel-item-left,

#hero .carousel-inner .active.carousel-item-right {

    left: 0;

    transform: translate3d(0, 0, 0);

}



#hero .carousel-control-prev,

#hero .carousel-control-next {

    width: 10%;

    top: 112px;

}



@media (max-width: 992px) {

    #hero .carousel-control-prev,

    #hero .carousel-control-next {

        top: 66px;

    }

}



#hero .carousel-control-next-icon,

#hero .carousel-control-prev-icon {

    background: none;

    font-size: 36px;

    line-height: 1;

    width: auto;

    height: auto;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50px;

    padding: 10px;

    transition: 0.3s;

    color: rgba(255, 255, 255, 0.5);

}



#hero .carousel-control-next-icon:hover,

#hero .carousel-control-prev-icon:hover {

    background: rgba(255, 255, 255, 0.3);

    color: rgba(255, 255, 255, 0.8);

}



#hero .carousel-indicators li {

    cursor: pointer;

    background: #fff;

    overflow: hidden;

    border: 0;

    width: 12px;

    height: 12px;

    border-radius: 50px;

    opacity: .6;

    transition: 0.3s;

}



#hero .carousel-indicators li.active {

    opacity: 1;

    background: var(--bgdark);

}



#hero .btn-get-started {

    font-family: "Raleway", sans-serif;

    font-weight: 500;

    font-size: 14px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 14px 32px;

    border-radius: 4px;

    transition: 0.5s;

    line-height: 1;

    color: #fff;

    -webkit-animation-delay: 0.8s;

    animation-delay: 0.8s;

    background: var(--bgdark);

    margin-top: 15px;

}



#hero .btn-get-started:hover {

    background: var(--bg);

}



@media (max-width: 992px) {

    #hero {

        height: 100vh;

    }

    #hero .carousel-container {

        text-align: center;

        top: 74px;

    }

}



@media (max-width: 768px) {

    #hero h2 {

        font-size: 30px;

    }

}



@media (min-width: 1024px) {

    #hero .carousel-control-prev,

    #hero .carousel-control-next {

        width: 5%;

    }

}



@media (max-height: 500px) {

    #hero {

        height: 120vh;

    }

}





/*--------------------------------------------------------------

# Sections General

--------------------------------------------------------------*/



section {

    padding: 1rem 0;

}



.section-bg {

    background-color: #f6f9fd;

}



.section-title {

    padding-bottom: 1rem;

}



.section-title h1 {

    margin: 0 0 5px 0;

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;

    font-family: "Poppins", sans-serif;

    color: var(--txt);

}



.section-title h2 {

    margin: 0 0 20px 0;

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;

    font-family: "Poppins", sans-serif;

    color: var(--txt);

}



.section-title h2::before {

    content: "";

    width: 100%;

    height: 1px;

    display: inline-block;

    background: var(--txtlight);

    margin: 10px 0px;

}



.section-title h3 {

    font-size: 16px;

    font-weight: 500;

    margin-top: 20px;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--txtlight);

    font-family: "Poppins", sans-serif;

}



.section-title h3::after {

    content: "";

    width: 100%;

    height: 1px;

    display: inline-block;

    background: var(--txtlight);

    margin: 15px 00px;

}



.section-title p {

    font-size: 16px;

    font-weight: 500;

    margin-top: 20px;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--txt);

    font-family: "Poppins", sans-serif;

}



.section-title ul {

color: var(--txtlight);

}

.section-title li {

    color: var(--txtlight);

    }   



.section-title p::after {

    content: "";

    width: 100%;

    height: 1px;

    display: inline-block;

    background: var(--txtlight);

    margin: 15px 00px;

}



.section-center {

    position: absolute;

    margin: auto;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}





/*--------------------------------------------------------------

# moncss

--------------------------------------------------------------*/



.moncss .icon-box {

    text-align: center;

    background: #fefefe;

    box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);

    padding: 80px 20px;

    transition: all ease-in-out 0.3s;

    cursor: pointer;

    width: 100%;

    max-width: 100%;

}



.divlink {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    text-decoration: none;

    /* Makes sure the link doesn't get underlined */

    z-index: 1;

    /* raises anchor tag above everything else in div */

    background-color: white;

    /*workaround to make clickable in IE */

    opacity: 0;

    /*workaround to make clickable in IE */

    filter: alpha(opacity=0);

    /*workaround to make clickable in IE */

}



.moncss .icon-box .icon {

    margin: 0 auto;

    width: 64px;

    height: 64px;

    background: var(--bg);

    border-radius: 5px;

    transition: all .3s ease-out 0s;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    transform-style: preserve-3d;

    position: relative;

    z-index: 2;

}



.moncss .icon-box .icon i {

    color: #fff;

    font-size: 28px;

}



.moncss .icon-box .icon::before {

    position: absolute;

    content: '';

    left: -8px;

    top: -8px;

    height: 100%;

    width: 100%;

    background: #f9c6bb;

    border-radius: 5px;

    transition: all .3s ease-out 0s;

    transform: translateZ(-1px);

    z-index: 1;

}



.moncss .icon-box h4 {

    font-weight: 700;

    margin-bottom: 15px;

    font-size: 24px;

    color: var(--txt);

}



.moncss .icon-box h4 a {

    color: var(--txt);

}



.moncss .icon-box p {

    line-height: 24px;

    font-size: 14px;

    margin-bottom: 0;

    color: var(--txtlight);

}



.moncss .icon-box:hover {

    background: var(--bg);

    border-color: var(--bg);

}



.moncss .icon-box:hover .icon {

    background: #fff;

}



.moncss .icon-box:hover .icon i {

    color: var(--txt);

}



.moncss .icon-box:hover .icon::before {

    background: var(--bg);

}



.moncss .icon-box:hover h4,

.moncss .icon-box:hover h4 a,

.moncss .icon-box:hover p {

    color: var(--txt);

}



.moncss .ligne {

    padding-top: 40px;

    align-items: center;

    vertical-align: middle;

}



.moncss .ligne .cadre {

    border-top-color: #669ee5;

}



.moncss .box {

    padding: 10px 10px;

    margin-bottom: 10px;

    height: 200px;

    align-items: center;

    justify-content: center;

    vertical-align: middle;

    text-align: center;

    /*

    background: linear-gradient(180deg,var(--bg), #fff);

    */

    /*

    box-shadow: 0px 5px 90px 0px var(--bg);

    */

}



.moncss .video-box {

    margin: auto;

    width: 400px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    min-height: 200px;

    padding: 20px 0px 100px 0px;

}



.moncss .circ {

    width: 80px;

    height: 80px;

    border-radius: 50px;

    color: #fff;

    text-align: center;

    vertical-align: middle;

    background: var(--txt);

}



.moncss h7 {

    font-size: 80px;

    font-weight: 1000;

    font-family: "Open Sans", sans-serif;

    text-align: center;

    color: var(--txt);

    text-shadow: 3px 3px 3rem var(--bgdark);

}



.moncss .circlebefore {

    position: absolute;

    content: '1';

    width: 80px;

    height: 80px;

    border-radius: 50px;

    color: #fff;

    text-align: center;

    vertical-align: middle;

    background: var(--bgdark);

}



.moncss .box h5 {

    font-weight: 700;

    font-size: 30px;

    font-family: "Open Sans", sans-serif;

    margin-bottom: 25px;

    color: var(--txt);

}



.moncss .box p {

    font-weight: 300;

    margin-bottom: 15px;

    font-size: 18px;

    font-family: "Open Sans", sans-serif;

}



.moncss .box h6 {

    font-size: 46px;

    color: var(--txt);

    font-weight: 400;

    font-family: "Open Sans", sans-serif;

    margin-bottom: 25px;

}



.moncss .box h6 span {

    color: #bababa;

    font-size: 18px;

    display: block;

}



.moncss .box ul {

    padding: 0;

    list-style: none;

    color: #999;

    text-align: left;

    line-height: 20px;

}



.moncss .box ul li {

    padding-bottom: 12px;

}



.moncss .box ul i {

    color: var(--txt);

    font-size: 18px;

    padding-right: 4px;

}



.moncss .box ul .na {

    color: #ccc;

}



.moncss .box ul .na i {

    color: #ccc;

}



.moncss .box ul .na span {

    text-decoration: line-through;

}



.moncss .box .get-started-btn:hover {

    background: var(--bg);

    color: #fff;

}



.moncss .box .featured {

    z-index: 10;

    padding: 100px 40px;

    border: 4px solid var(--bg);

}



.moncss .box .featured .get-started-btn {

    background: var(--bgdark);

    color: #fff;

    border-color: var(--txt);

}



.moncss .box .featured .get-started-btn:hover {

    background: var(--bg);

}



.moncss .btn-get-started {

    font-family: "Raleway", sans-serif;

    font-weight: 400;

    font-size: 18px;

    width: 200px;

    height: 80px;

    padding: 30px 32px;

    letter-spacing: 1px;

    display: inline-block;

    border-radius: 4px;

    transition: 0.5s;

    line-height: 1;

    color: #fff;

    -webkit-animation-delay: 0.8s;

    animation-delay: 0.8s;

    background: var(--bgdark);

    text-align: center;

    vertical-align: middle;

}



.moncss .btn-get-started:hover {

    background: var(--bg);

}



@media (max-width: 992px) {

    .moncss .box {

        max-width: 60%;

        margin: 0 auto 30px auto;

    }

}



@media (max-width: 767px) {

    .moncss .box {

        max-width: 80%;

        margin: 0 auto 30px auto;

    }

}



@media (max-width: 420px) {

    .moncss .box {

        max-width: 100%;

        margin: 0 auto 30px auto;

    }

}



.moncss .video-box {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    min-height: 400px;

    position: relative;

    padding: 20px 0px 100px 0px;

}



.moncss .play-btn {

    width: 94px;

    height: 94px;

    background: radial-gradient(var(--bgdark) 50%, rgba(237, 80, 46, 0.4) 52%);

    border-radius: 50%;

    display: block;

    position: absolute;

    text-align: center;

    left: calc(50% - 47px);

    top: calc(50% - 47px);

    overflow: hidden;

}



.moncss .play-btn::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-40%) translateY(-50%);

    width: 0px;

    height: 0px;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    border-left: 15px solid #fff;

    z-index: 100;

    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}



.moncss .play-btn::before {

    content: '';

    position: absolute;

    left: calc(50% - 55px);

    top: calc(50% - 55px);

    width: 120px;

    height: 120px;

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

    -webkit-animation: pulsate-btn 2s;

    animation: pulsate-btn 2s;

    -webkit-animation-direction: forwards;

    animation-direction: forwards;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    -webkit-animation-timing-function: steps;

    animation-timing-function: steps;

    opacity: 1;

    border-radius: 50%;

    border: 5px solid rgba(237, 80, 46, 0.7);

    background: rgba(198, 16, 0, 0);

}



.moncss .play-btn:hover::after {

    border-left: 15px solid var(--bgdark);

    transform: scale(5);

}



.moncss .play-btn:hover::before {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-40%) translateY(-50%);

    width: 0;

    height: 0;

    border: none;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    border-left: 15px solid #fff;

    z-index: 200;

    -webkit-animation: none;

    animation: none;

    border-radius: 0;

}



.moncss .accordeon {

    padding: 60px 100px 0 100px;

}



.moncss .accordeon h3 {

    font-weight: 400;

    font-size: 34px;

    color: #123a6d;

}



.moncss .accordeon h4 {

    font-size: 20px;

    font-weight: 700;

    margin-top: 5px;

}



.moncss .accordeon p {

    font-size: 15px;

    color: #848484;

}



.moncss .accordeon-list {

    padding: 0 100px 60px 100px;

}



.moncss .accordeon-list ul {

    padding: 0;

    list-style: none;

}



.moncss .accordeon-list li+li {

    margin-top: 15px;

}



.moncss .accordeon-list li {

    padding: 20px;

    background: #fff;

    border-radius: 4px;

}



.moncss .accordeon-list a {

    display: block;

    position: relative;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 24px;

    font-weight: 500;

    padding-right: 30px;

    outline: none;

    color: var(--txt);

}



.moncss .accordeon-list span {

    color: var(--txt);

    font-weight: 600;

    font-size: 18px;

    padding-right: 10px;

}



.moncss .accordeon-list i {

    font-size: 24px;

    position: absolute;

    right: 0;

    top: 0;

}



.moncss .accordeon-list p {

    margin-bottom: 0;

    padding: 10px 0 0 0;

}



.moncss .accordeon-list .icon-show {

    display: none;

}



.moncss .accordeon-list a.collapsed {

    color: var(--txt);

}



.moncss .accordeon-list a.collapsed:hover {

    color: var(--txtlight);

}



.moncss .accordeon-list a.collapsed .icon-show {

    display: inline-block;

}



.moncss .accordeon-list a.collapsed .icon-close {

    display: none;

    left: calc(50% - 47px);

    top: calc(50% - 47px);

}





/*

@-webkit-keyframes pulsate-btn {

    0% {

        transform: scale(0.6, 0.6);

        opacity: 1;

    }

    100% {

        transform: scale(1, 1);

        opacity: 0;

    }

}

*/





/*--------------------------------------------------------------

# societe

--------------------------------------------------------------*/



.societe .content h3 {

    font-weight: 600;

    font-size: 26px;

}



.societe .content ul {

    list-style: none;

    padding: 0;

}



.societe .content ul li {

    padding-left: 28px;

    position: relative;

}



.societe .content ul li+li {

    margin-top: 10px;

}



.societe .content ul i {

    position: absolute;

    left: 0;

    top: 2px;

    font-size: 20px;

    color: var(--txt);

    line-height: 1;

}



.societe .content p:last-child {

    margin-bottom: 0;

}



.societe .content .btn-learn-more {

    font-family: "Raleway", sans-serif;

    font-weight: 600;

    font-size: 14px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 12px 32px;

    border-radius: 5px;

    transition: 0.3s;

    line-height: 1;

    color: var(--txt);

    -webkit-animation-delay: 0.8s;

    animation-delay: 0.8s;

    margin-top: 6px;

    border: 2px solid var(--bgdark);

}



.societe .content .btn-learn-more:hover {

    background: var(--bg);

    color: #fff;

    text-decoration: none;

}





/*--------------------------------------------------------------

# Counts

--------------------------------------------------------------*/



.counts {

    padding-top: 0;

}



.counts .count-box {

    box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);

    padding: 30px;

    width: 100%;

}



.counts .count-box i {

    display: block;

    font-size: 30px;

    color: var(--txt);

    float: left;

}



.counts .count-box span {

    font-size: 2rem;

    line-height: 1rem;

    display: block;

    font-weight: 600;

    color: var(--txt);

    margin-left: 1rem;

}



.counts .count-box p {

    padding: 30px 0 0 0;

    margin: 0;

    font-family: "Raleway", sans-serif;

    font-size: 14px;

    color: var(--txt);

}



.counts .count-box a {

    font-weight: 600;

    display: block;

    margin-top: 20px;

    color: var(--txt);

    font-size: 15px;

    font-family: "Poppins", sans-serif;

    transition: ease-in-out 0.3s;

}



.counts .count-box a:hover {

    color: var(--txtlight);

}





/*--------------------------------------------------------------

# Why Us

--------------------------------------------------------------*/



.services-video {

    padding: 0px;

}



.services-video .content {

    padding: 60px 100px 0 100px;

}



.services-video .content h3 {

    font-weight: 400;

    font-size: 34px;

    color: var(--txt);

}



.services-video .content h4 {

    font-size: 20px;

    font-weight: 700;

    margin-top: 5px;

}



.services-video .content p {

    font-size: 20px;

    color: #848484;

}



.services-video .accordion-list {

    padding: 0px 0px 0px 0px;

}



.services-video .accordion-list ul {

    padding: 0;

    list-style: none;

}



.services-video .accordion-list li+li {

    margin-top: 15px;

}



.services-video .accordion-list li {

    padding: 20px;

    background: #fff;

    border-radius: 4px;

}



.services-video .accordion-list a {

    display: block;

    position: relative;

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    line-height: 24px;

    font-weight: 500;

    padding-right: 30px;

    outline: none;

    color: var(--txt);

}



.services-video .accordion-list span {

    color: var(--txt);

    font-weight: 800;

    font-size: 22px;

    padding-right: 10px;

}



.services-video .accordion-list i {

    font-size: 24px;

    position: absolute;

    right: 0;

    top: 0;

}



.services-video .accordion-list p {

    margin-bottom: 0;

    padding: 10px 0 0 0;

    color: var(--txtlight);

}



.services-video .accordion-list .icon-show {

    display: none;

}



.services-video .accordion-list a.collapsed {

    color: var(--txt);

}



.services-video .accordion-list a.collapsed:hover {

    color: var(--txtlight);

}



.services-video .accordion-list a.collapsed .icon-show {

    display: inline-block;

}



.services-video .accordion-list a.collapsed .icon-close {

    display: none;

    left: calc(50% - 47px);

    top: calc(50% - 47px);

}



.services-video .video-box {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    min-height: 400px;

    position: relative;

}



.services-video .play-btn {

    width: 94px;

    height: 94px;

    background: radial-gradient(var(--bgdark) 50%, rgba(237, 80, 46, 0.4) 52%);

    border-radius: 50%;

    display: block;

    position: absolute;

    left: calc(50% - 47px);

    top: calc(50% - 47px);

    overflow: hidden;

}



.services-video .play-btn::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-40%) translateY(-50%);

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    border-left: 15px solid #fff;

    z-index: 100;

    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}



.services-video .play-btn::before {

    content: '';

    position: absolute;

    width: 120px;

    height: 120px;

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

    -webkit-animation: pulsate-btn 2s;

    animation: pulsate-btn 2s;

    -webkit-animation-direction: forwards;

    animation-direction: forwards;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    -webkit-animation-timing-function: steps;

    animation-timing-function: steps;

    opacity: 1;

    border-radius: 50%;

    border: 5px solid rgba(237, 80, 46, 0.7);

    top: -15%;

    left: -15%;

    background: rgba(198, 16, 0, 0);

}



.services-video .play-btn:hover::after {

    border-left: 15px solid var(--bgdark);

    transform: scale(20);

}



.services-video .play-btn:hover::before {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-40%) translateY(-50%);

    width: 0;

    height: 0;

    border: none;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    border-left: 15px solid #fff;

    z-index: 200;

    -webkit-animation: none;

    animation: none;

    border-radius: 0;

}



@media (max-width: 1024px) {

    .services-video .content,

    .services-video .accordion-list {

        padding-left: 0;

        padding-right: 0;

    }

}



@media (max-width: 992px) {

    .services-video .content {

        padding-top: 30px;

    }

    .services-video .accordion-list {

        padding-bottom: 30px;

    }

}





/*

@-webkit-keyframes pulsate-btn {

    0% {

        transform: scale(0.6, 0.6);

        opacity: 1;

    }

    100% {

        transform: scale(1, 1);

        opacity: 0;

    }

}

*/





/*--------------------------------------------------------------

# Services

--------------------------------------------------------------*/



.services .icon-box {

    text-align: center;

    background: #fefefe;

    box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);

    padding: 20px 20px;

    transition: all ease-in-out 0.3s;

}



.services .icon-box .icon {

    margin: 0 auto;

    width: 64px;

    height: 64px;

    background: var(--bgdark);

    border-radius: 5px;

    transition: all .3s ease-out 0s;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    transform-style: preserve-3d;

    position: relative;

    z-index: 2;

}



.services .icon-box .icon i {

    color: #fff;

    font-size: 28px;

}



.services .icon-box .icon::before {

    position: absolute;

    content: '';

    left: -8px;

    top: -8px;

    height: 100%;

    width: 100%;

    background: #f9c6bb;

    border-radius: 5px;

    transition: all .3s ease-out 0s;

    transform: translateZ(-1px);

    z-index: 1;

}



.services .icon-box h4 {

    font-weight: 700;

    margin-bottom: 15px;

    font-size: 24px;

}



.services .icon-box h4 a {

    color: var(--txt);

}



.services .icon-box p {

    line-height: 24px;

    font-size: 14px;

    margin-bottom: 0;

}



.services .icon-box:hover {

    background: var(--bgdark);

    border-color: var(--txt);

}



.services .icon-box:hover .icon {

    background: #fff;

}



.services .icon-box:hover .icon i {

    color: var(--txt);

}



.services .icon-box:hover .icon::before {

    background: var(--bg);

}



.services .icon-boxh4 a p :hover {

    color: #fff;

}





/*--------------------------------------------------------------

# Testimonials

--------------------------------------------------------------*/



.testimonials .testimonial-wrap {

    padding-left: 50px;

}



.testimonials .testimonial-item {

    box-sizing: content-box;

    padding: 30px 30px 30px 60px;

    margin: 30px 15px;

    min-height: 200px;

    box-shadow: 0px 0px 20px 0px rgba(11, 35, 65, 0.1);

    position: relative;

    background: #fff;

}



.testimonials .testimonial-item .testimonial-img {

    width: 90px;

    border-radius: 10px;

    border: 6px solid #fff;

    position: absolute;

    left: -45px;

}



.testimonials .testimonial-item h3 {

    font-size: 18px;

    font-weight: bold;

    margin: 10px 0 5px 0;

    color: var(--txt);

}



.testimonials .testimonial-item h4 {

    font-size: 14px;

    color: var(--txtlight);

    margin: 0;

}



.testimonials .testimonial-item .quote-icon-left,

.testimonials .testimonial-item .quote-icon-right {

    color: var(--txtlight);

    font-size: 26px;

}



.testimonials .testimonial-item .quote-icon-left {

    display: inline-block;

    left: -5px;

    position: relative;

}



.testimonials .testimonial-item .quote-icon-right {

    display: inline-block;

    right: -5px;

    position: relative;

    top: 10px;

}



.testimonials .testimonial-item p {

    font-style: italic;

    margin: 15px auto 15px auto;

}



.testimonials .owl-nav,

.testimonials .owl-dots {

    margin-top: 5px;

    text-align: center;

}



.testimonials .owl-dot {

    display: inline-block;

    margin: 0 5px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ddd !important;

}



.testimonials .owl-dot.active {

    background-color: var(--bgdark) !important;

}



@media (max-width: 767px) {

    .testimonials .testimonial-wrap {

        padding-left: 0;

    }

    .testimonials .testimonial-item {

        padding: 30px;

        margin: 15px;

    }

    .testimonials .testimonial-item .testimonial-img {

        position: static;

        left: auto;

    }

}





/*--------------------------------------------------------------

# action

--------------------------------------------------------------*/



.action {

    padding: 20px 0;

    background: var(--bgdark);

    text-align: center;

}



.action h3 {

    color: #fff;

    font-size: 28px;

    font-weight: 700;

}



.action h4 {

    color: rgb(235, 231, 14);

    font-size: 36px;

    font-weight: 900;

}



.action p {

    color: #fff;

}



.action .actionmail-btn {

    font-family: "Raleway", sans-serif;

    font-weight: 600;

    font-size: 25px;

    width: 300px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 10px 35px;

    border-radius: 4px;

    transition: 0.5s;

    margin-top: 10px;

    background: var(--actionmail);

    color: #fff;

}



.action .actionmail-btn:hover {

    background: var(--bg);

    color: #fff;

}



.action .actiontel-btn {

    font-family: "Raleway", sans-serif;

    font-weight: 600;

    font-size: 25px;

    width: 300px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 10px 35px;

    border-radius: 4px;

    transition: 0.5s;

    margin-top: 10px;

    background: var(--actiontel);

    color: #fff;

}



.action .actiontel-btn:hover {

    background: var(--bg);

    color: #fff;

}





/*--------------------------------------------------------------

# servicesportefeuille

--------------------------------------------------------------*/



.servicesportefeuille #servicesportefeuille-filters {

    padding: 0;

    margin: 0 auto 25px auto;

    list-style: none;

    text-align: center;

    border-radius: 50px;

}



.servicesportefeuille #servicesportefeuille-filters li {

    cursor: pointer;

    display: inline-block;

    padding: 10px 15px;

    font-size: 1.5rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    color: var(--txt);

    margin-bottom: 5px;

    transition: all 0.3s ease-in-out;

    text-shadow: 3px 3px 2rem var(--bgdark);

}



.servicesportefeuille #servicesportefeuille-filters li:hover,

.servicesportefeuille #servicesportefeuille-filters li.filter-active {

    color: var(--txtlight);

}



.servicesportefeuille #servicesportefeuille-filters li:last-child {

    margin-right: 0;

}



.servicesportefeuille .servicesportefeuille-item {

    margin-bottom: 30px;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info {

    opacity: 0;

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 0;

    z-index: 3;

    transition: all ease-in-out 0.3s;

    background: rgba(255, 255, 255, 0.9);

    padding: 15px;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info h4 {

    font-size: 18px;

    color: #fff;

    font-weight: 600;

    color: var(--txt);

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info p {

    color: #1a5298;

    font-size: 14px;

    margin-bottom: 0;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .preview-link,

.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .details-link {

    position: absolute;

    right: 40px;

    font-size: 24px;

    top: calc(50% - 18px);

    color: #123a6d;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .preview-link:hover,

.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .details-link:hover {

    color: var(--txt);

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .details-link {

    right: 10px;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-links {

    opacity: 0;

    left: 0;

    right: 0;

    text-align: center;

    z-index: 3;

    position: absolute;

    transition: all ease-in-out 0.3s;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-links a {

    color: #fff;

    margin: 0 2px;

    font-size: 28px;

    display: inline-block;

    transition: 0.3s;

}



.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-links a:hover {

    color: #f59f8c;

}



.servicesportefeuille .servicesportefeuille-item:hover .servicesportefeuille-info {

    opacity: 1;

    bottom: 20px;

}





/*--------------------------------------------------------------

# Team

--------------------------------------------------------------*/



.team .member {

    text-align: center;

    margin-bottom: 20px;

    background: #343a40;

    position: relative;

    overflow: hidden;

}



.team .member .member-info {

    opacity: 0;

    position: absolute;

    bottom: 0;

    top: 0;

    left: 0;

    right: 0;

    transition: 0.2s;

}



.team .member .member-info-content {

    position: absolute;

    left: 50px;

    right: 0;

    bottom: 0;

    transition: bottom 0.4s;

}



.team .member .member-info-content h4 {

    font-weight: 700;

    margin-bottom: 2px;

    font-size: 18px;

    color: #fff;

}



.team .member .member-info-content span {

    font-style: italic;

    display: block;

    font-size: 13px;

    color: #fff;

}



.team .member .social {

    position: absolute;

    left: -50px;

    top: 0;

    bottom: 0;

    width: 50px;

    transition: left ease-in-out 0.3s;

    background: rgba(11, 35, 65, 0.5);

    text-align: center;

}



.team .member .social a {

    transition: color 0.3s;

    display: block;

    color: #fff;

    margin-top: 15px;

}



.team .member .social a:hover {

    color: var(--txt);

}



.team .member .social i {

    font-size: 18px;

    margin: 0 2px;

}



.team .member:hover .member-info {

    background: linear-gradient(0deg, rgba(11, 35, 65, 0.9) 0%, rgba(11, 35, 65, 0.8) 20%, rgba(0, 212, 255, 0) 100%);

    opacity: 1;

    transition: 0.4s;

}



.team .member:hover .member-info-content {

    bottom: 30px;

    transition: bottom 0.4s;

}



.team .member:hover .social {

    left: 0;

    transition: left ease-in-out 0.3s;

}



/*--------------------------------------------------------------

# prix

--------------------------------------------------------------*/



.prix .row {

    padding-top: 20px;

}



.prix .box {

    text-align: center;

    background: #fefefe;

    height: 20rem;

    box-shadow: 0px 5px 90px 0px rgba(106, 130, 145, 0.2);

    padding: 2rem 2rem;

    border: 4px solid var(--bg);

}



.prix .box:hover {

    background: var(--bg);

}



.prix .box h3 {

    font-weight: 300;

    margin-bottom: 1rem;

    font-size: 1.5rem;

    color: var(--txt);

}



.prix .box h4 {

    font-size: 18px;

    color: var(--txtlight);

    font-weight: 400;

    font-family: "Open Sans", sans-serif;

    margin-bottom: 25px;

}



.prix .box h4:hover {

    color:var(--txt);

}



.prix .box h4 span {

    color:var(--txt);

    font-size: 18px;

    display: block;

}



.prix ul {

    padding: 0;

    list-style: none;

    text-align: left;

    line-height: 20px;

    color: var(--txt);

}



.prix ul li {

    padding-bottom: 12px;

}



.prix ul i {

    color: var(--txt);

    font-size: 18px;

    padding-right: 4px;

}



.prix ul .na {

    color: #fff;

}



.prix ul .na i {

    color: #fff;

}



.prix ul .na span {

    text-decoration: line-through;

}





.prix .box:hover ul,

.prix .box:hover li,

.prix .box:hover ul i,

.prix .box:hover ul li,

.prix .box:hover p {

  

    color: #fff;

}

.prix .box:hover h3{

    color: #fff;

}

.prix .box:hover h4 {

    color: var(--txt);

}



.prix .get-started-btn {

    display: inline-block;

    padding: 10px 40px 11px 40px;

    border-radius: 4px;

    color: var(--txt);

    transition: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

    border: 2px solid var(--bgdark);

    background: #fff;

}



.prix .get-started-btn:hover {

    background: var(--bgdark);

    color: #fff;

}



.prix .featured {

    z-index: 10;

    padding: 100px 40px;

    border: 4px solid var(--bgdark);

}



.prix .featured .get-started-btn {

    background: var(--bgdark);

    color: #fff;

    border-color: var(--txt);

}



.prix .featured .get-started-btn:hover {

    background: var(--bg);

}



@media (max-width: 992px) {

    .prix .boxx {

        max-width: 60%;

        margin: 0 auto 30px auto;

    }

}



@media (max-width: 767px) {

    .prix .boxx {

        max-width: 80%;

        margin: 0 auto 30px auto;

    }

}



@media (max-width: 420px) {

    .prix .boxx {

        max-width: 100%;

        margin: 0 auto 30px auto;

    }

}





/*--------------------------------------------------------------

# Frequently Asked Questions

--------------------------------------------------------------*/



.faq .faq-item {

    margin: 20px 0;

    padding: 20px 0;

    border-bottom: 1px solid #e9f1fb;

}



.faq .faq-item i {

    color: #669ee5;

    font-size: 20px;

    float: left;

    line-height: 0;

    padding: 13px 0 0 0;

    margin: 0;

}



.faq .faq-item h4 {

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    margin: 0 0 10px 28px;

    font-family: "Poppins", sans-serif;

}



.faq .faq-item p {

    font-size: 15px;

}





/*--------------------------------------------------------------

# Contact

--------------------------------------------------------------*/



.contact .info-box {

    color: var(--txt);

    text-align: center;

    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);

    padding: 20px 0 30px 0;

    background: #fff;

}



.contact .info-box i {

    font-size: 32px;

    color: var(--txt);

    border-radius: 50%;

    padding: 8px;

    border: 2px dotted #fbdad2;

}



.contact .info-box h3 {

    font-size: 20px;

    color: #777777;

    font-weight: 700;

    margin: 10px 0;

}



.contact .info-box p {

    padding: 0;

    line-height: 24px;

    font-size: 14px;

    margin-bottom: 0;

}



.contact .php-email-form {

    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);

    padding: 30px;

    background: #fff;

}



.contact .php-email-form .validate {

    display: none;

    color: red;

    margin: 0 0 15px 0;

    font-weight: 400;

    font-size: 13px;

}



.contact .php-email-form .error-message {

    display: none;

    color: #fff;

    background: var (--actiontel);

    text-align: left;

    padding: 15px;

    font-weight: 600;

}



.contact .php-email-form .error-message br+br {

    margin-top: 25px;

}



.contact .php-email-form .sent-message {

    display: none;

    color: #fff;

    background: var (--actionmail);

    text-align: center;

    padding: 15px;

    font-weight: 600;

}



.contact .php-email-form .loading {

    display: none;

    background: #fff;

    text-align: center;

    padding: 15px;

}



.contact .php-email-form .loading:before {

    content: "";

    display: inline-block;

    border-radius: 50%;

    width: 24px;

    height: 24px;

    margin: 0 10px -6px 0;

    border: 3px solid var (--actionmail);

    border-top-color: #eee;

    -webkit-animation: animate-loading 1s linear infinite;

    animation: animate-loading 1s linear infinite;

}



.contact .php-email-form input,

.contact .php-email-form textarea {

    border-radius: 0;

    box-shadow: none;

    font-size: 14px;

    border-radius: 4px;

}



.contact .php-email-form input:focus,

.contact .php-email-form textarea:focus {

    border-color: var(--txt);

}



.contact .php-email-form input {

    padding: 20px 15px;

}



.contact .php-email-form textarea {

    padding: 12px 15px;

}



.contact .php-email-form button[type="submit"] {

    background: var(--bgdark);

    border: 0;

    padding: 10px 30px;

    border-radius: 4px;

    color: #fff;

    transition: 0.4s;

}



.contact .php-email-form button[type="submit"]:hover {

    background: var(--bg);

}



@-webkit-keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



@keyframes animate-loading {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}





/*--------------------------------------------------------------

# Breadcrumbs

--------------------------------------------------------------*/



.breadcrumbs {

    padding: 15px 0;

    background: #f6f9fd;

    min-height: 40px;

    margin-top: 82px;

}



@media (max-width: 992px) {

    .breadcrumbs {

        margin-top: 74px;

    }

}



.breadcrumbs h2 {

    font-size: 28px;

    font-weight: 600;

    color: var(--txt);

}



.breadcrumbs ol {

    display: flex;

    flex-wrap: wrap;

    list-style: none;

    padding: 0 0 10px 0;

    margin: 0;

    font-size: 14px;

}



.breadcrumbs ol li+li {

    padding-left: 10px;

}



.breadcrumbs ol li+li::before {

    display: inline-block;

    padding-right: 10px;

    color: #123a6d;

    content: "/";

}





/*--------------------------------------------------------------

# servicesportefeuille Details

--------------------------------------------------------------*/



.servicesportefeuille-details {

    padding-top: 40px;

}



.servicesportefeuille-details .servicesportefeuille-details-container {

    position: relative;

}



.servicesportefeuille-details .servicesportefeuille-details-carousel {

    position: relative;

    z-index: 1;

}



.servicesportefeuille-details .servicesportefeuille-details-carousel .owl-nav,

.servicesportefeuille-details .servicesportefeuille-details-carousel .owl-dots {

    margin-top: 5px;

    text-align: left;

}



.servicesportefeuille-details .servicesportefeuille-details-carousel .owl-dot {

    display: inline-block;

    margin: 0 10px 0 0;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ddd !important;

}



.servicesportefeuille-details .servicesportefeuille-details-carousel .owl-dot.active {

    background-color: var(--bgdark) !important;

}



.servicesportefeuille-details .servicesportefeuille-info {

    padding: 30px;

    position: absolute;

    right: 0;

    bottom: -70px;

    background: #fff;

    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

    z-index: 2;

}



.servicesportefeuille-details .servicesportefeuille-info h3 {

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #eee;

}



.servicesportefeuille-details .servicesportefeuille-info ul {

    list-style: none;

    padding: 0;

    font-size: 15px;

}



.servicesportefeuille-details .servicesportefeuille-info ul li+li {

    margin-top: 10px;

}



.servicesportefeuille-details .servicesportefeuille-description {

    padding-top: 50px;

}



.servicesportefeuille-details .servicesportefeuille-description h2 {

    width: 50%;

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 20px;

}



.servicesportefeuille-details .servicesportefeuille-description p {

    padding: 0 0 0 0;

}



@media (max-width: 768px) {

    .servicesportefeuille-details .servicesportefeuille-description h2 {

        width: 100%;

    }

    .servicesportefeuille-details .servicesportefeuille-info {

        position: static;

        margin-top: 30px;

    }

}





/*--------------------------------------------------------------

# mapage

--------------------------------------------------------------*/



.mapage h4 {

    display: block;

    font-weight: 500;

    margin-bottom: 0.5rem;

    font-size: 1.5rem;

    color: var(--txtlight);

}



.mapage p {

    display: block;

    margin-top: 0;

    margin-bottom: 1rem;

    font-weight: 300;

    font-size: 1rem;

    color: var(--txt);

}





/*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/



#footer {

    background: var(--bgdark);

    padding: 0px 0 00px 0;

    color: #fff;

    font-size: 14px;

}



#footer .footer-top {

    padding: 20px 0 10px 0;

}



#footer .footer-top .footer-info {

    margin-bottom: 15px;

    background: var(--bg);

    border: 2px solid var(--bg);

    height: 300px;

    text-align: center;

    padding: 20px 20px;

    color: var(--txt);

}



#footer .footer-top .footer-info h3 {

    font-size: 20px;

    margin: 0 0 20px 0;

    padding: 2px 0 2px 0;

    line-height: 1;

    font-weight: 400;

    color: var(--txt);

}



#footer .footer-top .footer-info h3 a {

    font-size: 20px;

    margin: 0 0 20px 0;

    padding: 2px 0 2px 0;

    line-height: 1;

    font-weight: 700;

    color: var(--txt);

}



#footer .footer-top .footer-info h3 a:hover {

    color: var(--txt);

}



#footer .footer-top .footer-info h4 {

    font-size: 16px;

    padding: 0px 0 0px 0;

    line-height: 1;

    font-weight: 500;

    color: var(--txt);

}



#footer .footer-top .footer-info h4 a {

    font-size: 16px;

    padding: 0px 0 0px 0;

    line-height: 1;

    font-weight: 500;

    color: var(--txt);

}



#footer .footer-top .footer-info h4 a:hover {

    color: var(--txtlight);

}



#footer .footer-top .footer-info p {

    font-size: 16px;

    line-height: 24px;

    margin-bottom: 0;

    font-weight: 700;

    font-family: "Raleway", sans-serif;

    color: var(--txt);

    

}



#footer .footer-top .footer-info a {

    font-size: 16px;

    line-height: 24px;

    margin-bottom: 0;

    font-weight: 700;

    font-family: "Raleway", sans-serif;

    color: var(--txt);

    text-decoration: underline;

}



#footer .footer-top .footer-info p a:hover {

    color: var(--txtlight);

    text-decoration: underline;

}



#footer .footer-top .social-links a {

    font-size: 18px;

    display: inline-block;

    color: #fff;

    line-height: 1;

    padding: 10px 10px;

    margin-right: 10px;

    border-radius: 4px;

    text-align: center;

    width: 36px;

    height: 36px;

    transition: 0.3s;

    background: var(--bgdark);

}



#footer .footer-top .social-links a:hover {

    color: var(--txt);

    background: var(--txtlight);

    text-decoration: none;

}



#footer .footer-top h4 {

    font-size: 16px;

    font-weight: 600;

    color: var(--txt);

    position: relative;

    padding-bottom: 12px;

}



#footer .footer-top .footer-links {

    margin-bottom: 30px;

}



#footer .footer-top .footer-links ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



#footer .footer-top .footer-links ul i {

    padding-right: 2px;

    color: var(--txtlight);

    font-size: 18px;

    line-height: 1;

}



#footer .footer-top .footer-links ul li {

    padding: 10px 0;

    display: flex;

    align-items: center;

}



#footer .footer-top .footer-links ul li:first-child {

    padding-top: 0;

}



#footer .footer-top .footer-links ul a {

    color: #fff;

    transition: 0.3s;

    display: inline-block;

    line-height: 1;

}



#footer .footer-top .footer-newsletter form {

    margin-top: 30px;

    background: #fff;

    padding: 6px 10px;

    position: relative;

    border-radius: 4px;

}



#footer .footer-top .footer-newsletter form input[type="email"] {

    border: 0;

    padding: 4px;

    width: calc(100% - 110px);

}



#footer .footer-top .footer-newsletter form input[type="submit"] {

    position: absolute;

    top: 0;

    right: -2px;

    bottom: 0;

    border: 0;

    background: none;

    font-size: 16px;

    padding: 0 20px 2px 20px;

    background: var(--bg);

    color: #fff;

    transition: 0.3s;

    border-radius: 0 4px 4px 0;

}



#footer .footer-top .footer-newsletter form input[type="submit"]:hover {

    background: #FFF;

}



#footer .copyright {

    border-top: 1px solid #0f2f57;

    text-align: center;

    padding-top: 30px;

}



#footer .credits {

    padding-top: 10px;

    text-align: center;

    font-size: 16px;

    color: #fff;

}



#footer .credits a {

    color: var(--txtlight);

}



#footer .footermail-btn {

    background: green;

    font-family: "Raleway", sans-serif;

    font-weight: 600;

    font-size: 20px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 10px 35px;

    border-radius: 4px;

    width: 240px;

    transition: 0.5s;

    margin-top: 10px;

    color: #fff;

}



#footer .footermail-btn:hover {

    background: var(--bgdark);

    color: #fff;

}



#footer .footertel-btn {

    background: red;

    font-family: "Raleway", sans-serif;

    font-weight: 600;

    font-size: 20px;

    letter-spacing: 1px;

    display: inline-block;

    padding: 10px 35px;

    border-radius: 4px;

    width: 240px;

    transition: 0.5s;

    margin-top: 10px;

   

    color: #fff;

}



#footer .footertel-btn:hover {

    background: var(--bgdark);

    color: #FFF;

}



@media (max-width: 575px) {

    #footer .footer-top .footer-info {

        margin: -20px 0 30px 0;

    }

}