:root {

    --bg: #60e4e4;

    --bgdark: #06a3a3;

    --txt: #282e2e;

    --txtlight: #11b1b1;

    --actiontel: var(--bg);

    --actiontelhover: #610109;

    --actionmail: var(--bg);

    --actionmailhover: #610109

}



html {

    font-family: sans-serif;

    font-size: 14px;

    line-height: 1.15;

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

    -webkit-tap-highlight-color: transparent

}



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

}



*,

::after,

::before {

    box-sizing: border-box

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin-top: 0;

    margin-bottom: .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%

}



#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: #fff;

    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(0)

    }



    100% {

        transform: rotate(360deg)

    }

}



@keyframes animate-preloader {

    0% {

        transform: rotate(0)

    }



    100% {

        transform: rotate(360deg)

    }

}



.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 .4s

}



.back-to-top i:hover {

    background: #f06f54;

    color: #fff

}



#header {

    background: #fff;

    transition: all .5s;

    z-index: 997;

    padding: 20px 0

}



#header.header-scrolled {

    padding: 12px 0;

    box-shadow: 0 2px 15px rgba(0, 0, 0, .1)

}



#header .logo {

    font-size: 2rem;

    margin: 0;

    padding: 0;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .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

    }

}



.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: .3s;

    font-size: 1.1rem;

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

}



.nav-menu .active>a,

.nav-menu a:hover,

.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: 0 0 30px rgba(127, 137, 161, .25);

    transition: .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 .active>a,

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

.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-started-btn {

    margin-left: 25px;

    background: var(--bgdark);

    color: #fff;

    border-radius: 4px;

    padding: 8px 25px 9px 25px;

    white-space: nowrap;

    transition: .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-nav-toggle {

    position: fixed;

    top: 23px;

    right: 15px;

    z-index: 9998;

    border: 0;

    background: 0 0;

    font-size: 24px;

    transition: all .4s;

    outline: 0 !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 .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: 0

}



.mobile-nav .active>a,

.mobile-nav a:hover,

.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, .6);

    overflow: hidden;

    display: none;

    transition: ease-in-out .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 {

    width: 100%;

    height: 100vh;

    background-color: rgba(4, 12, 21, .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, .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: 3rem;

    font-weight: 700

}



#hero h2 {

    color: #fff;

    margin: 0;

    font-size: 3rem;

    font-weight: 700

}



#hero p {

    -webkit-animation-delay: .4s;

    animation-delay: .4s;

    color: #fff;

    margin-top: 10px;

    font-size: 1.5rem

}



#hero .carousel-inner .carousel-item {

    transition-property: opacity;

    background-position: center top

}



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

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

#hero .carousel-inner .carousel-item {

    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: .5s

}



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

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

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

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

    left: 0;

    transform: translate3d(0, 0, 0)

}



#hero .carousel-control-next,

#hero .carousel-control-prev {

    width: 10%;

    top: 112px

}



@media (max-width:992px) {



    #hero .carousel-control-next,

    #hero .carousel-control-prev {

        top: 66px

    }

}



#hero .carousel-control-next-icon,

#hero .carousel-control-prev-icon {

    background: 0 0;

    font-size: 36px;

    line-height: 1;

    width: auto;

    height: auto;

    background: rgba(255, 255, 255, .2);

    border-radius: 50px;

    padding: 10px;

    transition: .3s;

    color: rgba(255, 255, 255, .5)

}



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

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

    background: rgba(255, 255, 255, .3);

    color: rgba(255, 255, 255, .8)

}



#hero .carousel-indicators li {

    cursor: pointer;

    background: #fff;

    overflow: hidden;

    border: 0;

    width: 12px;

    height: 12px;

    border-radius: 50px;

    opacity: .6;

    transition: .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: .5s;

    line-height: 1;

    color: #fff;

    -webkit-animation-delay: .8s;

    animation-delay: .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-next,

    #hero .carousel-control-prev {

        width: 5%

    }

}



@media (max-height:500px) {

    #hero {

        height: 120vh

    }

}



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 0

}



.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 .icon-box {

    text-align: center;

    background: #fefefe;

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

    padding: 80px 20px;

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

    cursor: pointer;

    width: 100%;

    max-width: 100%

}



.divlink {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    text-decoration: none;

    z-index: 1;

    background-color: #fff;

    opacity: 0

}



.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

}



.moncss .video-box {

    margin: auto;

    width: 400px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    min-height: 200px;

    padding: 20px 0 100px 0

}



.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: .5s;

    line-height: 1;

    color: #fff;

    -webkit-animation-delay: .8s;

    animation-delay: .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 0 100px 0

}



.moncss .play-btn {

    width: 94px;

    height: 94px;

    background: radial-gradient(var(--bgdark) 50%, rgba(237, 80, 46, .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: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    border-left: 15px solid #fff;

    z-index: 100;

    transition: all .4s cubic-bezier(.55, .055, .675, .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, .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: 0;

    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)

}



.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: .3s;

    line-height: 1;

    color: var(--txt);

    -webkit-animation-delay: .8s;

    animation-delay: .8s;

    margin-top: 6px;

    border: 2px solid var(--bgdark)

}



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

    background: var(--bg);

    color: #fff;

    text-decoration: none

}



.counts {

    padding-top: 0

}



.counts .count-box {

    box-shadow: -10px -5px 40px 0 rgba(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 .3s

}



.counts .count-box a:hover {

    color: var(--txtlight)

}



.services-video {

    padding: 0

}



.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: 0

}



.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: 0;

    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, .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 .4s cubic-bezier(.55, .055, .675, .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, .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 .accordion-list,

    .services-video .content {

        padding-left: 0;

        padding-right: 0

    }

}



@media (max-width:992px) {

    .services-video .content {

        padding-top: 30px

    }



    .services-video .accordion-list {

        padding-bottom: 30px

    }

}



.services .icon-box {

    text-align: center;

    background: #fefefe;

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

    padding: 20px 20px;

    transition: all ease-in-out .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 .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: 0 0 20px 0 rgba(11, 35, 65, .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: 700;

    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-dots,

.testimonials .owl-nav {

    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 {

    padding: 20px 0;

    background: var(--bgdark);

    text-align: center

}



.action h3 {

    color: #fff;

    font-size: 28px;

    font-weight: 700

}



.action h4 {

    color: #ebe70e;

    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: .5s;

    margin-top: 10px;

    background: var(--actionmail)

}



.action .actionmail-btn:hover {

    background: var(--actionmailhover);

    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: .5s;

    margin-top: 10px;

    background: var(--actiontel)

}



.action .actiontel-btn:hover {

    background: var(--actiontelhover);

    color: #fff

}



.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 .3s ease-in-out;

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

}



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

.servicesportefeuille #servicesportefeuille-filters li:hover {

    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 .3s;

    background: rgba(255, 255, 255, .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 .details-link,

.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .preview-link {

    position: absolute;

    right: 40px;

    font-size: 24px;

    top: calc(50% - 18px);

    color: #123a6d

}



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

.servicesportefeuille .servicesportefeuille-item .servicesportefeuille-info .preview-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 .3s

}



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

    color: #fff;

    margin: 0 2px;

    font-size: 28px;

    display: inline-block;

    transition: .3s

}



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

    color: #f59f8c

}



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

    opacity: 1;

    bottom: 20px

}



.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: .2s

}



.team .member .member-info-content {

    position: absolute;

    left: 50px;

    right: 0;

    bottom: 0;

    transition: bottom .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 .3s;

    background: rgba(11, 35, 65, .5);

    text-align: center

}



.team .member .social a {

    transition: color .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, .9) 0, rgba(11, 35, 65, .8) 20%, rgba(0, 212, 255, 0) 100%);

    opacity: 1;

    transition: .4s

}



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

    bottom: 30px;

    transition: bottom .4s

}



.team .member:hover .social {

    left: 0;

    transition: left ease-in-out .3s

}



.prix .row {

    padding-top: 20px

}



.prix .box {

    text-align: center;

    background: #fefefe;

    height: 20rem;

    box-shadow: 0 5px 90px 0 rgba(106, 130, 145, .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 li,

.prix .box:hover p,

.prix .box:hover ul,

.prix .box:hover ul i,

.prix .box:hover ul li {

    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: .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

    }

}



.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 .info-box {

    color: var(--txt);

    text-align: center;

    box-shadow: 0 0 30px rgba(214, 215, 216, .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: #777;

    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, .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: .4s

}



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

    background: var(--bg)

}



@-webkit-keyframes animate-loading {

    0% {

        transform: rotate(0)

    }



    100% {

        transform: rotate(360deg)

    }

}



@keyframes animate-loading {

    0% {

        transform: rotate(0)

    }



    100% {

        transform: rotate(360deg)

    }

}



.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 {

    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-dots,

.servicesportefeuille-details .servicesportefeuille-details-carousel .owl-nav {

    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: 0 2px 15px rgba(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

}



@media (max-width:768px) {

    .servicesportefeuille-details .servicesportefeuille-description h2 {

        width: 100%

    }



    .servicesportefeuille-details .servicesportefeuille-info {

        position: static;

        margin-top: 30px

    }

}



.mapage h4 {

    display: block;

    font-weight: 500;

    margin-bottom: .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 {

    background: var(--bgdark);

    padding: 0 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: 0;

    line-height: 1;

    font-weight: 500;

    color: var(--txt)

}



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

    font-size: 16px;

    padding: 0;

    line-height: 1;

    font-weight: 400;

    color: var(--txt)

}



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

    font-weight: 700

}



#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

}



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

    font-weight: 700

}



#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: .3s;

    background: var(--bgdark)

}



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

    color: #fff;

    background: var(--actiontelhover);

    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: .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: 0 0;

    font-size: 16px;

    padding: 0 20px 2px 20px;

    background: var(--bg);

    color: #fff;

    transition: .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: var(--bgdark);

    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: .5s;

    margin-top: 10px;

    color: #fff

}



#footer .footermail-btn:hover {

    background: var(--actionmailhover);

    color: #fff

}



#footer .footertel-btn {

    background: var(--bgdark);

    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: .5s;

    margin-top: 10px;

    color: #fff

}



#footer .footertel-btn:hover {

    background: var(--actionmailhover);

    color: #fff

}



@media (max-width:575px) {

    #footer .footer-top .footer-info {

        margin: -20px 0 30px 0

    }

}