/***** banner *****/
.banner                             { position: relative; z-index: 1; padding-top: 150px; background: var(--beige); padding-bottom: 70px;}
.banner_grid                        { display: grid; grid-template-columns: 50% 50%; align-items: center;}
.banner_grid .image                 { padding-left: 80px; position: relative; margin-bottom: 60px;}
.banner_grid .image img             { max-height: 635px; display: block; object-fit: cover;}
.banner_grid .image::before          { content: ""; background-color: var(--main-color); width: 80%; height: calc(100% - 95px); bottom: 1px; left: 0; position: absolute; border-radius: 90px;}
.banner_grid .image::after         { content: url(../images/deco_left.svg); position: absolute; bottom: -60px; left: 65px; z-index: 20;}
.banner_grid .image img             { border-radius: 90px;}
.banner .ul_list                    { margin: 25px 0 35px; }
.banner .ul_list li                 { font-size: 18px; font-weight: 500; background-size: auto; background-position: left center; padding-left: 45px;}
.banner .titre_main                 { margin-bottom: 10px;}
.banner .slider                     { position: relative; z-index: 1;  border-radius: 90px; overflow: hidden;}
.banner .slider img                 { width: 100%; height: 710px; object-fit: cover; display: block;}
.banner .swiper-pagination          { bottom: -40px;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #E58830; width: 15px; height: 15px; position: relative; top: 2px;}
.banner .swiper-pagination-bullet   { background-color: #0F307A; width: 10px; height: 10px; opacity: 1;}
.banner .swiper-pagination          { margin-left: 40px;}

.sous_titre                         { margin-bottom: 15px;  font-size: 48px; line-height: 58px;}

@media (max-width:1200px) {
.banner_grid .image                 { padding-left: 60px;}  
.banner                             { padding-top: 120px; }
.banner .texte                      { padding-right: 30px;}
.banner .slider img                 { height: 520px; }
}
@media (max-width:1200px) and (min-width:600px) {
.banner_grid .image::after          { transform: scale(0.8); transform-origin: left; left: 40px; }
}
@media (max-width:1000px) {
.banner                             { padding-bottom: 100px;}
.banner_grid                        { grid-template-columns: 100%; gap: 20px;}
.banner_grid .image                 { grid-area: 1;}
.banner .texte                      { padding:0}
.banner_grid .image img,
.banner .slider                     { border-radius: 40px;}
.banner_grid .image::before         { border-radius: 40px;}
}
@media (max-width:600px) {
.banner                             { padding-top: 100px;}
.banner                             { padding-bottom: 70px;}

.banner_grid                        { gap: 20px;}
.banner_grid .image                 { margin-bottom: 30px;}
.banner_grid .image::after          { content: url(../images/deco_left_small.svg); bottom: -30px; left: 30px;}
.banner .swiper-pagination          { margin-left: 30px; bottom: -35px;}
.banner .ul_list li                 { font-size: 16px; background-size: 16px; background-position: left center; padding:0 0 0 30px;}
.banner .ul_list                    { margin: 20px 0 25px;}
.banner .slider img                 { height: 75vw;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 12px;height: 12px;top: 1px;}
.banner .swiper-pagination-bullet   { width: 9px; height: 9px;}
.banner .link                       { width: 100%;}
}


/***** intro *****/
.intro                              { margin: 100px 0;}
@media (max-width:1000px) {
.intro                              { margin: 50px 0;}
}
@media (max-width:600px) {
.intro                              { margin: 40px 0;}
}



/***** services *****/
.services                           { position: relative; margin: 100px 0;}
.service_slide                      { margin-top: 50px; position: relative; }
.service .texte                     { padding-right: 200px;}
.service_slide .swiper-slide img    { display: block; width: 100%; height: auto; border-radius: 50px; object-fit: cover;}    

.service_slide .swiper-slide        { position: relative; overflow: hidden; max-width: 350px; padding-bottom: 70px; }  
.service_slide .titre               { display: block; font: 600 20px/24px "Syne"; color: var(--main-color); text-align: center; position: absolute; transition: all ease-in-out 400ms; width: 100%; margin-top: 15px; top: calc(100% - 70px); z-index: 20;}    
.service_slide .swiper-slide:after { content: ""; background: rgba(229, 136, 48, 0.91); width: 100%; height: calc(100% - 70px); position: absolute; left: 0; top: 0; border-radius: 50px; opacity: 0;}
.slide-btn                          { position: absolute; width: 130px; height: 130px; background-color: var(--second-color); border-radius: 50%; right: 0; top: -100px;}
.slide-btn .swiper-button-next:after,
.slide-btn .swiper-button-prev:after { font-size: 24px; color: var(--white);}
.slide-btn .swiper-button-prev      { left: 35px;}
.slide-btn .swiper-button-next      { right: 35px;}   
@media (min-width:1201px) {
.services .hide                     { transition: all ease-in-out 400ms;}
.services .item:hover .hide         { opacity: 1;}
.service_slide .swiper-slide:hover:after{ opacity: 1;}
.service_slide .swiper-slide:hover .titre{ top: calc(50% - 60px); color: var(--white);}
}
@media (max-width:1200px) {
.services .texte                    { padding: 0;}
.services .hide                     { display: none;}
}
@media (max-width:1000px) {
.service                           { margin: 70px 0;}
.service .texte                    { padding: 0;}
.swiper-scrollbar-drag              { background: var(--second-color); height: 2px; border-radius: 0;}
.scrollbar                          { background-color: rgba(15, 48, 122, 0.2); margin-top: 30px;}
.service_slide .swiper-slide        { max-width: 300px;}
.service_slide .swiper-slide img    { min-height: 200px; width: 100%; border-radius: 20px;}
.slide-btn                          { display: none;}
.service_slide                      {margin-top: 30px;}
}
@media (max-width:600px) {
.service                            { margin: 40px 0;}
.service .texte                     { display: none;}
.service_slide .swiper-slide        { max-width: 200px; padding-bottom: 35px;}
.service_slide .swiper-slide img    { min-height: 200px;}
.service_slide .titre               { font-size: 16px; line-height: 26px; top: calc(100% - 40px);}
.scrollbar                          { margin-top: 10px;}
.service_slide                      { margin-top: 20px;}
}


/***** apropos *****/
.apropos                            { position: relative; padding: 150px 0; color: var(--white);}
.apropos:before                     { content: ""; background: url(../images/apropos_bg.webp) no-repeat top #0E224D; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-size: cover;}
.apropos .sous_titre                { color: var(--white);}
.apropos_grid                       { display: grid; grid-template-columns: 1fr 1fr; align-items: start; position: relative;}
.apropos_grid .texte_bg::after      { content: url(../images/deco_right.svg); bottom: -70px; right: -60px; position: absolute;}
.apropos_grid .texte_bg p:not(:last-child){ margin-bottom: 25px;}
.apropos_grid .link                 { margin-top: 20px;}
.apropos_grid .texte_bg             { position: relative; background-color: var(--white); padding: 40px 35px; border-radius: 40px; color: var(--black); margin-left: 100px;}
.apropos .texte_bg .s_titre         { color: #E58830; font-weight: 600; font-size: 20px; margin-bottom: 10px;}



.types                              { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 125px 0; }
.types .item                        { display: grid; text-align: center; gap: 15px; justify-items: center; font-size: 18px; font-weight: 700; line-height: 25px;}

@media (max-width:1200px) {
.apropos_grid .texte_bg              { margin-left: 60px;}
.apropos_grid .texte_bg::after       { transform: scale(0.8); transform-origin: right center; right: -30px;}
.types                               { margin: 100px 0;}
}
@media (max-width:1000px) {
.apropos                             { padding: 80px 0 110px;}
.apropos_grid                        { grid-template-columns: 1fr; gap: 30px;}
.sous_titre                          { font-size: 36px; line-height: 46px;}
.apropos_grid .texte_bg              { margin: 0; border-radius: 20px;}
.types .item                         { font-size: 16px; line-height: 26px;}

}
@media (max-width:768px) {
.types                               { grid-template-columns: 1fr 1fr; gap: 30px;}
.types .item:nth-child(1)            { grid-area: 1 / 1 / 3 / 3;}

}

@media (max-width:600px) {
.sous_titre                          { font-size: 28px; line-height: 35px;}
.apropos_grid .texte_bg::after       { transform: scale(0.33); transform-origin: right center; right: -15px; bottom: -85px;}
.apropos_grid .texte_bg              { padding: 30px;}
.apropos:before                      { background-image: url(../images/apropos_bg_mobile.webp);}
.apropos .texte_bg .s_titre          { font-size: 18px; line-height: 28px; margin-bottom: 10px;}
.types                               { grid-template-columns: 1fr; gap: 30px; margin: 65px 0 50px; }
.poste                               { grid-template-columns: 1fr;}
.types .item:nth-child(1)            { grid-area: auto;}
.types .item img                     { transform: scale(0.6);}
.types .item                         { gap: 5px;}

}