.tab__header {
  display: block;
  clear: both;
}

.tab__header>div {
  border: 1px solid #E2E3E3;
  border-radius: 152px;
  padding: 16px 70px;

  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */
  text-align: center;
  color: #334055;
}

.tab__header>div:hover {
  /* background: #0288D1; */
  cursor: pointer;
  background: #00D563;
  color: #fff;
  border: 1px solid #00D563;

}

.tab__header>div.tab__header--active {
  /* background: #0288D1; */
  background: #00D563;
  color: #fff;
  border: 1px solid #00D563;
}


.border-block {
  border-block: 1px solid #E2E3E3;
}

.tab__content {
  display: block;
  clear: both;
  color: #212121;
  width: auto;
  height: inherit;
}

.tab__content>div {
  vertical-align: top;
  display: none;
}

.tab__content>div.tab__content--active {
  display: block;
}


.portfolio-card-content-wrapper p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  text-align: justify;
}


.btn-portfolio {
  text-transform: capitalize;
  font: normal normal 600 16px/20px 'Montserrat', sans-serif;
  border-radius: 144px;
  padding: 14px 28px !important;
}

.btn-view-case-study {
  box-shadow: 0px 4px 12px rgba(33, 37, 41, 0.1) !important;
  color: #FFFFFF;
}

.get-in-touch-button {
  color: #212529;
  border: 1.5px solid currentColor !important;
  background-color: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)) !important;
}

/* 1st Card  */


.portfolio-card-icons-wrapper {
  position: absolute;
  right: 10px;
  bottom: -20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.portfolio-card-icon {
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(33, 37, 41, 0.14);
  display: grid;
  width: 40px;
  height: 40px;
  place-content: center;
}
/* both app and website */
.both-website-app .app-custom-portfolio-card:nth-child(1) {
  --first-color: #31AECF;
  --secodary-color: #50C9E9;
}

.both-website-app .app-custom-portfolio-card:nth-child(1) .portfolio-card-icon i 
{
  color: var(--first-color);
}

.both-website-app .app-custom-portfolio-card:nth-child(1) .btn-view-case-study 
{
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}


/*2nd  */
.both-website-app .app-custom-portfolio-card:nth-child(2) {
  --first-color: #FFDE67;
  --secodary-color: #FFDE67;
}

.both-website-app .app-custom-portfolio-card:nth-child(2) .portfolio-card-icon i {
  color: var(--first-color);
}

.both-website-app .app-custom-portfolio-card:nth-child(2) .btn-view-case-study 
{
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*3nd  */
.both-website-app .app-custom-portfolio-card:nth-child(3) {
  --first-color: #243757;
  --secodary-color: #091E42;
}

.both-website-app .app-custom-portfolio-card:nth-child(3) .portfolio-card-icon i {
  color: var(--first-color);
}

.both-website-app .app-custom-portfolio-card:nth-child(3) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}


/* .app-custom-portfolio-card:nth-child(1) .portfolio-card-image-wrapper {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
} */

/* start of all web only css  */
.webonly .app-custom-portfolio-card:nth-child(1) 
{
  --first-color: #8C4FF1;
  --secodary-color: #BE81FF;
}

.webonly .app-custom-portfolio-card:nth-child(1) .portfolio-card-icon i 
{
  color: var(--first-color);
}
.webonly .app-custom-portfolio-card:nth-child(1) .btn-view-case-study 
{
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*2nd */
.webonly .app-custom-portfolio-card:nth-child(2) {
  --first-color: #141514;
  --secodary-color: #2A2A2A;
}

.webonly .app-custom-portfolio-card:nth-child(2) .portfolio-card-icon i {
  color: var(--first-color);
}

.webonly .app-custom-portfolio-card:nth-child(2) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*3nd */
.webonly .app-custom-portfolio-card:nth-child(3) {
  --first-color: #000;
  --secodary-color: #212529;
}

.webonly .app-custom-portfolio-card:nth-child(3) .portfolio-card-icon i {
  color: var(--first-color);
}

.webonly .app-custom-portfolio-card:nth-child(3) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*4nd */
.webonly  .app-custom-portfolio-card:nth-child(4) {
  --first-color: #3A67CA;
  --secodary-color: #6320D7;
}

.webonly  .app-custom-portfolio-card:nth-child(4) .portfolio-card-icon i {
  color: var(--first-color);
}

.webonly  .app-custom-portfolio-card:nth-child(4) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}

/* End of all web only css  */
/*Start of all mobile only cards  */
.mobileonly .app-custom-portfolio-card:nth-child(1)
{
  --first-color: #A5DDB6 !important;
  --secodary-color: #A9EEEB !important;
}

.mobileonly .app-custom-portfolio-card:nth-child(1) .portfolio-card-icon i 
{
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(1)  .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}

/* 2nd */
.mobileonly .app-custom-portfolio-card:nth-child(2)
{
  --first-color: #D4AF37 ;
  --secodary-color: #FCD75F;
}

.mobileonly  .app-custom-portfolio-card:nth-child(2) .portfolio-card-icon i {
  color: var(--first-color)!important;
}

.mobileonly .app-custom-portfolio-card:nth-child(2) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%)!important;
  border: 1.5px solid var(--secodary-color) !important;
}
/* 3nd */
.mobileonly .app-custom-portfolio-card:nth-child(3) {
  --first-color: #EF476F;
  --secodary-color: #FC7998;
}

.mobileonly .app-custom-portfolio-card:nth-child(3) .portfolio-card-icon i {
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(3) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/* 4nd */
.mobileonly .app-custom-portfolio-card:nth-child(4) {
  --first-color: #5FD0FF;
  --secodary-color: #25A9DF;
}

.mobileonly .app-custom-portfolio-card:nth-child(4) .portfolio-card-icon i {
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(4) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*5th Card  */
.mobileonly .app-custom-portfolio-card:nth-child(5) {
  --first-color: #6300BF;
  --secodary-color: #FF3FEA;
}

.mobileonly .app-custom-portfolio-card:nth-child(5) .portfolio-card-icon i {
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(6) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*6th Card  */
.mobileonly .app-custom-portfolio-card:nth-child(6) {
  --first-color: #CB2938;
  --secodary-color: #7F000C;
}

.mobileonly .app-custom-portfolio-card:nth-child(6) .portfolio-card-icon i {
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(6) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*7h Card  */
.mobileonly  .app-custom-portfolio-card:nth-child(7) {
  --first-color: #000;
  --secodary-color: #212529;
}

.mobileonly  .app-custom-portfolio-card:nth-child(7) .portfolio-card-icon i {
  color: var(--first-color);
}

.mobileonly .app-custom-portfolio-card:nth-child(7) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*8h Card  */
.mobileonly .app-custom-portfolio-card:nth-child(8) {
  --first-color: #00F0A0;
  --secodary-color: #00AD73;
}

.mobileonly .app-custom-portfolio-card:nth-child(8) .portfolio-card-icon i {
  color: var(--first-color);
} 

.mobileonly .app-custom-portfolio-card:nth-child(8) .btn-view-case-study {
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/*9h Card  */
.mobileonly  .app-custom-portfolio-card:nth-child(9) {
  --first-color: #E51B23;
  --secodary-color: #E51B23;
}
.mobileonly  .app-custom-portfolio-card:nth-child(9) .portfolio-card-icon i 
{
  color: var(--first-color);
}
.mobileonly  .app-custom-portfolio-card:nth-child(9) .btn-view-case-study 
{
  background: linear-gradient(325.75deg, var(--first-color) 0%, var(--secodary-color) 100%);
  border: 1.5px solid var(--secodary-color) !important;
}
/* End of all mobile */