@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Otomanopee+One&family=Poppins:wght@200;300;500;600&display=swap');
@font-face {
    font-family: caroni;
    src: url(fonts/caroni-regular.otf);
    /* font-weight: bold;  */
}

@font-face {
    font-family: 'UKBHED';
    src: url(fonts/UKBHED+Amarante-Regular.ttf);
    /* font-weight: bold;  */
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.card-body {
   /* font-family: 'caroni', sans-serif;*/
    font-family: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

i {
    margin-right: 10px;
}


/*----------multi-level-accordian-menu------------ 0379cf */

.navbar-logo {
    padding: 15px;
    color: #fff;
}

.navbar-mainbg {
    /*#0379cf;*/
    padding: 0px;
}

#navbarSupportedContent {
    overflow: hidden;
    position: relative;
}

#navbarSupportedContent ul {
    /*background-color: #0688B1;*/
    padding: 0px;
    margin: auto;
    /* border: 1px solid #0688B1;
    border-top: 2px dashed #0688b1;
    border-bottom: 2px dashed #0688b1;*/
    border-bottom: 3px solid #0379cf;/*#0688b1*/
    box-shadow: 1px 2px 4px 1px #ccc;
    margin-top: 5px;
}

#navbarSupportedContent ul li a i {
    margin-right: 10px;
}

#navbarSupportedContent li {
    list-style-type: none;
    float: left;
}

#navbarSupportedContent ul li a:hover {
    /*color: #0688B1;*/
    transition: all 0.7s;
    background-color: #0379cf;
    color: white;
}

#navbarSupportedContent ul li a {
    font-family: 'Otomanopee One', sans-serif;
    /* font-family: 'UKBHED', sans-serif;*/
    color: #0379cf;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 20px 12px;
    /*border-top: 3px solid #0379cf;*/
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    background-color: white;
    transition: background-color 2s ease-out 100ms;
    /* background-color: #0688B1; */
}


/*
#navbarSupportedContent>ul>li.active>a {
    color: #0688B1;
    background-color: transparent;
    transition: all 0.7s;
}
*/

#navbarSupportedContent a:not(:only-child):after {
    /*content: "\f105";
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    transition: 0.5s;*/
}

#navbarSupportedContent .active>a:not(:only-child):after {
    transform: rotate(90deg);
}

.hori-selector {
    display: inline-block;
    position: absolute;
    height: 100%;
    top: 0px;
    left: 0px;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background-color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: 10px;
}

.hori-selector .right,
.hori-selector .left {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fff;
    bottom: 10px;
    display: none;
}

.hori-selector .right {
    right: -25px;
}

.hori-selector .left {
    left: -25px;
}

.hori-selector .right:before,
.hori-selector .left:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0379cf;
}

.hori-selector .right:before {
    bottom: 0;
    right: -25px;
}

.hori-selector .left:before {
    bottom: 0;
    left: -25px;
}

@media(min-width: 992px) {
    .navbar-expand-custom {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
    .navbar-expand-custom .navbar-collapse {
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

@media (max-width: 991px) {
    #navbarSupportedContent ul li a {
        padding: 12px 30px;
    }
    .hori-selector {
        margin-top: 0px;
        margin-left: 10px;
        border-radius: 0;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }
    .hori-selector .left,
    .hori-selector .right {
        right: 10px;
    }
    .hori-selector .left {
        top: -25px;
        left: auto;
    }
    .hori-selector .right {
        bottom: -25px;
    }
    .hori-selector .left:before {
        left: -25px;
        top: -25px;
    }
    .hori-selector .right:before {
        bottom: -25px;
        left: -25px;
    }
}

.color-primary {
    color: #0379cf;
}

#navbarSupportedContent {
    padding-right: 10px;
    padding-left: 10px;
}

.navbar {
    margin-top: 70px;
}

.btn-neutral {
    margin: 0;
    border: 1px solid #0688B1;
    text-transform: none;
    padding: 7px;
}

.btn-neutral:hover {
    background-color: #0688B1;
    color: white;
    border-color: #0688B1;
}


/*******                     *********/

@import url('https://fonts.googleapis.com/css?family=Raleway:200');
.gradient-border:hover {
    --borderWidth: 3px;
    position: relative;
    border-radius: var(--borderWidth);
}

.gradient-border:hover:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.dark #footer,
#footer.dark {
    color: rgba(255, 255, 255, 0.75);
    background-color: #282828;
    border-top-color: rgba(255, 255, 255, 0.15);
}

#footer {
    position: relative;
    background-color: #EEE;
    border-top: 5px solid rgba(0, 0, 0, 0.2);
}

.dark,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #EEE;
}

#footer .footer-widgets-wrap {
    position: relative;
    padding-top: 50px;
    padding-bottom: 40px;
}

.dark #copyrights,
#copyrights.dark {
    color: rgba(255, 255, 255, 0.4);
    background-color: rgba(0, 0, 0, 0.2);
}

#copyrights {
    padding: 40px 0;
    background-color: #DDD;
    font-size: 0.875rem;
    line-height: 1.8;
}

.footer-logo {
    display: block;
    margin-top: 60px;
    width: 200px;
}

.dark .footer-widgets-wrap a {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Otomanopee One', sans-serif;
}

body:not(.device-touch) .i-rounded,
body:not(.device-touch) .i-plain,
body:not(.device-touch) .i-circled,
body:not(.device-touch) .i-bordered,
body:not(.device-touch) .social-icon {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.dark .social-icon {
    color: #EEE;
    border-color: #AAA;
}

.social-icon.si-small {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
    line-height: 30px !important;
}

.si-rounded {
    border-radius: 50%;
}

.social-icon {
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    line-height: 38px !important;
    color: #555;
    text-shadow: none;
    border: 1px solid #AAA;
    border-radius: 3px;
    overflow: hidden;
}

.i-rounded,
.i-plain,
.i-circled,
.i-bordered,
.social-icon {
    display: block;
    float: left;
    margin: 4px 11px 7px 0;
    text-align: center !important;
    font-size: 28px;
    color: #FFF;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
    cursor: pointer;
    font-style: normal;
}

.topmargin-sm {
    margin-top: 2rem !important;
}

.quick-contact-widget.form-widget .form-control,
.quick-contact-widget.form-widget .input-group,
.quick-contact-widget.form-widget .sm-form-control {
    margin-bottom: 10px;
}

.mx-auto {
    float: none !important;
}

:active,
 :focus {
    outline: none !important;
}

body:not(.device-touch) .i-rounded,
body:not(.device-touch) .i-plain,
body:not(.device-touch) .i-circled,
body:not(.device-touch) .i-bordered,
body:not(.device-touch) .social-icon {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.social-icon.si-small {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
    line-height: 30px !important;
}


/********    ***********/

.block-section.block-section-resources {
    max-width: none;
    background-color: #fff;
    padding: 0 3%;
}

.block-section {
    max-width: 1500px;
    margin: 0 auto 2%;
}

.block-section.block-section-resources .content {
    max-width: 1500px;
    margin: 0 auto;
}

.block-title h2 {
    border-bottom: 1px solid #979797;
    padding-bottom: 5px;
    font-family: GoodHeadlinePro-CondBold, Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 120%;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1b2931;
}

.block-section.block-section-resources .resources-holder {
    padding: 0;
}

.block-section.block-section-resources .resources-line {
    padding-top: 2%;
    padding-bottom: 2%;
    display: inline-block;
}

.main-menu,
.main-navigation li,
.secondary-menu,
.block-resources .block-title h2,
.resources-line {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.resources-line {
    clear: both;
    overflow: hidden;
    width: 100%;
    padding-bottom: 10%;
}

.block-section.block-section-resources .resources-line li {
    margin-left: 1%;
    margin-right: 1%;
    width: 18%;
    font-size: 11px;
    font-weight: 600;
}

.resources-line li {
    float: left;
    width: 32%;
    margin-left: 2%;
    list-style: none;
    font-family: freightsans_probold, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #1b2931;
}

.resources-line li a {
    display: block;
    color: #1b2931;
    text-decoration: none;
}

.resources-line .ico {
    display: block;
    position: relative;
    width: 38%;
    margin: 0 auto 25px;
}

.resources-line .ico img {
    display: block;
    width: 100%;
    height: auto;
}

.resources-line img.svg-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.block-section.block-section-resources .resources-line li .item-title {
    display: block;
    width: 100%;
    min-height: 55px;
    padding: 5px 1rem;
    font-family: GoodHeadlinePro-CondMedium, Arial, Helvetica, sans-serif;
    border-width: 1px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.resources-line .item-title {
    border: 2px solid #000;
    display: inline-block;
    padding: 2px 7px;
    cursor: pointer;
}


/*
.topbar .reseaux a i {
    font-size: 25px;
    color: black;
}
*/

.topbar .reseaux a i {
    font-size: 18px;
    color: black;
}

.topbar .contact a i {
    font-size: 13px;
    color: black;
    margin-left: 18px;
}

.topbar .contact a {
    font-size: 20px;
    color: black;
    font-family: 'caroni', sans-serif;
}

.topbar a:hover,
.topbar a:hover i {
    color: #0379cf!important;
    text-decoration: none;
}

.users-card {
    text-align: center;
   /* border-bottom: 1px solid;*/
   margin-bottom: 10px;
}

.users-card::after{
    content: '';
    position: absolute;
    border-bottom: 1px solid white;
    width: 50%;
    left:25%;
}

.users-card i{
    margin-left: 10px;
    margin-right: 3px;
}

.users-card p{
    margin-bottom: 5px;    
}

#footer .table{
    color:white!important;
}


.bg-page-2{

    display: block;
    position: relative;
    width: 100%;
    float: left;
}

.title-sepcimen{
    position: relative;
    display: block;
    float: left;
    text-shadow: 2px 2px 2px white;
    font-size: 52px;
    border-left: 5px double #000;
    margin: auto;
    padding-left: 20px;
    margin-top: -290px;
}

.mr-b-10{
    margin-bottom: 100px;
    
}


.navbar-toggler{
    background-color: #2d8fd7;
}


        /* width */
        ::-webkit-scrollbar {
            width: 20px;
            }
    
            /* Track */
            ::-webkit-scrollbar-track {
            background: #f1f1f1d2; 
            }
            
            /* Handle */
            ::-webkit-scrollbar-thumb {
            background: #06f; 
            }
    
            /* Handle on hover */
            ::-webkit-scrollbar-thumb:hover {
            background: #555; 
            }
            
            
            
            
            
  @media screen and (max-width: 768px) {
            .mapouter,.mapouter .gmap_canvas{
                width:100%!important;
            }
            
            .block-section.block-section-resources .resources-line li{
                width:90%;
                margin-top:20px;
            }
            #footer{
                text-align:center;
            }
            
            .footer-logo{
                margin:auto;
            }
            .navbar {
                margin-top: -10px;
            }
            .navbar-toggler i{
                margin-right:0px;
                padding:7px;
            }
            
            .title-sepcimen{
                margin-top:-140px;
            }
  }