/* ------------- Our Capabilities --------------- */

.our-capabilities{
  background-color: black;
  color: white;
  align-items: center; 
  display: flex;
  padding: 8rem 0;
  
}

.our-capabilities-container{
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
/* padding-left: 15rem; */

}

.capabilities-content{
  width: 20rem;
  height: 40rem;
  padding: 1.5rem;
  border: 1px solid hsla(0,0%,100%,.1);
  background-color: rgba(180,114,114,.16);
  opacity: 1;
  
}

.capabilities-content h1{
  font-size: 1.6rem;
  text-align: center;
}

.capabilities{
  padding-top: 4rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-flow: 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 5rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.capabilities h1{
  font-size: 3.5rem;
  line-height: 96px;
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 0 3em #ff6000
}

.capability{
  position: relative;
  display: flex;
  align-items: center;
  width: 8.2rem;
}

.test{
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 0;
}
.capability p{
  /* padding-left: 39px; */
  padding-top: 2.5rem;
  font-weight: bold;
  font-size: 0.9rem;

}

  /* ------------- software design ---------------- */

  .software-design{
    padding: 4rem 1rem;
    align-items: center;
    }
  
    .software-design-image{
    width: 50%;
    background-image: url(../images/product-design.png);
    width: 22rem;
      height: 22rem;
      display: none;
    }
  
    .software-design-content h2{
      padding: 1rem;
      font-size: 1.3rem;
    }

    .software-design-content p{
      text-align: justify;
    }

    .img-title{
      display: flex;
      align-items: center;
    }

    .img-title img{
      width: 3rem;
    }

  /* ----------- software development -------------- */

  .software-development{
    padding: 4rem 1rem;
    align-items: center;
    }
  
    .software-development-image{
    background-image: url(../images/product-design.png);
    width: 22rem;
    height: 27rem;
    display: none;
    }
  
    .software-development-content h2{
      padding: 1rem;
      font-size: 1.3rem;
    }
  
    .software-development-mobile{
      padding: 2rem 0 0 1rem;
    }

    .software-development-mobile p{
      text-align: justify;
      
    }

    .software-development-web p{
      text-align: justify;
    }

    .software-development-web{
      padding-left: 1rem;
    }

    .img-title img{
      width: 3rem;
    }

      /* -------------- sass --------------------- */

  .sass{
    padding: 4rem 1rem;
    align-items: center;
    }   
  
    .sass-content h2{
      padding: 1rem;
      font-size: 1.3rem;
    }

    .sass-content p{
      text-align: justify;
    }
  
    .sass-image{
      width: 50%;
      background-image: url(../images/product-design.png);
      width: 22rem;
      height: 22rem;
      display: none;
  }

  .img-title img{
    width: 3rem;
  }

  /* ---------------- Software testing ----------------- */

  .software-testing{
    padding: 4rem 1rem;
    align-items: center;
  }

  .software-testing h2{
    padding: 1rem;
    font-size: 1.3rem;
  }

  .software-testing p{
    text-align: justify;
  }

  .software-testing-image{
    display: none;
  }

  /* -----------------approch-------------------- */

  .approch{
    background-color: black;
    color: white;
  }

  .approch-contents{
    padding: 4rem 1rem;
    align-items: center;
    text-align: justify;
  }

  .approch-contents h1{
    text-align: center;
    font-size: 1.6rem;
  }

  .approch-contents h2{
    text-shadow: 0 0 1.5em #ff6000;
    font-size: 81px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    font-weight: 700;
    position: absolute;
  }

  .approch-contents h3{
    left: 1px;
    left: 1px;
    padding-left: 39px;
    padding-top: 40px;
    font-weight: bold;
    font-size: 1.2rem;
  }

  .approch-num-title{
    display: flex;
    align-items: center;
    padding: 2rem 0 1rem 0;
  }

  .approch-divider{
    width: 4rem;
    height: 0.2rem;
    opacity: .7;
    background-color: #ff6000;
    margin-bottom: 2rem;
  }

 
  



  @media (min-width: 40rem){
  /* ------------- Our Capabilities --------------- */

  .our-capabilities{
	  background-color: black;
	  color: white;
	  align-items: center; 
	  display: flex;
	  padding: 8rem 0;
	  
  }

  .our-capabilities-container{
	display: flex;
    justify-content: center;
    align-items: center;
	max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	/* padding-left: 15rem; */
	
  }

  .capabilities-content{
	  background-color: darkcyan;
	  width: 100%;
	  height: 45rem;
    padding: 48px 48px 108px;
    border: 1px solid hsla(0,0%,100%,.1);
    background-color: rgba(180,114,114,.16);
    opacity: 1;
    
  }

  .capabilities-content h1{
    font-size: 2.5rem;
    text-align: left;
  }

  .capabilities{
    padding: 2rem 0 2rem 13rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-flow: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 105px;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
  }

  .capabilities h1{
    font-size: 6rem;
    line-height: 96px;
    font-weight: 700;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    text-shadow: 0 0 1.6em #ff6000;
  }

  .capability{
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
  }

  .test{
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: 0;
  }
  .capability p{
    padding-left: 10px;
    padding-left: 40px;
    padding-top: 55px;
    font-weight: bold;
    font-size: 1.3rem;
  }

  /* ------------- software design ---------------- */

  .software-design{
	max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	display: flex;
	padding: 9rem 0;
  justify-content: space-between;
  align-items: center;
  }

  .software-design-content{
	width: 50%;
  }

  .software-design-image{
	width: 100%;
	background-image: url(../images/software\ design\ and\ architecture.png);
  background-size: cover;
	width: 29rem;
  height: 22rem;
  display: block;
  }

  /* .software-design-content h2{
    padding: 1.5rem 0;
    
  } */


  /* ----------- software development -------------- */

  .software-development{
	max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	display: flex;
	padding: 9rem 0;
  justify-content: space-between;
  align-items: center;
  }

  .software-development-image{
	background-image: url(../images/software\ development.png);
  width: 32rem;
    height: 17rem;
    display: block;
    background-size: cover;
  }

  .software-development-content{
	width: 50%;
	text-align: left;
  }

  /* .software-development-content h2{
    padding: 1.5rem 0;
  } */

  /* .software-development-web h3{
    border-bottom: 2px solid #FF6000;
    width: fit-content;
  }

  .software-development-mobile h3{
    border-bottom: 2px solid #FF6000;
    width: fit-content;
  } */

  .software-development-mobile{
    padding: 2rem 0 0 0;
  }



  /* -------------- sass --------------------- */

  .sass{
	max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	display: flex;
	padding: 9rem 0;
  justify-content: space-between;
  align-items: center;
  }

  .sass-content{
    width: 50%;
    text-align: left;
}     

  /* .sass-content h2{
    padding: 1.5rem 0;
  } */

  .sass-image{
    width: 50%;
    background-image: url(../images/saas.png);
    background-size: cover;
    width: 26rem;
    height: 21rem;
    display: block;
}

/* -------------- software testing --------------------- */

 .software-testing{
  max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	display: flex;
	padding: 9rem 0 9rem 0;
  justify-content: space-between;
  align-items: center;
 }

 .soft-testing-content{
   width: 50%;
 }

 .software-testing-image{
  width: 50%;
  background-image: url(../images/software\ testing.png);
  background-size: cover;
  width: 34rem;
  height: 16rem;
  display: block;
 }


/* -------------------- approch ------------------------- */

.approch{
  background-color: black;
  color: white;
  
}

.approch-contents{
  max-width: 1140px;
	width: 100%;
	padding-right: var(--bs-gutter-x,.75rem);
	padding-left: var(--bs-gutter-x,.75rem);
	margin-right: auto;
	margin-left: auto;
	display: grid;
	padding: 9rem 0; 
}

.approch-contents h1{
  font-size: 2.5rem;
  text-align: left;
}

  .approch-container{
    display: grid;
    grid-column-gap: 72px;
    grid-row-gap: 50px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .approch-num-title h3{
    font-size: 1.6rem;
  }
}