.card {
    box-shadow: -1px 4px 7px rgba(100, 100, 100, 0.4) !important;
    border-radius: 11px !important;

}
.card.section-formation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FCE6DC;
    border-radius: 15px;
    transform: rotate(2deg);
    z-index: -1;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
.section-formation i {
    color: #EE6F35 !important;
}
#date-foramtion {
    color: #EE6F35;
    font-weight: 900;
    font-size: 13px !important;
    position: absolute;
    bottom: 0;
}
button.btn-slider-text-detail {
    position: absolute;
    right: 28px;
    bottom: 17px;
    padding: 4px 30px;
}
@media(max-width : 991px) {

    button.btn-slider-text-detail {

        right: 5px;
        padding: 4px 16px;
    }
    .container  {
max-width: fit-content;
}

}

.card-img-top{
    height: 38% !important;
}
.container  {
max-width: fit-content;
  padding: 0 9%;
}
.section-formation .card-body p.card-text {

  padding-bottom: 79%;
}

.card-body {
    flex: 1 1 auto;
    padding: 4rem 2rem;
}

.card {
    padding: 0 !important;
}
.card.section-formation::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FCE6DC;
   border-radius: 15px;
   transform: rotate(2deg);
   z-index: -1;
   box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
   -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
#date-foramtion {
   color: #EE6F35;
   font-weight: 900;
   font-size: 13px !important;
   position: absolute;
   bottom: 0;
 
}
article {
   --img-scale: 1.001;
   --title-color: black;
   --link-icon-translate: -20px;
   --link-icon-opacity: 0;
   position: relative;
   border-radius: 16px;
   background: #fff;
   transform-origin: center;
   transition: all 0.4s ease-in-out;
   overflow: hidden;
   -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

article a::after {
 position: absolute;
 inset-block: 0;
 inset-inline: 0;
 cursor: pointer;
 content: "";
}

/* basic article elements styling */
article h2 {
 margin: 0 0 18px 0;
 font-family: "Bebas Neue", cursive;
 font-size: 1.9rem;
 letter-spacing: 0.06em;
 color: var(--title-color);
 transition: color 0.3s ease-out;
}

figure {
 margin: 0;
 padding: 0;
 aspect-ratio: 16 / 8;
 overflow: hidden;
}

article img {
 max-width: 100%;
 transform-origin: center;
 transform: scale(var(--img-scale));
 transition: transform 0.4s ease-in-out;
}

.article-body {
 padding: 24px;
}

article a {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
 color: #28666e;
}

article a:focus {
 outline: 1px dotted #28666e;
}

article a .icon {
 min-width: 24px;
 width: 24px;
 height: 24px;
 margin-left: 5px;
 transform: translateX(var(--link-icon-translate));
 opacity: var(--link-icon-opacity);
 transition: all 0.3s;
}

/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
 --img-scale: 1.1;
 --title-color: #28666e;
 --link-icon-translate: 0;
 --link-icon-opacity: 1;
 box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


/************************ 
Generic layout (demo looks)
**************************/

*,
*::before,
*::after {
 box-sizing: border-box;
}


.articles {
 display: grid;
 max-width: 80%;
 margin-inline: auto;
 padding-inline: 0;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 24px;
}

@media screen and (max-width: 960px) {
 article {
   container: card/inline-size;
 }
 .article-body p {
   display: none;
 }
}
@media  (min-width: 1200px )  {
 
   .articles { 
       max-width: 100% !important;
   }
   }
@container card (min-width: 380px) {
 .article-wrapper {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 16px;
 }
 .article-body {
   padding-left: 0;
 }
 figure {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 figure img {
   height: 100%;
   aspect-ratio: 1;
   object-fit: cover;
 }
}

.sr-only:not(:focus):not(:active) {
 clip: rect(0 0 0 0); 
 clip-path: inset(50%);
 height: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap; 
 width: 1px;
}

.section-services {
    position: fixed !important;
    bottom: 0;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
    padding: 123% 36%;
    background-size: contain !important;
}