@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: black;
    padding: 0;
    margin: 0;
}
:root {
    --main: #0d4c47;
    --second: #6610f2;
    --tercery: #6f42c1;
    --quadary: white;
  }

body{
    font-family: 'Inter', sans-serif;
    color: #232323;
    width: 100vw;
    overflow-x: hidden;
    opacity: 1;
    background-color:var(--quadary);;
    font-size: 14px;
    /* background-image: url("../img/3132.png"); */
    background-position: center;
    background-repeat: repeat;
    background-size: cover;

}
.bg_main{
    background-color: var(--main);
}
.bg_sec{
    background-color: var(--second);
}
.bg_ter{
    background-color: var(--tercery);
}
.text_main{
    color: var(--main);
}
.text_sec{
    color: var(--second);
}
.text_ter{
    color: var(--tercery);
}
.titre1{
    font-size: 4.5rem;
    font-weight: bold;
}
.titre2{
    font-size: 2.3rem;
    font-weight: bold;
}
.titre3{
    font-size: 1.6rem;
    font-weight: bold;
}
.titre4{
    font-size: 1.1rem;
    font-weight: 500;
}
.just{
    text-align: justify;
}
section{
    padding: 5% 10% !important;
}
nav{
    height: 130px;
    background-color: var(--main);;
    font-size: 18px;
    padding: 0 3% !important;
    z-index: 100;
}
nav .dropdown-item{
    font-size: 16px!important;
}
.navbar-collapse{
    background-color: var(--quadary);;
    padding: 25px;
}
.separator1{
    border-top: 2px dotted gray;
}
.ajustline{
    line-height: 25px;
}
.infobar {
    font-size: 14px;
    display: flex;
    list-style: none;
    background-color: var(--main);
    width: fit-content;
    color: var(--quadary);;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-left:auto;
    margin-right: 5%;
    margin-bottom: 0;
    padding: 10px 20px;
    border-radius: 0 0 30px 30px;
    gap: 20px;
    vertical-align: middle;
    align-items: center;
}
.infobar li a {
    text-decoration: none;
    color: var(--quadary);;
}
.nav_button{
    display: flex;
    align-items: center;
    background-color:var(--main);
    color: var(--quadary);;
    border-radius: 50px;
    border:none;
    padding: 10px;
}
.nav_button:hover, .article a {
    background-color: transparent;
    color: var(--main);
    border-radius: 50px;
    border:1px solid var(--main);
    padding: 5px;

}
.nav_button span{
    display: none;
}
.nav_button:hover span{
    margin-left: 5px;
    display: block;
}
.dropdown-menu{
    border:none;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}
.dropdown-menu.sub{
    box-shadow: none!important;
}
.dropdown-menu .dropdown-divider, ul .dropdown-divider{
    border-top: 1px solid var(--quadary);;
}
.dropdown-item i{
    margin-right: 10px;
}
/* .dropdown-toggle::after{
    position: absolute;
    right: 10px;
    top: 50%;
} */
.lang{
    border-radius: 50px;
    font-size: 12px;
    background-color: transparent;
    color: var(--quadary);;
    /*border: 1px solid #AAA5A5;*/
    /* box-shadow: 0px 1px 1px; */
}
.lang form{
    display: flex;
    align-items: baseline;
}
.lang button{
    overflow: hidden;
    flex:1;
    background-color:    transparent;
    border: none;
    display: none;
    margin-top: 5px;
}
.lang button.active{
    display: block;
}
.lang:hover button{
    display: block;
}

.lang button img{
    width: 25px;
}
#carouselExampleCaptions .carousel-caption{
    padding: 0;
    background-color: rgba(0,0,0,.8);
    width: fit-content;
    margin: auto;
    bottom: 30%;
    transform: translateY(50%);
}
#carouselExampleCaptions .carousel-caption .main{
    padding: 25px;
    border: 1px solid rgba(255,255,255,.5);

}
#carouselExampleCaptions .carousel-caption .title{
    font-weight: bolder;
    font-size: 4rem !important;
    margin: -10px;
}
#carouselExampleCaptions .carousel-caption .sub-title{
    font-weight: normal;
    font-size: 2.7rem !important;
    margin: 0;

}
#carouselExampleCaptions .carousel-caption .content{
    font-weight: normal;
    font-size: 1.2rem !important;
    margin: 0;

}
#carouselExampleCaptions .carousel-caption .sub button{
    padding: 15px 50px;
    background-color: var(--main);
    color: var(--quadary);;
    border: 20px;
    border-radius: 5px;
}
.Titlehead{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 25vh;
    padding: 3rem;
    text-align: center;
    background-position: 50% !important;
    background-size: cover !important;
}
.Titlehead .title{
    flex:1 0 100%;
    font-size: 4.5rem;
    font-weight: bolder;
    color: var(--quadary);;
    text-shadow: 0 4px 4px black;
}
.Titlehead .sub{
    flex:0 0 auto;
    font-size: 1rem;
    font-weight: normal;
    color: var(--quadary);;
    padding: 5px 30px;
    background-color: var(--main);
}
.blog{
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
}
.article{
    flex: 0 0 24%;
    
}
.article img{
    max-height: 440px;
    width: auto;
    height: 325px;
    object-fit: cover;
}
.article .titre4 {
    font-weight: bold;
    font-size: 22px;
}
.article_banner{
    object-fit: cover;
    height: 250px;
    width: 100%;
    overflow: hidden;
}
.article a { 
    background-color:var(--main);
    color: var(--quadary);;
    border-radius: 8px;
    border: none;
    padding: 8px 10px;
    font-weight: 500;
    text-decoration: none;
    margin: 10px 0;
}
.user_comment{
    object-fit: cover;
    width: 90px;
    border-radius: 50%;
}
.comment_bloc, .blocshadow{
    box-shadow: 0 0 2px var(--quadary);
}
.faq_question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--main);
    width: 100%;
    text-align: start;
    font-size: 16px;
    color: var(--quadary) !important; 
    
    font-weight: 500;
    text-decoration: none;
    padding: 1.3rem;
    margin-bottom: -5px;
}

.faq_question:hover, .faq_question[aria-expanded="true"]{
    background-color: #77928B;
    color: var(--quadary);;
}
#article_comment h6{
    font-size: 11px;
}
#article_comment p{
    font-size: 13px;
    font-weight: 300 !important;
    padding: 5px;
    border-radius: 10px;
}
#article_comment textarea{
    border:1px solid var(--quadary);;
    width: 85%;
    height: auto;
    padding-top: 10px;
    margin-left: 15px;
}
.img_container {
    overflow: hidden;
    height:600px;
    padding: 0;
}
.side_img{
    object-fit: cover;
    height: 600px;
}

#article_comment a{

}
/* .comment_bloc{
    padding: 10px 5px;
    box-shadow: 0 1px 4px rgb(216, 216, 216);  

} */
.bad{
    font-family: 'Segoe UI', sans-serif;
    color: #0B0C0C;
    opacity: 1;
    /* background-color: rgba(50,50,50,0.2);*/
    background-image: url("../img/2.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}
.badc{
    background-image: url("../img/red.png");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    }
.headnav{
    height: 70px;
    background-color: var(--quadary);;
    /*background-color:white;*/
    padding-left: 5%;
    padding-right: 5%;
    justify-content: space-between !important;
    display: flex !important;

}
.navbar-brand{
    width: 10vw;
}
.carousel-item {
    height: 82vh;
    max-height:900px;
}
.wkbar{
    border-bottom: 10px solid var(--main)!important;
}
.isbox{
    height: 250px;
    width: 324px;
    object-fit: cover;
}
.ibbox{
    height: 500px;
    width: 324px;
    object-fit: cover;
}
.mobox{
    width: 85% !important;
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #77928B; /* Set a background color */
    color: var(--quadary);; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
.tshad{
    text-shadow: 2px 2px 5px black;
}
.tshad1{
    text-shadow: 1px 1px 4px black;
}
.tshad2 {
    text-shadow: 0px 0px 2px #000;
}
.trimb{
    margin-bottom: 150px;

}
.ptmob{
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}
.trimt{
    margin-top: 150px;

}
/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
}
.scontent{
    margin: 5rem !important;
}
.mc{
    margin-left: 1rem;
}
.mobilem{
display: none;
}
.be50{
    width: 50%!important;
}
.be25{
    width: 50%!important;
}
.c50{
    width: 42%!important;
}
.c25{
    width: 33%!important;
}
#count {
    border-radius: 10%;
    position: relative;
    top: -10px;
    left:-10px;
}
#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#table1{
    margin-top: 3% !important;
}
.nav-link2 {
    display: block;
    padding: .5rem 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    color: #000000 ;
    font-size: 16px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.w-90{
    width: 90% !important;
}
.txt1{
    font-size: 16px;
}
.txt2{
    font-size: 22px;
}
.txt3{
    font-size: 44px;
}
.txt4{
    font-size: 88px;
}
.title2
{
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 600;
    font-size: 3rem;
    color: var(--main);
}
.title3{
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.tx-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.tx-4 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.elv{
    width: 4% !important;
}
.headins{
    background-image: url("../img/rah1.jpeg");
    background-size: cover;
    background-position:    center;
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 1;
}
.nav-link2:hover {

    color: var(--main);
    font-size: 18px;
    font-weight: 600;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-link2:active {

    color: var(--main);
    font-size: 18px;
    font-weight: 600;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}.nav-link3 {
    display: block;
    padding: .5rem 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    color: #000000 ;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
 .coolflex{
     display: flex !important;
 }
 .colform{
     width: 45%!important;
     max-width: 100%;
 }
.opimg{
    width: 100%;
}
.displayno{
    display: flex ;

}

.w-15{
    width: 15%;
    max-width: 15%;
}
.w-40{
    width: 40%;
    max-width: 40%;
}
.tabcol{
    width: 33%;
    max-width: 100%;
}
.wcard{
    width: 50%;
}
.opshow
{
    display: grid!important;
    width: 150px;

}
.flextom{
    display: flex !important;}
.flextab{
    display: flex !important;}
.menu{
    flex-direction: row;
    margin-right: auto !important;
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-top: 0;
}
.tribox{
    width: 32%;
    height: 160px;

}
.column {
    flex: 35%;
    max-width: 35%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}
.magebox{
    height: 160px;
}
.minimagebox{
    height: 80px;
}
.h2h{
    height: 200px;

}
.footbar{
    display: flex!important;
    width: 100%;
}
.footcol{
    max-width: 34%;
}
.nav-link3:hover {

    color: var(--main) ;
    font-weight: 600;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-link3:active {

    color:var(--main);
    font-weight: 600;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.na {
    text-decoration: none;
    color: #0B0C0C;
}

h1 {
    font-family: 'Red Hat Display', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 34px;
    position: relative;
}
.pa1{
    padding: 1rem;
}
.ht {
    font-family: 'Red Hat Display', sans-serif;
    text-transform: uppercase;
    font-size: 3rem;
    position: relative;
    margin-top: 3rem !important;
}
.zoom:hover
{
    transition: transform .5s ease;
    transform: scale(1.03);
}
h1:before {
    content: "";
    /*background-image: url(img/petits-points.png);*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    left: -37px;
    top: -32px;
}

 .h2t {
    font-family: 'Red Hat Display', sans-serif;
    position: relative;
    text-transform: uppercase;
    font-weight: 685;
    font-size: 3rem;
    margin-bottom: 0;
    margin-top: 3rem !important;
    color: var(--main);



}
.h2t:before {
    content: "";
   /*background-image: url();*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    left: -37px;
    top: -32px;
}

.bg-black{
    background-color: #0B0C0C;
}
.bg-blue{
    background-color: var(--second);
}
.bg-lred{
    background-color:var(--main);
}
.bg-red{
    background-color:var(--main);
}
.bg-brown{
    background-color:var(--main);
}
.bg-lbrown{
    background-color: var(--quadary);;
}
.bg-purple{
    background-color: var(--second);
}
.bg-grey {
    background-color: var(--quadary);;
}
.bg-lpurple{
    background-color: #91A0B6;
}
.bgwk-green{
    background-color: #77928B;
}
.bgwk-red{
    background-color:var(--main);
}
.t-black{
    color: #0B0C0C;
}
.t-blue{
    color: var(--second);
}
.t-lred{
    color: var(--main);
}
.t-red{
    color:var(--main);
}
.twk-green{
    color: #77928B;
}
.twk-greend{
    color: #53645f;
}
.bgwk-redt{
    background-color: var(--main);
}
.bgwk-greent{
     background-color: rgba(44, 133, 41, 0.73);
}
.twk-red{
    color: var(--main);
}
.t-brown{
    color:var(--main);
}
.t-lbrown{
    color: #DDD3C1;
}
.t-purple{
   color: var(--second);
}
.t-grey{
   color: var(--quadary);;
}
.t-lpurple{
    color: #91A0B6;
}
.modal-footer {
    background-color: rgba(50,50,50,0.3);
}
.mainbg{
    /*background-image: url(../img/maritime-consulting-senegal4.jpg);*/
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 50px !important;
}
.lab
{
    font-size: 1.3rem;
    color: var(--second);
}.lab2
{
    font-size: 1.2rem;
     margin-bottom: 0;

}
.lab3
{
    font-size: 1.2rem;
     margin-bottom: 0;

}

.field
{
    outline: none;
    margin: 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
}
.formd {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--quadary);;
    background-clip: padding-box;
    border: 1px solid var(--quadary);;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.qstyle{
    padding: 1%;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.50rem;
    background-clip: border-box;
}
.bg-gra {
    background: -moz-linear-gradient(bottom, #272727 0%, #0B235C 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#DDD3C1), to(#0B235C));
    background: -webkit-linear-gradient(bottom, #272727 0%, #0B235C 100%);
    background: -moz-linear-gradient(bottom, #272727 0%, #0B235C 100%);
    background: -o-linear-gradient(bottom, #272727 0%, #0B235C 100%);
    background: linear-gradient(to top, #272727 0%, #0B235C 100%);
}.bg-gray {
     background-color: #191919;
}

.formcont{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /*border: 1px solid rgba(0,0,0,.125);*/
    border-radius: .25rem;
    width: 65%;
}
.formbox
{
    margin-bottom: 3rem;
}
.qformbox
{
    margin-bottom: 1rem;
    /*background-color: #264F8A;*/
    padding: 1%;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);

}
.qbox
{
    max-width: 83.333333%;
    position: relative;
    width: 100%;

}
.pp{
    padding: 1%;
}
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity:0.5;
}
.sel
{
    background-color: var(--quadary);;
    background: var(--quadary);;
}
.col6 {
    width: 57%;
}
.sel:hover
{
    background-color: #0B0C0C;
    color: var(--quadary);;
}
/*footer{
    position: fixed;bottom: 0;
}*/
footer ul{
    list-style: none;
    font-size: 16px;
    line-height: 30px;
}
footer ul li:first-child, footer .title{
    color: var(--main);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 15px;

}
footer input {
    border:none !important;
    border-bottom: 0.5px solid #aaaaaa !important;
    border-radius: 0 !important;
}
footer ul li a, footer a{
    text-decoration: none;
    color: #2F3030;
}
footer ul li a:hover{
    color: var(--main);
}
.copybar {
    border-top: 1px solid #E4E7EC;
    padding-top: 25px;
}
.lgd{
    font-size: 9px;
}
@media screen and (max-width: 1250px) {
    .navbar-brand {
        width: 10vw;
    }
    nav, .nav_button{
        font-size: 14px !important;
    }
    .navbar-nav{
        gap:10px !important ;
    }
    .navbar-toggler{
        position: relative;
    }
    nav .menu-container .navbar-toggler{
        margin-left:80%;
    }

    
}
@media screen and (max-width: 985px) {
    .navbar-collapse{
        position: absolute;
        top: 85px;
        width: 50vw;
        right: 127px;
        border: none;
        box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
    }
    .infobar {
        width: 98%;
        font-size: 0.8rem;
        gap:3px
        }
    .navbar-brand{
        width: 10vw;
        }
    .nav_button span{
        display: block;
        margin-left: 10px;
    }
}

@media screen and (max-width: 768px) {
   
    nav {
        flex-direction: column;
        padding: 1rem;
    }
    .navbar-brand {
        width: 30%;
        margin: auto;
    }
    .infobar {
        font-size: 0.9rem;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    .infobar li {
        flex:1 0 48%;
    }
    .Titlehead {
        padding: 1rem;
        text-align: center;
    }
    .Titlehead .title{
        font-size: 2.5rem;
    }
    .formcont{
        width: 100%;
        padding: 1rem;
 
        position: relative;
        
        margin-left: 1%;
        margin-right: 1%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        width: 100%;
        padding: 0;
 
    }
 
    .opshow
    {
        display: grid !important;
        width: 285px;
        margin-bottom: 4%;
    }
    .article {
        flex: 0 0 100%;
        margin-bottom: 1rem;
    }
    .tribox {
        width: 100%;
        margin-bottom: 1rem;
    }
    footer ul {
        text-align: center;
    }
    .headnav{
        padding-left: 5%;
        padding-right: 5%;
    }
    .displayn{
    display: flex;
    }
    .displayno{
            display: none;
 
    }
    .be50{
        width: 100%!important;
    }
    .be25{
        width: 100%!important;
    }
    .username{
        display: none;
    }
    .trimb{
        margin-bottom: 50px;
 
    }
 
    .trimt{
        margin-top: 50px;
 
    }
    .notif
    {
    display: none;
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
    }
    .side-img{
        width: 50%;
        margin-right: 3%;
    }
    .side-img img {
        align-content: center;
        margin-top: 85%;
        width: 100%;
        margin-right: 3%
 
    }
    .tx-4 {
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.2;
    }
 
    .flextab{
        display: flex!important;
    }
    .flextom{
        display: inline-grid!important;
    }
    .tflex{
        display: flex !important;
    }
    .wcard{
        width: 100%;
    }
    .mc{
        margin-left: 0;
    }
 
    .c50{
        width: 100%!important;
    }
    .c25{
        width: 100%!important;
    }
    .p-5 {
        padding: 1.2rem !important;
    }
    .col6 {
        width: 90%;
    }
    .lab2
    {
        font-size: 14px;
        margin-bottom: 0;
 
    }
    .carousel-item {
        height: 34em;
    }
    .lab3
    {
        font-size: 14px;
        margin-bottom: 0;
 
    }
    .mobox{
        width: 95% !important;
    }
    .container-fluid{
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: auto;
    margin-left: auto;
    }
 }

@media screen and (max-width: 600px) {
    nav{
        display: flex !important;
    }
    
    .formcont{
        position: relative;
        margin-left: 1%;
        margin-right: 1%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        width: 100%;
        padding: 0;
    }
    .side-img{
        display: none;
    }
    .coolflex{
        display: inline-grid !important;
    }
    .displayn{
        display: none;

    }
    .opimg{
        width: 100%;
    }
    .flextom{
        display: inline-grid!important;
}
    .flextab{
        display: inline-grid!important;
}
    .scontent{
        margin: 5% !important;
    }
    .username{
        display: none;
    }
    .wcard{
        width: 100%;
    }
    .title3 {
        font-size: 2rem;
        font-weight: 300;
        line-height: 1.2;
    }
    .tx-2 {
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1.2;
    }

    .mc{
        margin-left: 0;
    }
        .mobilem{
            display: flex;
        }

    .footbar{
        display: grid!important;
        width: 100%;
    }
    .footcol{

        max-width: 100%;
    }
    .be25{
        width: 100%!important;
    }
    .be50{
        width: 100%!important;
    }
    .c25{
        width: 100%!important;
    }
    .c50{
        width: 100%!important;
    }
    .tabcol{

        max-width: 100%;
    }
    .elv{
        width: 36% !important;
    }
    /* .row {

        display: inline;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    } */
    .lab
    {
        font-size: 1rem;
        color: var(--second);
    }
    .col6 {
        width: 70%;
    }
    .lab2
     {
         font-size: 14px;
         margin-bottom: 0;

     }
    .tribox{
        width: 100%;
        height: 160px;

    }
    .carousel-item {
        height: 14em;
    }
    .ptmob{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .trimt{
        margin-top: 30px;

    }
    .trimb{
        margin-bottom: 130px;

    }


    .isbox{
        height: 150px;
        width: 150px;
        object-fit: cover;
    }
    .ibbox{
        height: 300px;
        width: 150px;
        object-fit: cover;
    }
    .lab3
    {
        font-size: 14px;
        margin-bottom: 0;

    }
    .mobox{
        width: 90% !important;

    }
    footer .brand img {
        width: 80vw;
        text-align: center;
    }

}



/* dashboard */

/* Bouton principal */
.btn-main {
    background-color: var(--main);
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-main:hover {
    background-color: var(--second);
    color: white;
}

/* Bloc d'ombre */
.card {
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* En-tête */
.Titlehead {
    padding: 5rem 0;
    text-align: center;
    color: white;
}



/* Bouton principal */
.btn-main {
    background-color: var(--main);
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-main:hover {
    background-color: var(--second);
    color: white;
}

/* Badge */
.badge {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 0.9rem;
}

.bg-success {
    background-color: #28a745;
    color: white;
}

.bg-danger {
    background-color: #dc3545;
    color: white;
}

/* Tableau */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}






@media screen and (max-width: 600px) {
    nav {
        flex-direction: column;
        padding: 0.5rem;
    }
    .navbar-brand {
        width: 30%;
        margin: auto;
    }
    .infobar {
        font-size: 0.8rem;
        flex-direction: column;
        align-items: center;
        padding: 5px;
    }
    .Titlehead .title {
        font-size: 2rem;
    }
   
  
    .article img {
        width: 100%;
        height: auto;
    }
    footer ul {
        font-size: 0.8rem;
        text-align: center;
    }
    footer .brand img {
        width: 60%;
        margin: auto;
    }
  
    .coolflex {
        display: block;
    }
   
    .Titlehead {
        height: auto;
    }
    
    .formcont{
        position: relative;
        margin-left: 1%;
        margin-right: 1%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        width: 100%;
        padding: 0.5rem;
    }
    .side-img{
        display: none;
    }
 
    .displayn{
        display: none;

    }
    .opimg{
        width: 100%;
    }
    .flextom{
        display: inline-grid!important;
    }
    .flextab{
        display: inline-grid!important;
    }
    .scontent{
        margin: 5% !important;
    }
    .username{
        display: none;
    }
    .wcard{
        width: 100%;
    }
    .title3 {
        font-size: 2rem;
        font-weight: 300;
        line-height: 1.2;
    }
    .tx-2 {
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1.2;
    }

    .mc{
        margin-left: 0;
    }
        .mobilem{
            display: flex;
        }

    .footbar{
        display: grid!important;
        width: 100%;
    }
    .footcol{

        max-width: 100%;
    }
    .be25{
        width: 100%!important;
    }
    .be50{
        width: 100%!important;
    }
    .c25{
        width: 100%!important;
    }
    .c50{
        width: 100%!important;
    }
    .tabcol{

        max-width: 100%;
    }
    .elv{
        width: 36% !important;
    }
    /* .row {

        display: inline;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    } */
    .lab
    {
        font-size: 1rem;
        color: #364B94;
    }
    .col6 {
        width: 70%;
    }
    .lab2
     {
         font-size: 14px;
         margin-bottom: 0;

     }
    .tribox{
        width: 100%;
        height: 160px;

    }
    .carousel-item {
        height: 14em;
    }
    .ptmob{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .trimt{
        margin-top: 30px;

    }
    .trimb{
        margin-bottom: 130px;

    }


    .isbox{
        height: 150px;
        width: 150px;
        object-fit: cover;
    }
    .ibbox{
        height: 300px;
        width: 150px;
        object-fit: cover;
    }
    .lab3
    {
        font-size: 14px;
        margin-bottom: 0;

    }
    .mobox{
        width: 90% !important;

    }
  

}