body {
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif !important;


}

li {
    list-style: none;
    text-decoration: none;

}

a {
    text-decoration: none !important;
    border: none;
    outline: none;
    color: unset !important;
}

a:hover,
a:focus {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    color: #2881AF;
}

li a {
    border: none;
    text-decoration: none;
}


.w100 {
    width: 100%;
}

.topNavbar {
    background-color: #101010;
}

.navbar-contact-info {
    display: flex;
    gap: 20px;
}

.navitems {
    display: flex;
    gap: 15px;

}

.col-auto.cnt {
    background-color: #2881AF;
    padding: 25px 33px;
}

.mainNavBar {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

li.active {
    color: #44B0EE !important;
}

.col-auto.search {
    padding: 24px 30px;
    background: #F6F6F6;
}

ul#menu-menu-1 {
    gap: 54px;
    color: #015CA2;
    font-size: 14px;
    font-weight: 600;
}

a.left--icon {
    height: 86px;
    width: 68px;
    display: flex;
}

.LeftIcon {
    margin-left: 90px;
}

.bgherosection {
    padding: 158px 0;
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/HeroSectionBg.png');
    background-size: cover;
    background-position: center;
    height: 800px;
    width: 100%;
}

.pad70 {
    padding: 70px 0;
}

.socialMedia {
    display: flex;
    width: auto;
    transform: rotate(90deg);
    position: absolute;
    left: 0vw;
    top: 0;
    bottom: 0;
    margin: auto;
    align-items: anchor-center;
}

h2.vertical-heading {
    margin: 0;
    transform: rotate(-180deg);
    font-size: 16px;
}

.socialMedia ul {
    margin: 0;
}

.socialMedia li {
    transform: rotate(-90deg);
}

h4.mini-title {
    color: #2881AF;
    font-weight: bold;
    font-size: 14px;
}

h2.hero-title {
    font-size: 65px;
    font-weight: 600;
}

p.txt {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

/* Container for the action buttons */
.d-flex.action-buttons {
    display: flex;
    gap: 15px;
    /* Space between buttons */
}

/* Style for the blue button */
.blue--button {
    position: relative;
    display: flex;
    align-items: center;
    padding: 7px 19px;
    background-color: #2881AF;
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    border: 1px solid transparent;
    overflow: hidden;
    z-index: 1;
    transition: .3s;
}



.blue--button:hover::before {
    height: 100%;
}

.blue--button:hover {
    color: #1e83ac !important;
    border: 1px solid #1e83ac !important;
}

.whitebtn:hover {
    color: #ffffff !important;
    border: 1px solid #1e83ac !important;
}

.blue--button:hover span {
    position: relative;
    z-index: 9;
}

.blue--button i {
    margin-left: 30px;
    background-color: rgb(255, 255, 255);
    padding: 12px;
    color: #2881AF;
    transition: background-color 0.3s ease, color 0.3s ease;
    transition: .3s;
}

.blue--button:hover i {
    background-color: #1e6187;
    color: #ffffff;
    position: relative;
    z-index: 9;
    transition: .3s;
}

.whitebtn:hover i {
    background-color: #ffffff !important;
    color: #1e6187 !important;
    position: relative;
    z-index: 99999999;
    transition: .3s;
}

/* Optional: style for white version */
/* a.blue--button.whitebtn {
    background-color: #ffffff;
    color: #2881AF !important;
    border: #e8e8e8 0.3px solid;
} */

.whitebtn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 7px 19px;
    background-color: #ffffff;
    color: #2881AF !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    border: none;
    overflow: hidden;
    z-index: 1;
    border: 1px solid #d8d8d885;
}

.whitebtn i {
    margin-left: 30px;
    background-color: #2881AF;
    padding: 12px;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* .whitebtn::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-color: #dfdfdf80;
    z-index: -1;
    transition: height 0.4s ease;
} */

.whitebtn:hover::before {
    height: 100%;
}

.whitebtn:hover i {
    background-color: #ffffff;
    color: #2881AF;
}

.white--button i {
    margin-left: 8px;
}

.secondicon {
    margin-left: 8px;
    margin-left: 30px;
    background-color: #2881AF;
    padding: 12px;
    color: #ffffff;
}

i.fas.fa-arrow-right.whiteicon {
    color: #ffffff;
    background-color: #2881AF;

}


/* Optional: Adding icon size */
.fas.fa-arrow-right {
    font-size: 18px;
}

.d-flex.action-buttons {
    margin-top: 101px;
}


/* about us  */
section.aboutUs--section {
    padding: 70px 0;
}

.aboutUS--title {
    display: flex;
    align-items: center;
    gap: 30px;
    /* Space between the hr and text */
}

.aboutUS--title hr {
    width: 94.01px;
    border: 1.5px solid #2881AF;
    margin: 0;
    opacity: 1;
    flex-shrink: 0;
}

.aboutUS--title h5 {
    font-size: 15px;
    font-weight: 500;
    color: #2881AF;
    margin: 0;
}

i.fa-solid.fa-check.me-2 {
    padding: 12px;
    background-color: #F1F1F1;
    border-radius: 52%;
}

h2.about-title {
    padding: 50px 0 0 0;
    font-size: 40px;
    font-weight: 600;
}

p.about-txt {
    margin-top: 60px;
    color: #74787C;
    font-size: 18px;
    font-weight: 400;
}

.maingoals {
    margin-top: 61px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about--content {
    display: flex;
    flex-direction: row;
    gap: 109px;
}


.owl-item {
    padding: 60px;
    margin-right: unset !important;
}

.item.cardsItem {
    padding: 25px 0;
    border: 1px solid rgb(223, 223, 223);
    text-align: center;
    background: #ffffff00;
    margin-right: unset !important;
}

h4.card-title.ItemsTitle {
    margin: 0px 10px !important;
    bottom: unset;
}

.owl-nav {
    top: 10%;
    position: absolute;
    right: 0;
}

button.owl-prev::before {
    content: "\f060";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    visibility: visible;
    position: absolute;
    top: -17px;
    left: -63px;
    padding: 2px;
    width: 32px;
    height: 32px;
    border: 2.5px solid #015CA2;
    border-radius: 52%;
    color: #015CA2;
}

button.owl-next::before {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    visibility: visible;
    position: absolute;
    top: -17px;
    left: -24px;
    padding: 2px;
    width: 32px;
    height: 32px;
    border: 2.5px solid #015CA2;
    border-radius: 52%;
    color: #015CA2;

}


button.owl-prev {
    visibility: hidden;
    position: relative;
}

button.owl-next {
    visibility: hidden;
    position: relative;
}

.owl-theme.owl-carousel.owl-loaded.owl-drag {
    width: 97%;
}

.owl-item.active {
    padding: 0;
}

.owl-item {
    padding: 0;
}

.owl-theme .owl-nav {
    margin-top: -4%;
}

.card.toggle-card.ItemsContent.active {
    background-color: #2881AF !important;
    color: white;
    padding: 35px 0px;
    text-align: center;
    border-radius: 0;
    border: unset;
    width: 85%;
    margin: auto;
}

.card.toggle-card.ItemsContent {
    background-color: #D3D3D3 !important;
    color: #2881AF !important;
    padding: 35px 0px;
    text-align: center;
    border-radius: 0;
    border: unset;
    width: 85%;
    margin: auto;
}

.card.toggle-card.ItemsContent:hover {
    background-color: #2881AF !important;
    color: #ffffff !important;
}

/* service */
.toggle-card {
    cursor: pointer;
    background-color: #D3D3D3;
    color: #2881AF;
    text-align: center;
    transition: all 0.3s ease-in-out;
    width: 277.25px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 13px 20px;
}

.toggle-card .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
}

.col-lg-6.servicestext {
    z-index: 9999999999999999999999999999;
}

/* Enforcing uniformity on text */
.toggle-card .card-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 0;

    overflow: hidden;
    /* Clips overflowing text */
    text-overflow: ellipsis;
    /* Adds '...' if text is too long */
    max-width: 100%;
}




.toggle-card.active {
    background-color: #2881AF !important;
    color: white !important;
    padding: 13px 20px;
}

a.btn.btn-primary.mb-3.next {
    background-color: #2881AF;
    border: none;
    border-radius: 50%;
}

a.btn.btn-primary.mb-3.previous {
    background-color: #2881AF;
    border: none;
    border-radius: 50%;
    margin-right: 20px !important;
}

i.fa.fa-arrow-right.arrow {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

i.fa.fa-arrow-left.arrow {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}


section.services--section {
    padding: 70px 0;
}

.services--title {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 24px 0px;
}

.services--title hr {
    width: 94.01px;
    border: 1.5px solid #2881AF;
    margin: 0;
    opacity: 1;
    flex-shrink: 0;
}

.services--title h5 {
    font-size: 15px;
    font-weight: 500;
    color: #2881AF;
    margin: 0;
}

i.fa-solid.fa-check.me-2 {
    padding: 12px;
    background-color: #F1F1F1;
    border-radius: 52%;
}

h2.services-title {
    font-size: 36px;
    font-weight: 600;
}

p.services-txt {
    color: #74787C;
    font-size: 16px;
}

img.img-fluid.services {
    max-width: 94%;
}

section.nos--service--section {
    background-color: #F2F2F2;
    position: relative;
    min-height: 300px;
    /* Ensure section has enough height */
    overflow: visible;
    /* Ensure pseudo-element is not clipped */
}

section.nos--service--section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1254px;
    height: 1000px;
    background: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/Image.png') no-repeat;
    background-size: contain;
    background-position: bottom right;
    display: block;
    z-index: 0;
}


i.fa-solid.fa-check.me-2.servicesicons {
    padding: 5px;
}

.maingoals--services {
    margin-top: 31px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.d-flex.action-buttons--services {
    margin-top: 51px;
}

.col-6.text-right {
    z-index: 999999999999999999999999999999999999999999;
}

/* realisation */

.realisation--title {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 24px 0px;

}

.realisation--title hr {
    width: 94.01px;
    border: 1.5px solid #2881AF;
    margin: 0;
    opacity: 1;
    flex-shrink: 0;
}

.realisation--title h5 {
    font-size: 15px;
    font-weight: 500;
    color: #2881AF;
    margin: 0;
}

/* Grid Layout */
/* Grid Layout */
/* .parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 34px;
    grid-row-gap: 27px;
    width: 100%;
    height: 600px;
} */
.blogsContent {
    height: 100%;
}

.divservice1 {
    background-size: cover;
    background-position: center;
    height: 100%;
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/image-26.png');
}

.divservice2 {
    background-size: cover;
    background-position: center;
    height: 100%;
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/image-27.png');
}

.divservice3 {
    background-size: cover;
    background-position: center;
    height: 100%;
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/image-28.png');
}

.divservice1,
.divservice2,
.divservice3 {
    position: relative;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.divservice1:hover,
.divservice2:hover,
.divservice3:hover {
    transform: scale(1.03);
}


.overlay {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 98%;
    background-color: #ffffff;
    color: #74787C;
    padding: 10px 20px;
    font-size: 14px;
    height: 187px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, background 0.3s ease-in-out;
}

.overlay::before {
    width: 60px;
    height: 60px;
    content: "";
    position: absolute;
    background: #dee2e6;
    right: 70px;
    top: 70px;
}

.overlay::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    background: #2881AF;
    top: 0;
    right: 0;
}

.projectName {
    color: #1A1A1A;
    font-size: 16px;
    margin-top: 84px;
    font-weight: bolder;
}

.location {
    color: #2881AF;
    font-size: 14px;

}

.divservice1:hover .overlay,
.divservice2:hover .overlay,
.divservice3:hover .overlay {
    opacity: 1;
}

.realisationtitle {
    font-size: 48px;
    font-weight: 700;
}


.row.d-flex.align-items-center.realisationstart {
    padding: 70px 0;
}

section.mot--d--entreprise {
    padding: 50px 0;
}

.quote {
    font-size: 24px;
    font-weight: lighter;
    color: #1A1A1A;
}

h3.managersName {
    font-size: 16px;
    font-weight: 800;
}

h3.position {
    font-size: 12px;
    font-weight: 500;
    color: #2881AF;
}

.quote {
    font-size: 24px;
    font-weight: lighter;
    color: #1A1A1A;
    padding: 20px 0;
}




/* nos chiffres */

.chiffres--cle {
    background: #171717;
    position: relative;
}

.chiffresBg {}

h2.chiffres--title {
    font-size: 42px;
    font-weight: bold;
    color: white;
    line-height: 160%;
}

.cards {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #212121;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    height: 100%;
}

.cards:hover {
    box-shadow: 0 10px 20px #8e8e8e29;
    transform: translateY(-5px);
}

.container.personaliser {
    max-width: 90% !important;
}

h3.card--title {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}

.card-content {
    padding: 20px;
}

.card-title {
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    margin-top: -22px;
    bottom: 7px;
}

.counter {
    color: white;
    font-size: 36px;
    font-weight: bold;
    margin: -3px 0 0 20px;
}

.counter-container {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

.plus {
    margin-left: 5px;
    color: white;
    font-size: 36px;
    font-weight: bold;
}

.chiffresicon {
    margin-bottom: 12px;
}

img.img-absolute {
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    height: 100%;
    object-fit: cover;
}

.cardblog {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #F6F6F6;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    height: 100%;
}

i.fa-solid.fa-tags {
    margin: 0 0px 1px 10px;
    color: #2881AF;
}

i.fa-solid.fa-calendar-days {
    margin: 0 11px 21px 1px;
    color: #2881AF;
}

h2.blog--title {
    font-size: 21px;
    font-weight: 600;
}

.card-body.blogcontent {
    padding: 19px 40px;
}

a.blue--button.whitebtn.personaliserdisplaybtn {
    gap: 49%;
    margin-top: 32px;
}

.OurBLogsTitle {
    text-align: center;
    padding: 16px 0px 26px 0;
    font-size: 46px;
    font-weight: 900;
}




footer {
    position: relative;
    z-index: 1;
}







/* footer */
.pg-gray {
    background: #171717;
    color: #74787C;
}

footer .txt {
    color: #74787C;
}

ul.footer--links li::marker {
    content: ">>";
    letter-spacing: -4px;
    font-weight: bold;
}

ul.footer--links {
    padding: 0;
}

ul.footer--links li {
    padding-left: 15px;
}

h2.footer-title {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

ul.footer--links a {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    display: block;
    line-height: 42px;
}

input.subscription {
    background: transparent;
    outline: none;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 3px;
    color: #fff;
}

.subscription--btn {
    color: #fff;
    background: #2881AF;
    border: 0;
    padding: 10px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

input.subscription::placeholder {
    color: #fff;
}

ul.resaux--soc {
    display: flex;
    padding: 0;
    gap: 5px;
}

ul.resaux--soc li {
    background: #292929;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    padding-top: 4px;
}

.copyright {
    background-color: #f8f9fa;
    /* light gray background */
    color: #6c757d;
    /* muted text color */
    font-size: 14px;
    border-top: 1px solid #dee2e6;
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.sticky-box {
    position: sticky;
    top: 0;
    /* distance from the top of the viewport */
    background-color: white;
    z-index: 1000;
    /* optional, to stay above other content */
}

button.btn.cntcBtn {
    background-color: unset !important;
    color: white;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


ul.d-flex.socials {
    li:hover {
        color: #2881AF;
    }
}


a.blue--button::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 42px;
    background: #fff;
    right: 18px;
    opacity: 0;
    transition: .3s;
}

a.blue--button:hover::after {
    width: 100%;
    height: 100%;
    right: 0;
    opacity: 1;
    transition: .3s;
}

a.whitebtn::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 42px;
    background: #2881AF;
    right: 18px;
    opacity: 0;
    transition: .3s;
}

a.whitebtn:hover::after {
    width: 100%;
    height: 100%;
    right: 0;
    opacity: 1;
    transition: .3s;
}



.owl-theme .owl-dots .owl-dot.active span {
    background: #2881AF !important;
}

/* Outer background layer (under the white panel) */
.hrbg {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background-color: #000000d7;
    z-index: 1045;
    display: none;
}

/* Panel with white background */
.offcanvas-panel {
    position: absolute;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 30%;
    background-color: white;
    z-index: 1050;
    transition: right 0.4s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

/* When open */
.hrbg.show {
    display: block;
}

.offcanvas-panel.open {
    right: 0;
}

.whitebtn span {
    z-index: 99999999;
    position: relative;
}

section.hero--section.bgherosection.pad70.reveal.active {
    display: flex;
    align-items: anchor-center;
}

.offcanvas-content {
    padding: 0 50px;
    top: 10%;
    position: relative;
}

.offcanvas-content {
    padding: 0 50px;
    top: 10%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 33px;
}

.hrtravail h4 {
    font-size: 21px;
    font-weight: 700;
}

.close-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 19px;
    background-color: #2881AF;
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    border: 1px solid transparent;
    overflow: hidden;
    z-index: 1;
    top: 3%;
    left: -9.1%;
}

body.no-scroll {
    overflow: hidden;
}

.left--icon:hover img {
    transform: scale(1.1);
}

.hrbg {
    animation: open-animation 2s forwards;
    scroll-behavior: smooth;
}


/* a propos de nous l'entreprise */

.bgsectionpages {
    padding: 158px 0;
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/Group-38275.png');
    background-size: cover;
    background-position: center;
    width: 100%;
}

h2.titlesectionpages {
    font-size: 64px;
    font-weight: 100;
}

h2.titlesectionpages span {
    font-weight: 400;
}

img.overlay-image {
    position: absolute;
    left: -10%;
    z-index: 99;
    bottom: -35%;
    width: 337px;
}

.list {
    margin-top: 37px;
    font-size: 16px;
    font-weight: 600;
    padding-left: 0;
}

.video-container {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.video-container video {
    width: 100%;
    height: auto;
    z-index: 1;
    position: relative;
}


h2.aboutUs--title.mb-5 {
    font-size: 49px;
    color: white;
    line-height: 160%;
    font-weight: 100;

}

h2.aboutUs--title.mb-5 span {

    font-weight: bold;

}

.cartes {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.bluetext {
    color: #2881AF !important;
}

h2.methode--title.mb-5 {
    font-size: 55px;
    font-weight: 100;
    color: #292929;
    margin-top: 44px;
}

h2.methode--title.mb-5 span {
    font-size: 49px;
    font-weight: bold;
    color: #292929;
}

h6.methode--paragraph.mb-5 {
    font-size: 16px;
    font-weight: 100;
    color: #81848A;
    padding: 0px 49px;
    margin-top: 80px;
}

.carteprocess {
    min-height: 121px;
    border: 1px solid #44B0EE;

    div {
        span {

            font-size: 50px;
            font-weight: 200;
            color: #44B0EE;

        }

        div {
            h5 {
                color: #292929;
            }

            p {
                color: #81848A;
            }
        }
    }
}

.col-lg-6.processcontent {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.carteprocess:hover {
    background-color: #44B0EE;

    div {
        span {
            color: #ffffff;

        }

        div {
            h5 {
                color: #ffffff;
            }

            p {
                color: #ffffff;
            }
        }
    }
}

.answer {
    color: #81848A;
}

.breadcrumb {
    background-color: unset !important;
}

li.breadcrumb-item {
    color: #8F8F8F;
    font-weight: 800;
}

.breadcrumb-item.active {
    color: #0C6491 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0C6492;
    margin: 8px 0.5rem;
    vertical-align: middle;
}


section.FAQs::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56%;
    height: 100%;
    background: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/about-us-bg-img-1.png') no-repeat;
    background-size: contain;
    background-position: bottom right;
    display: block;
    z-index: -9999999999999999;
}

section.PresentationDepartement::after {
    content: "";
    position: absolute;
    bottom: -111%;
    right: 0;
    width: 56%;
    height: 100%;
    background: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/about-us-bg-img-1.png') no-repeat;
    background-size: contain;
    background-position: bottom right;
    display: block;
    z-index: -9999999999999999;
}

/* departements */
.departementrightside {
    margin-top: 5%;
}

.departementrightside {
    position: relative;
}


h3.fw-bold.bgcontenusdepartement {
    font-size: 20px;
    padding: 0 33px;
}

p.paragraph20px {
    font-size: 20px;
    padding: 0px 27px;
}

.btnnn {
    padding: 0px 27px;
}

.departementrightside {
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/Group-38309.png');
    background-repeat: no-repeat;
    background-size: contain;

}

.deprtImage {
    margin-top: -70px;
}

.btmleftbtn {
    margin-left: auto;

    float: right;
}

.listdprtpragraph {
    color: #6c757d !important;
}

section.FAQs::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56%;
    height: 100%;
    background: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/about-us-bg-img-1.png') no-repeat;
    background-size: contain;
    background-position: bottom right;
    display: block;
    z-index: -9999999999999999;
}

.col-lg-8.dprtsList.mt-5 .card {
    margin-bottom: 12%;
}

.overlay-text.position-absolute.departementContenus.text-white {
    padding-top: 92vh;
}

li.dropdown:hover ul {
    display: block;
    transition: .3s;
}

ul.dropdown-menu.depth_0 {
    width: 250px;
    border: 1px solid lightgray;
    border-radius: 0;
    background: #fff;
}

ul.dropdown-menu.depth_0 li {
    padding: 2px 4px;
}

ul.dropdown-menu.depth_0 li:hover {
    background-color: #2881AF;
}

ul.dropdown-menu.depth_0 li:hover a {
    color: white;
}

ul.dropdown-menu.depth_0 li a {
    font-size: 12px;
    padding: 10px 4px;
    font-weight: 400;
    color: #333;
    line-height: 35px;
    transition: .3s;
}

.textrealisations {
    color: #292929;
    font-weight: 500;
    line-height: 32px;
}

.realisationbtn {
    border: 0;
    width: 33.93px;
    height: 33.93px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.allrealisation {
    width: 60%;
    height: 100%;
}

a.list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center.py-3.px-4.mb-4 {
    border: 0;
    background-color: #F0F1F5;
    width: 100%;
    color: #292929 !important;
}

a.list-group-item.list-group-item-action.d-flex.justify-content-between.align-items-center.py-3.px-4.mb-4.active {

    color: #ffffff !important;
}

.col-lg-8.ImageDeRealisation {
    background-color: #FAFAFA;
    /* border: 10px; */
}


#sync1 {
    .item {
        padding: 20px 0px;
        margin: 18px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }
}

#sync2 {
    .item {
        background: #f5f5f5;
        padding: 10px 0px;
        margin: 5px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
    }

}



.owl-theme {
    .owl-nav {
        [class*='owl-'] {
            transition: all .3s ease;

            &.disabled:hover {
                background-color: #D6D6D6;
            }
        }

    }
}

#sync1.owl-theme {
    position: relative;

    .owl-next,
    .owl-prev {
        width: 22px;
        height: 40px;
        margin-top: -20px;
        position: absolute;
        top: 50%;
    }

    .owl-prev {
        left: 10px;
    }

    .owl-next {
        right: 10px;
    }
}



.backgroundContact {
    background-image: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/Group-38309-1.png');
    background-repeat: no-repeat;
    background-size: cover;
    /* better than contain for full section bg */
    background-position: center;
    min-height: 400px;
    position: relative;
}

.overlay-textt {
    top: 50%;
    left: 56%;
    transform: translateY(-50%);
}


.contactbackgroundallpages {
    padding-top: 4%;
}



button.mali-button {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding-top: 10px;
}

.mali-button {
    all: unset;
    cursor: pointer;
    width: 100px;
    /* height: 66%; */
    position: relative;
    background: #E9EBF4;
    border-right: 2px solid rgba(0, 91, 161, 0.37);
    margin-left: 5px;
    position: relative;
}



.label {
    transform: rotate(-90deg);
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 25px;
    font-weight: 275;
    color: #0C6492;
    margin-top: 15vh;

    /* line-height: 32px;
    word-wrap: break-word;
    width: 500px; */
}

.flag-container .flag img {
    width: 68px;
    height: 68px;
    margin-left: 16px;

}

svg.flagsvg {
    width: 45px;
    height: 45px;
}

button.mali-button.active {
    background: #0C6492 !important;

    .label {
        color: #fff;
    }
}

.col-lg-7.prestationsText {
    background-color: #fafafa;
}


.align-self-start {
    align-self: flex-start !important;
}

.fiche-projet-wrapper {
    /* width: 831px; */
    /* height: 815px; */
    background: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fiche-projet-container {
    /* width: 745px;
    height: 584px; */
    background: white;
    border-radius: 15px;
    border: 1px solid rgba(129, 132, 138, 0.25);
    padding: 2rem;
    position: relative;
    width: 95%;
}

.fiche-projet-close-btn {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
}

.fiche-projet-close-btn.grey {
    background-color: #BCBCBC;
    right: 60px;
}

.fiche-projet-close-btn.blue {
    background-color: #0C6492;
}

.fiche-projet-close-btn.rotated {
    transform: rotate(180deg);
    transform-origin: top left;
}

.fiche-projet-title {
    width: 646px;
    margin-bottom: 1rem;
    color: black;
    font-size: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.fiche-projet-description {
    width: 632px;
    margin-bottom: 1.5rem;
    color: black;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.fiche-projet-image {
    width: 753px;
    height: 374px;
    object-fit: cover;
}


body>section.prestationContent.reveal.pad70.active>div>div>div.col-lg-8.prestationsText>div>div>div.owl-nav {
    margin-top: -1%;
    right: 8%;
}


.fiche-projet-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56%;
    height: 100%;
    background: url('https://diplomate.asa-techno.com/wp-content/uploads/2025/04/about-us-bg-img-1.png') no-repeat;
    background-size: contain;
    background-position: bottom right;
    display: block;
    z-index: 9999999999999999;
}

.contacticon {
    border: 1px solid #d7d7d7;
    padding: 20px;
    border-radius: 35%;
    color: #d7d7d7;
}

.contacticon:hover {
    color: #0C6492 !important;
}


.labelform {
    font-family: 'Poppins';
    color: #015ca2;
    font-size: 16px;
    font-weight: 530;

    span {
        color: #a20101;
    }
}

.form-control {}

#search-container {
    position: relative;
}

#close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
}

.WhyUs {
    background-color: #F2F2F2;
}

.section_our_solution .row {
    align-items: center;
}

.our_solution_category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.our_solution_category .solution_cards_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solution_cards_box .solution_card {
    flex: 0 50%;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
        0 5px 15px 0 rgba(37, 44, 97, 0.15);
    border-radius: 15px;
    margin: 8px;
    padding: 10px 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 265px;
    transition: 0.7s;
}

.solution_cards_box .solution_card:hover {
    background: #015CA2;
    color: #fff;
    transform: scale(1.1);
    z-index: 9;
}

.solution_cards_box .solution_card:hover::before {
    background: rgb(85 108 214 / 10%);
}

.solution_cards_box .solution_card:hover .solu_title h3,
.solution_cards_box .solution_card:hover .solu_description p {
    color: #fff;
}

.solution_cards_box .solution_card:before {
    content: "";
    position: absolute;
    background: #015ca205;
    width: 170px;
    height: 400px;
    z-index: -1;
    transform: rotate(42deg);
    right: -56px;
    top: -23px;
    border-radius: 35px;
}

.solution_cards_box .solution_card:hover .solu_description button {
    background: #fff !important;
    color: #309df0;
}

.solution_card .so_top_icon {}

.solution_card .solu_title h3 {
    color: #212121;
    font-size: 1.3rem;
    margin-top: 13px;
    margin-bottom: 13px;
}

.solution_card .solu_description p {
    font-size: 15px;
    margin-bottom: 15px;
}

.solution_card .solu_description button {
    border: 0;
    border-radius: 15px;
    background: linear-gradient(140deg,
            #42c3ca 0%,
            #42c3ca 50%,
            #42c3cac7 75%) !important;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    padding: 5px 16px;
}

.our_solution_content h1 {
    text-transform: capitalize;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.our_solution_content p {}

.hover_color_bubble {
    position: absolute;
    background: rgb(54 81 207 / 15%);
    width: 100rem;
    height: 100rem;
    left: 0;
    right: 0;
    z-index: -1;
    top: 16rem;
    border-radius: 50%;
    transform: rotate(-36deg);
    left: -18rem;
    transition: 0.7s;
}

.solution_cards_box .solution_card:hover .hover_color_bubble {
    top: 0rem;
}

.solution_cards_box .solution_card .so_top_icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution_cards_box .solution_card .so_top_icon img {
    width: 40px;
    height: 50px;
    object-fit: contain;
}

/*start media query*/
@media screen and (min-width: 320px) {
    .sol_card_top_3 {
        position: relative;
        top: 0;
    }

    .our_solution_category {
        width: 100%;
        margin: 0 auto;
    }

    .our_solution_category .solution_cards_box {
        flex: auto;
    }
}

@media only screen and (min-width: 768px) {
    .our_solution_category .solution_cards_box {
        flex: 1;
    }
}

@media only screen and (min-width: 1024px) {
    .sol_card_top_3 {
        position: relative;
        top: -3rem;
    }

    .our_solution_category {
        width: 50%;
        margin: 0 auto;
    }
}

.ImagWidth {
    width: 100%;
}




/* caarddss */


.dark {
    background: #110f16;
}


.light {
    background: #f3f5f7;
}

a,
a:hover {
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

#pageHeaderTitle {
    margin: 2rem 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5rem;
}

/* Cards */
.postcard {
    flex-wrap: wrap;
    display: flex;

    box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
    border-radius: 10px;
    margin: 0 0 2rem 0;
    overflow: hidden;
    position: relative;
    color: #ffffff;

    &.dark {
        background-color: #18151f;
    }

    &.light {
        background-color: #e1e5ea;
    }

    .t-dark {
        color: #18151f;
    }

    a {
        color: inherit;
    }

    h1,
    .h1 {
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .small {
        font-size: 80%;
    }

    .postcard__title {
        font-size: 1.75rem;
    }

    .postcard__img {
        max-height: 180px;
        width: 100%;
        object-fit: cover;
        position: relative;
    }

    .postcard__img_link {
        display: contents;
    }

    .postcard__bar {
        width: 50px;
        height: 10px;
        margin: 10px 0;
        border-radius: 5px;
        background-color: #ffffff;
        transition: width 0.2s ease;
    }

    .postcard__text {
        padding: 1.5rem;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .postcard__preview-txt {
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        height: 100%;
    }

    .postcard__tagbox {
        display: flex;
        flex-flow: row wrap;
        font-size: 14px;
        margin: 20px 0 0 0;
        padding: 0;
        justify-content: center;

        .tag__item {
            display: inline-block;
            background: rgba(83, 83, 83, 0.4);
            border-radius: 3px;
            padding: 2.5px 10px;
            margin: 0 5px 5px 0;
            cursor: default;
            user-select: none;
            transition: background-color 0.3s;

            &:hover {
                background: rgba(83, 83, 83, 0.8);
            }
        }
    }

    &:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(-70deg, #424242, transparent 50%);
        opacity: 1;
        border-radius: 10px;
    }

    &:hover .postcard__bar {
        width: 100px;
    }
}

@media screen and (min-width: 769px) {
    .postcard {
        flex-wrap: inherit;

        .postcard__title {
            font-size: 2rem;
        }

        .postcard__tagbox {
            justify-content: start;
        }

        .postcard__img {
            max-width: 300px;
            max-height: 100%;
            transition: transform 0.3s ease;
        }

        .postcard__text {
            padding: 3rem;
            width: 100%;
        }

        .media.postcard__text:before {
            content: "";
            position: absolute;
            display: block;
            background: #18151f;
            top: -20%;
            height: 130%;
            width: 55px;
        }

        &:hover .postcard__img {
            transform: scale(1.1);
        }

        &:nth-child(2n+1) {
            flex-direction: row;
        }

        &:nth-child(2n+0) {
            flex-direction: row-reverse;
        }

        &:nth-child(2n+1) .postcard__text::before {
            left: -12px !important;
            transform: rotate(4deg);
        }

        &:nth-child(2n+0) .postcard__text::before {
            right: -12px !important;
            transform: rotate(-4deg);
        }
    }
}

@media screen and (min-width: 1024px) {
    .postcard__text {
        padding: 2rem 3.5rem;
    }

    .postcard__text:before {
        content: "";
        position: absolute;
        display: block;

        top: -20%;
        height: 130%;
        width: 55px;
    }

    .postcard.dark {
        .postcard__text:before {
            background-color: #015CA2;
        }
    }

    .postcard.light {
        .postcard__text:before {
            background-color: #015CA2;
        }
    }
}
section.postcard.light {
    background-color: #015ca2;
}
/* COLORS */
.postcard .postcard__tagbox .green.play:hover {
    background: #015CA2;
    color: black;
}

.green .postcard__title:hover {
    color: #015CA2;
}

.green .postcard__bar {
    background-color: #015CA2;
}

.green::before {
    background-image: linear-gradient(-30deg,#015CA2,transparent 50%);
}

.green:nth-child(2n)::before {
    background-image: linear-gradient(30deg, #015CA2, transparent 50%);
}

.postcard .postcard__tagbox .blue.play:hover {
    background: #015CA2;
}

.ImageCategory{
    width: 38%;
}


@media (max-width: 974px) {
  .chiffresbgg {
    display: none !important;
  }
}
.activee {
    background-color: #2881af !important;
    color: white !important;
}