:root {
    --primary-color: #1d1d4d;
    --secondary-color: #f47424;
  }
.case-study-section{
    min-height: 100%;
    background-color: var(--primary-color);
}

.case-study-section div a {
  font-size: 18px;
  position: relative;
  color: white;
  transition: all 0.3s ease-out;
  z-index: 1;
}
.case-study-section div a:hover{
    color: var(--secondary-color);
}
.case-study-header h2{
color: var(--secondary-color);
font-size: 30px;
line-height: 1.5
}
.case-study-header h1{
    line-height: 1;
    color: white;
    }

.case-study-header-cat span:nth-child(1){
    color: white;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;}

.case-study-header-cat span:nth-child(2){
    color: var(--secondary-color);
    font-size: 17px;
    border: 1px solid var(--secondary-color);
    padding: 5px 10px;
    transition:all 0.3s ease-in;
    
    }
    .case-study-header-cat span:nth-child(2):hover{

        background-color: var(--secondary-color);
        color: white;
        }
.offerings ul, .solution-list ul{
    list-style: none;
}
.offerings ul li{
    color: rgb(33, 33, 32);
    font-size: 17px;
}

.tech-list ul li {
position: relative;
list-style: none;
margin: 0 15px;
    color: #413f45;
    font-size: 18px;}


.tech-list ul li::before {
    position: absolute;
    top: 7px;
    left: -18px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--secondary-color);
    content: "";
}
.Development-process-img{
    width: auto;
    height: 400px;
}

.case-study-subheading{
    font-size: 20px !important;
    font-weight: 600;
    color: #f37724;}
.case-study-header-info {
    background-color: rgb(36 47 92 / 19%);
    margin-top: 52px;
    /* height: 280px; */
    box-shadow: 5px 3px 9px 0px rgb(0 0 0 / 11%);
    border: 2px solid rgb(36 47 92 / 57%);
    border-radius: 10px;
}
.case-study-header-info ul li{
    padding: 10px;
    color: #fff;
}
.project-summary span{
    border-bottom: 1px solid #ea760fb5;
    
        padding-bottom: 3px;
    
}
.project-summary{
    margin-bottom: 5px;
}
.case-study-section{
    position: relative;
}
.case-study-section:before {
    backdrop-filter: blur(4px);
    background: linear-gradient(33deg, #6ec7f14a -13.28%, #34b9c1f7 27.94%, rgba(101, 219, 226, 0) 98.93%);
    border-radius: 100%;
    content: "";
    opacity: .16;
    position: absolute;
    z-index: 0;
}
.case-study-section::before {
    height: 901px;
    left: -159px;
    bottom: -128px;
    transform: rotate(55deg);
    width: 501px;
}

.case-study-section::after {
    backdrop-filter: blur(4px);
    background: linear-gradient(324deg, rgb(110 199 241 / 40%) -13.28%, rgb(10 154 163 / 59%) 27.94%, rgba(101, 219, 226, 0) 98.93%);
    border-radius: 100%;
    content: "";
    opacity: 0.16;
    position: absolute;
    z-index: 1;
}

.mockup-image-wrap{
    z-index: 2;
}
.case-study-section:after {
    height: 695px;
    right: -123px;
    bottom: -23px;
    transform: rotate(55deg);
    width: 388px;
}
.technology-img, .key-chal-img{
    position: relative;
}
.technology-img img{
    z-index: 99;
 
}
.technology-img::after ,.key-chal-img::after{
    height: 695px;
    right: -130px;
    bottom: -71px;
    transform: rotate(62deg);
    width: 515px;
}
.technology-img::after, .key-chal-img::after{
    backdrop-filter: blur(4px);
    background: linear-gradient(324deg, rgb(36 23 74 / 60%) -13.28%, rgb(42 146 145 / 57%) 27.94%, rgb(235 244 244 / 0%) 98.93%);
    border-radius: 100%;
    content: "";
    opacity: 0.16;
    position: absolute;
    z-index: -1;
}

.solution-section{
    background-color: #f8f8f8;
}

.solution-list img{
width: 20px;
}
.solution-list span{
width: 20px;
color: #484444;
}
.case-testimonial-section{
    position: relative;
    min-height: 500px;
}
.case-testimonial-section::before {
    content: "";
    position: absolute;
    width: 14.948vw;
    height: 11.771vw;
    top: 0;
    left: 0;
 background-image:url("../img/others/quatation-left-icon.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
.case-testimonial-section::after {
    content: "";
    position: absolute;
    width: 14.948vw;
    height: 11.771vw;
bottom: 0;    
right: 0;
 background-image:url("../img/others/quatation-right-icon.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* call to action with process  start*/

.call-to-process{
    padding: 30px 55px;
    background-color: #e7e5e596;
  }
  .call-to-process .single-step{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
  }

  .call-to-process .single-step:before{
    content: "";
    width: 1px;
    position: absolute;
    border-right: 2px dashed var(--secondary-color);
    left: 25px;
    top: 2px;
    bottom: calc(50% + 23px);
  }
  .call-to-process .single-step:after{
    content: "";
    width: 1px;
    position: absolute;
    border-right: 2px dashed var(--secondary-color);
    left: 25px;
    top: calc(50% + 25px);
    bottom: -40px;
  }
  
  .call-to-process .single-step:last-child:after{
    display: none;
  }
  
  
  .call-to-process .single-step .step-count {
    width: 50px;
    height: 50px;
    border: 2px solid var(--secondary-color);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    border-radius: 50%;
}
.call-to-process .single-step .step-content {
    width: calc(100% - 50px);
    padding-left: 20px;
    color: black;
    font-weight: 500;
}
.call-to-form{
    padding: 0px 50px;
}
.call-to-form button{
    background-color: var(--secondary-color);
    color: #fff;
}
.call-to-form button:hover{
    background-color: var(--primary-color);
    color: #fff;
}
.call-to-form ul li{
    list-style: none;
    font-size: 16px;
}
.call-to-form ul{
    padding: 0 5px;
    margin-bottom: 0;
}
/* call to action with process  end*/


.case-study-sass-development-cycle {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245);
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 2rem;

  }
  
  
  .development-cycle ul {
    --col-gap: 2rem;
    --row-gap: 2rem;
    --line-w: 0.25rem;
    display: grid;
    grid-template-columns: var(--line-w) 1fr;
    grid-auto-columns: max-content;
    column-gap: var(--col-gap);
    list-style: none;
    width: min(60rem, 90%);
    margin-inline: auto;
    width: 100%;
  }
  
  /* line */
  .development-cycle ul::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 20;
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
  }
  
  /* columns*/
  
  /* row gaps */
  .development-cycle ul li:not(:last-child) {
    margin-bottom: var(--row-gap);
  }
  
  /* card */
  .development-cycle ul li {
    grid-column: 2;
    --inlineP: 1.5rem;
    margin-inline: var(--inlineP);
    grid-row: span 2;
    display: grid;
    grid-template-rows: min-content min-content min-content;
  }
  
  /* date */
  .development-cycle ul li .date {
    --dateH: 3rem;
    height: var(--dateH);
    margin-inline: calc(var(--inlineP) * -1);
  
    text-align: center;
    background-color: var(--accent-color);
  
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
  
    display: grid;
    place-content: center;
    position: relative;
  
    border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
  }
  
  /* date flap */
  .development-cycle ul li .date::before {
    content: "";
    width: var(--inlineP);
    aspect-ratio: 1;
    background: var(--accent-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
    position: absolute;
    top: 100%;
  
    clip-path: polygon(0 0, 100% 0, 0 100%);
    right: 0;
  }
  
  /* circle */
  .development-cycle ul li .date::after {
    content: "";
    position: absolute;
    width: 2rem;
    aspect-ratio: 1;
    background: var(--bgColor);
    border: 0.3rem solid var(--accent-color);
    border-radius: 50%;
    top: 50%;
  
    transform: translate(50%, -50%);
    right: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  
  /* title descr */
  .development-cycle ul li .title,
  .development-cycle ul li .descr {
    background: var(--bgColor);
    position: relative;
    padding-inline: 1.5rem;
  }
  .development-cycle ul li .title {
    overflow: hidden;
    padding-block-start: 1.5rem;
    padding-block-end: 1rem;
    font-weight: 600;
    font-size: 20px;
    color: #181d4b;
  }
  .development-cycle ul li .descr {
    padding-block-end: 1.5rem;
    font-weight: 300;
    color: #534949;
  }
  
  /* shadows */
  .development-cycle ul li .title::before,
  .development-cycle ul li .descr::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    left: 50%;
    border-radius: 50%;
    filter: blur(4px);
    transform: translate(-50%, 50%);
  }
  .development-cycle ul li .title::before {
    bottom: calc(100% + 0.125rem);
  }
  
  .development-cycle ul li .descr::before {
    z-index: -1;
    bottom: 0.25rem;
  }
  
  @media (min-width: 40rem) {
    .development-cycle ul {
      grid-template-columns: 1fr var(--line-w) 1fr;
    }
    .development-cycle ul::before {
      grid-column: 2;
    }
    .development-cycle ul li:nth-child(odd) {
      grid-column: 1;
    }
    .development-cycle ul li:nth-child(even) {
      grid-column: 3;
    }
  
    /* start second card */
    .development-cycle ul li:nth-child(2) {
      grid-row: 2/4;
    }
  
    .development-cycle ul li:nth-child(odd) .date::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%);
      left: 0;
    }
  
    .development-cycle ul li:nth-child(odd) .date::after {
      transform: translate(-50%, -50%);
      left: calc(100% + var(--col-gap) + var(--line-w) / 2);
    }
    .development-cycle  ul li:nth-child(odd) .date {
      border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
    }
  }
  
  .credits {
    margin-top: 1rem;
    text-align: right;
  }
  .credits a {
    color: var(--color);
  }
  
  .img-bg-line, .img-bg-line-before{
    position: relative;
  }

  .img-bg-line-before::before {
    position: absolute;
    content: "";
    z-index: -1;
    background: #ea760f8a;
    width: 248px;
    height: 225px;
    top: -10px;
    right: -10px;
}
  
  .img-bg-line::after{
    position: absolute;
    content: "";
      z-index: -1;
      background: #ea760f8a;
      width: 248px;
      height: 225px;
      bottom: -10px;
      left: -10px;
  
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .img-bg-line-before::before {
      position: absolute;
      content: "";
      z-index: -1;
      background: #ea760f8a;
      width: 168px;
        height: 145px;
      top: -10px;
      right: -10px;
  }

    .img-bg-line::after{
      position: absolute;
      content: "";
        z-index: -1;
        background: #ea760f8a;
        width: 168px;
        height: 145px;
        bottom: -10px;
        left: -10px;
    
    }
}
@media only screen and (max-width: 576px){
  .case-study-section::before, .case-study-section::after, .technology-img::after {
    display: none;
}
}
@media only screen and (max-height: 500px){
  .case-study-section::before, .case-study-section::after, .technology-img::after {
    display: none;
}
}