/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 25 2022 | 02:40:01 */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@300&display=swap');


:root{
    --fs-title-- : 20px;
    --fs-subtitle-- : 14px;
}

.raisons-slides::before {
    content: '';
    width: 755px;
    height: 100px;
  	margin-left:5%;
  	margin-left:5%;
    background-image: url("http://fesmeknesinvest.ma/wp-content/themes/cri/assets/images/line-process2.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 17%;
    left: 43%;
    -webkit-transform: translate(-50%, 0);
    -khtml-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 0;
}


.raison-fields:hover .raisons-order {
  background-color: rgba(81, 82, 81, .3);
  color: #fff;
}

.raison-fields:hover .reason-icon {
    background-color: #dc3545 !important;
}
.reason-icon.active{
  background-color: #dc3545 !important;
}
.raison-fields:hover .reason-icon::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 13px;
    top: 13px;
    display: block;
    width: 80%;
    height: 80%;
    background-color: rgba(203, 36, 42, 0.8);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    z-index: -1;
}
.reason-icon.active::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 13px;
    top: 13px;
    display: block;
    width: 80%;
    height: 80%;
    background-color: rgba(203, 36, 42, 0.8);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    z-index: -1;
}

.slide-item, .raisons-order {
    -webkit-transition: all 200ms linear 0ms;
    -khtml-transition: all 200ms linear 0ms;
    -moz-transition: all 200ms linear 0ms;
    -ms-transition: all 200ms linear 0ms;
    -o-transition: all 200ms linear 0ms;
    transition: all 200ms linear 0ms;
}
.raisons-order {
  	border-radius: 50%;
    position: absolute;
    top: -9px;
    left: -7px;
    padding: 11px 8px;
  	font-size: 14px;
  	color: #fff;
    background-color: rgba(81, 82, 81, 1);
    line-height: .2;
  	font-weight: 600;
}

.reason-icon {
    background-color: #284180 ;
    transition: background-color 0.5s ease;
    ;
}


.modal-container {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  	z-index:1111;
  	cursor: pointer;
}


.modal-container.show {
    opacity:1;
    pointer-events: auto;
}


.modal-container.show .custom-modal {
    transform: translateY(0);
}


.custom-modal {
    background-color: #fff;
    width: 800px !important;
    max-width: 90%  !important;
    height: 500px  !important;
    border-radius: 20px;
    position: relative;
    /*border: 2px #284180 solid;*/
  	box-shadow: 5px 10px 18px #888888;
    transform: translateY(70%);
    transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    
}

.cri-modal-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cri-modal-content::-webkit-scrollbar * {
  background:transparent;
}

.cri-modal-content::-webkit-scrollbar-thumb {
   background:rgba(255,0,0,0.1) !important;
}



.circle-close {
    height: 40px;
    width: 40px;
    border: 1px #284180 solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
    top: -20px;
    right: -20px;
    background-color: #fff;
  z-index:5
}


.circle-close i {
    font-size: 20px;
}
#raisons-swiper {
  height: 600px !important;
}
.slick-slide{
  transition: margin 2000ms cubic-bezier(0.215, 0.610, 0.355, 1.000);;
}
#raisons-swiper .slick-slide:nth-child(even) {
    margin-top: 50px;
}
#raisons-swiper .slick-slide:nth-child(odd) {
    margin-top: 50px;
}

.raison-fields {
    padding: 32px 16px 0;
}

.raison-fields .title-font {
	color: #274080;
    font-size: 22px !important;
  	line-height: 26px !important;
  	font-weight: 700 !important;
  	text-align: center;
}

.raison-fields .sub-title {
    font-size: 16px !important;
    line-height: 26px !important;
  	font-weight: 400 !important;
    color: #000 !important;
  	font-family: 'Roboto', sans-serif !important;
    margin-bottom: 15px;
}

.raison-fields .see_more {
    font-size: 15px;
    color: #565a5c !important;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;  
}

.raison-fields .btn {
	width: 50px !important;
    height: 50px !important;
  
}

.raison-fields .see_more:hover {
  text-decoration: underline;
}

button#rs-next, button#rs-prev {
    padding-right: 15px !important;
}

button#rs-next:focus, button#rs-prev:focus {
	outline: 0 !important;
  	border: 0 !important;
}

/* .modal-bg{
    height: 100%;
    width: 100%;
    background-image: url(../images/bg_overlay.png);
    background-repeat: no-repeat;
} */

html[dir="rtl"] .slick-slider.raisons-slides .slick-track, html[dir="rtl"] .slick-slider.raisons-slides .slick-list {
    direction: ltr !important;
}
.item--description {
    height: 428px !important;
}
/* rtl style */
[dir='rtl'] .slick-slide { float: left; }

html[dir="rtl"] button#rs-prev {
    left: 100% !important;
}

html[dir="rtl"] button#rs-next {
    right: 100% !important;
}

html[dir="rtl"] button#rs-next i , html[dir="rtl"] button#rs-prev i{
    transform: rotate(180deg);
}
/* ============= */

body.rtl .raison-fields .sub-title{
    text-align: right !important;
}





@media screen and (max-width: 1023px) {
  .slick-slider{
    display:block !important;
  }
  #raisons-swiper {
  height: fit-content !important;
    padding-left: 0 !important;
}
  
   .raisons-slides::before {
        content: '';
        display: none;
    }
    .slide-item:nth-child(even) {
        margin-top: 0;
    }
  .reason-icon {
    background-color: #284180 !important;
}
    .raisons-slides .slick-slide:nth-child(2n) {
      margin-top: 0px;
  }
  .circle-close {
    height: 30px;
    width: 30px;
    
}


.circle-close i {
    font-size: 15px;
}
  .custom-modal{
    border-radius: 10px;
  }
}
 @media screen and (max-width: 961px) {
   html[dir="rtl"] button#rs-prev {
    left: 90% !important;
}

html[dir="rtl"] button#rs-next {
    right: 90% !important;
   }
}