/* Our-Story- Content */
:root
{
    /* Surface-color-variable */
    --Dark-3:#F5F7F9; 
    --Dark-4:#F1F3F5; 
    --Dark-7:#CFD6DD;
    --Pink:#D5045F;
    --lighest-pink:#D5045F0F;
    --pink-opacity-60:#D5045F0F;
    --dark-opacity-60:#1B242C99;

    /* text-color-variable */
     --textDark-14:#1B242C;
     --textDark-10:#555F6D;
     --Pink-text:#D5045F;

     /* Border-color-variable*/ 
     --Dark-6:#DEE3E7;

    /* Font-size-variable */
    --Fsize-32:32px;    
    --Fsize-26:26px;
    --Fsize-20:20px;
    --Fsize-18:18px;
    --Fsize-16:16px;
}
.contant-bg{background-color:var(--Dark-3);padding: 24px 15px; border-radius: 20px;}
.contant-bg p{font-size: var(--Fsize-20); color: var(--textDark-14); line-height: 30px;margin: 0 auto;font-weight: 400; max-width: 95%;text-align: justify;}

.contant-bg p:nth-child(2){margin-top: 0; padding-top:0}
p.clients_text {
    max-width: 60%;
    margin: 0px auto;
}
/*--------------- Story-List-Css-Start ---------------*/
.Story-list-wrap{position: relative; margin-bottom:110px;}
.Story-list-wrap::before{position: absolute;content: ""; width: 1px; height: 104%; border: solid 1px var(--Dark-6); left: 50%; top: 16px;}
.Story-list-wrap::after {position: absolute;content: "";width: 8px;height: 8px;background-color: var(--Dark-6);border-radius: 100%;
left: 49.8%; bottom: -5%;}

 .story-card-right, .story-card-left{display: flex;position: relative;}
.story-card-right {justify-content: end;}
.story-card-left{justify-content: start;}
.story-card, .story-card-latest {padding: 20px 16px;border-radius: 12px;width: 545px; height: auto; border: solid 1px var(--Dark-6);position: relative;}
.story-card-latest{width: 100%;}
.story-card-right::before, .story-card-left::before{position: absolute;content: ""; background-image: url(../images/Point.png);
width: 24px; height: 24px; left: 49.15%;top: 15px;}
.story-card h2, .story-card-latest h2{font-size: var(--Fsize-20); font-weight: 700; color: var(--textDark-14);}
.story-card p, .story-card-latest p{font-size: var(--Fsize-16); color: var(--textDark-10); line-height: 24px; text-align: justify;}
.story-card.line-right::before, .story-card.line-left::before{position: absolute;content: "";border:solid 1px var(--Dark-6);width: 50px;
top: 25px;}
.story-card.line-right::after, .story-card.line-left::after {position: absolute; content: ""; width: 8px; height: 8px;
background:var(--Dark-6); top: 21px;border-radius: 100%;}
.story-card.line-right::after{ left: -32px;} .story-card.line-left::after{ right: -32px;}
.story-card.line-right::before {left: -82px;} .story-card.line-left::before {right: -82px;}
.os-story-list a{ color: var(--Pink-text); position: relative; text-decoration: none; display: inline-block;}
.os-story-list a:after {
    position: absolute;
    width: 100%;
    content: "";
    height: 1px;
    background: #D5045F;
    transition: 0.3s;
    left: 0px;
    bottom: 0px;
  }
  
  .os-story-list a:hover:After {
    width: 0%;
  }
.latest-story-content.line-left{display: none;}
.story-card-responsive{border: none;}
/*--------------- Story-List-Css-End ---------------*/

/*--------------- Our Expertise-Css-Start ---------------*/
.Bs-wrap h2{font-size: var(--Fsize-20); color: var(--textDark-14); font-weight: 500;}
.Bs-wrap p{ font-size: var(--Fsize-16); color: var(--textDark-10); text-align: justify;}
.icon-bg{background-color: var(--Dark-4);Width:60px;Height:60px;border-radius:16px;Padding:10px; text-align: center;
transition: all ease .3s; margin: 0 0 10px 0;}
.icon-bg img{object-fit: contain; width: 22px; height: 22px; transition: all ease .3s;}
a.bs-card{display: block;padding: 20px 16px;border-radius: 20px;border: 1px solid var(--Dark-6);
transition: all ease .3s; text-decoration: none; margin-top: 20px;}
a.bs-card:hover{border: solid 1px var(--Pink); background-color: var(--lighest-pink);}
.mid-content p{font-size: var(--Fsize-18); color: var(--textDark-14); font-weight: 500;max-width: 93%; margin: 0 auto;}
a.bs-card:hover .icon-bg{background-color: var(--Pink-text);}
a.bs-card:hover .icon-bg img{filter: brightness(0) invert(1);}
.bs-practice img{ border-radius: 14px 14px 0 0;}
.bs-practice a.card{border-radius: 16px; transition: all ease .3s; border: solid 1px var(--Dark-6); text-decoration: none; margin-bottom: 20px;}
.bs-practice a.card h5.card-title, a.bs-card h3{font-size: var(--Fsize-20);font-weight: 500; color: var(--textDark-14);}

a.bs-card h3{display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;
text-overflow: ellipsis;}
a.bs-card p{display: -webkit-box;-webkit-line-clamp: 6;line-clamp: 6;-webkit-box-orient: vertical;overflow: hidden;
text-overflow: ellipsis;}
.bs-practice p.card-text, a.bs-card p{font-size: var(--Fsize-16); color: var(--textDark-10); line-height: 24px;}
.top-image-wrap{position: relative;}
.arrow-bg {position: absolute;bottom: 15px;right: 15px; width: 40px; height: 40px; border-radius: 100%; display: flex;
justify-content: center; align-items: center; background-color: var(--dark-opacity-60);transition: all ease .3s;}
.arrow-icon{border-radius: 0 !important;}
.bs-practice a.card:hover .arrow-bg{ background-color: var(--Pink); transition: all ease .3s; bottom: 18px;}

.bs-practice a.card:hover{border-color:transparent;background-color: var(--pink-opacity-60);}
 
/*--------------- Our Expertise-Css-End ---------------*/

/*--------------- Our Performance-Css-Start ---------------*/
.Cl-list-content h2{font-size: var(--Fsize-26); font-weight: 500; color: var(--textDark-14);    line-height: 40px;}
.Cl-list-content p, .Cl-list-content ul li{font-size: var(--Fsize-16);  color: var(--textDark-10); line-height: 28px; list-style-type: none; font-weight: 400;text-align: justify;}
.Cl-list-content .pinktext {color: #D5045F;font-size: 18px;font-weight: 500;}
ul.content-list-wrap{padding: 0;}
.max80{max-width: 80%;}
ul.content-list-wrap li {position: relative;padding: 8px 0px 8px 30px; line-height: 22px; text-align: left;}
ul.content-list-wrap li::before{position: absolute; content: ""; background-image: url(../images/list-check.png);
    width: 16px;
    height: 16px;
    left: 0;
    background-size: 100%;
    top: 12px;}


ul.inner-content-list {padding-left: 25px;}
ul.inner-content-list li{ list-style-type: disc; padding:2px 0;}
ul.inner-content-list li::before{display: none;}

.perform-image{width:100% ; height: 100%; object-fit: cover; border-radius: 20px;}
/*--------------- Our Performance-Css-End ---------------*/


/*--------------------- Responsive Css ---------------------*/
@media (max-width: 1400px)
{
    .story-card {width: 456px;} 
    .story-card.line-right::before {left: -79px;} .story-card.line-left::before{right: -79px;}
    .story-card.line-right::after {left: -31px;} .story-card.line-left::after{right: -31px;}
    .story-card-right::before, .story-card-left::before { left: 49%;}
    .Story-list-wrap {margin-bottom: 80px;}

}
@media (max-width: 1200px)
{
.story-card {width: 365px;}

}
@media (max-width: 992px){
.story-card {width: 84%; margin-bottom: 20px;}
.story-card-left {justify-content: end;}
.story-card.line-right::before {right: 100%;}
.Story-list-wrap::before{left: 11px; height: 100%;}
.Story-list-wrap::after {left: 7px;bottom: -19px;}
.story-card-right::before, .story-card-left::before {left: 0;}
.story-card.line-left::before {right: 100%; left: -79px;}
.story-card.line-left::after {left: -31px; right: initial;}
.latest-story-content{display: block;}
.latest-story-content.line-left{display: block;}
.perform-image {width: 100%;}
.story-card-latest{display: none;}
/* .Cl-list-content {margin-top: 50px;} */
.midspace {
    margin: 30px 0px;
}
.spacer {
    height: 20px;
}
.imagecaption h4 {
    font-size: 20px;}
.imagecaption span {
    font-size: 12px;
}
.bottomspace{    margin: 20px 0px;}
.singlecaptionimage h4 {
    font-size: 14px;}
    .Cl-list-content h2{line-height: 32px;}
}
@media (max-width: 768px){
    :root
{    /* Font-size-variable */
    --Fsize-32:24px;
   --Fsize-20:18px;
    --Fsize-18:16px;
    --Fsize-16:15px;
}
.story-card {width: 78%;}
}
@media (max-width:576px)
{ 
    :root
    {
        /* Font-size-variable */
        --Fsize-32:26px;
        --Fsize-26:24px;
       --Fsize-20:16px;
        --Fsize-18:14px;
    }
.contant-bg p{line-height: 24px;         text-align: justify;}
.story-card.line-right::before, .Story-list-wrap::before, .Story-list-wrap::after, .story-card-right::before, 
.story-card-left::before, .story-card.line-right::after, .story-card.line-left::before, .story-card.line-left::after
{display: none;}
.Story-list-wrap {margin-bottom: 0;}
.story-card {width: 100%;}
.Bs-wrap h2, .Bs-wrap p.bs-para{text-align: center;}
}