.vcm-item{
	&:not(:last-child){
		margin-bottom: 20px;
	}
}
.vcm-title{
	background-color: #939598;
	border-radius: 10px;
	padding: 15px 20px;
	position: relative;
	cursor: pointer;
	&::after{
		content: "\f107";
		position: absolute;
		font-family: "FontAwesome";
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		transition: 0.5s;
	}
	&.active{
		border-radius: 10px 10px 0 0;
		&::after{
			transform: translateY(-50%) rotate(180deg);
		}
	}
	h2{
		color: #fff;
		font-size: 22px;
		text-transform: uppercase;
	}

}
.vcm-tab {
    display: none;
    border-top: none;
    background-color: #fff;
	.vcmCapitalBox{
		padding: 25px;
		&.orangeCapBefore{
			padding-left: 40px;
			position: relative;
			&::before{
				width: 15px;
				height: 100%;
				top: 0;
				left: 0;
				background: linear-gradient(90deg, rgba(247, 143, 53, 1) 0%, rgba(252, 181, 62, 1) 100%);
				content: "";
				position: absolute;
			}
		}
		&.greenCapBefore{
			padding-left: 40px;
			position: relative;
			&::before{
				width: 15px;
				height: 100%;
				top: 0;
				left: 0;
				background: linear-gradient(90deg, #b0d17c 0%, #4ca682 100%);
				content: "";
				position: absolute;
			}
		}
		.capTxt{
			padding-left: 10px;
		}
	}
	.capHeadingWrap{
		display: flex;
		gap: 15px;
		align-items: center;
		margin-bottom: 20px;
		.capIcon{
			width: 70px;
			height: 70px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			box-shadow: 3px 3px 0px 0px #bcbdc0;			
		}
	}
}
.vcWrap{
	background: linear-gradient(90deg, #8dcca9 0%, #77b196 100%);
	padding: 30px;
	.vcInner{
		/* background-image:linear-gradient(to left, rgba(255, 0, 0, 0), #c1d284); */
		background-image: linear-gradient(to right, #c1d284 0%, #c1d284 0%, rgba(193, 210, 132, 0) 70%);
		padding: 20px 0;
		.vcHeading{
			width: auto;
			padding: 10px 15px;
			background-image: linear-gradient(to right, #d4dc90 0%, #d4dc90 0%, rgba(193, 210, 132, 0) 100%);
			display: inline-block;
		}
	}
	.vcInnerTxt{
		display: flex;
		align-items: center;
		.vcInnerLeft{
			width:30%;
			padding-left: 30px;
		}
		.vcTitle{
			margin-bottom: 40px;
			padding-bottom: 20px;
			position: relative;
			&:last-child{
				margin-bottom: 0px;
			}
			h3{
				position: relative;
				&::after{
					width: 475px;
                    height: 10px;
                    content: "";
                    position: absolute;
                    left: 100px;
                    bottom: -20px;
                    border-bottom: 2px dotted #056262;
				}
			}
			&::before{
				width: 70px;
				height: 2px;
				content: "";
				background-color: #fcb53e;
				position: absolute;
				bottom:5px;
				left: 0;
			}
			&::after{
				width:70px;
				height: 2px;
				content: "";
				background-color: #056262;
				position: absolute;
				bottom:0px;
				left: 20px;
			}
			
			&.vcTitle_1{
				h3{
					&::after{
						width: 320px;
					}
				}
			}
			&.vcTitle_2{
				h3{
					&::after{
						width:260px;
					}
				}
			}
			&.vcTitle_3{
				h3{
					&::after{
						width:325px;
					}
				}
			}
			&.vcTitle_4{
				h3{
					&::after{
						width:460px;
					}
				}
			}
		}
		.vcInnerMiddle{
			width: 40%;
			.vcFlowerImg{
				position: relative;
				z-index: 1;
			}
		}
		.vcInnerRight{
			width:30%;
			.vcTitle{
				&::before{
					right: 0;
					left: auto;
				}
				&::after{
					bottom:0px;
					left: auto;
					right: 20px;
				}
				&.vcTitle {
					& h3 {
						&::after {
							width: 365px;
							right: 100px;
							left: auto;
							bottom: -20px;
						}
					}
					&.vcTitle_5{
						& h3 {
							&::after {
								width: 365px;
							}
						}
					}
					&.vcTitle_6{
						& h3 {
							&::after {
								width: 305px;
							}
						}
					}
					&.vcTitle_7{
						& h3 {
							&::after {
								width: 355px;
							}
						}
					}
					&.vcTitle_8{
						& h3 {
							&::after {
								width: 480px;
							}
						}
					}
				}
			}
		}
	}
}
.outputWrap{
	background-image: linear-gradient(to top, #fde196 0%, #fde196 0%, #fef2ce 100%);
	padding: 30px;
}

.vcmGreenGradient{
	background: linear-gradient(90deg, #eaf3d7 0%, #c0e2da 100%);
}
.outcomeWrap{
	.outcomeInner{
		padding: 30px;
	}
}
.sdgWrap{
	.sdgContent{
		padding: 30px;
		.sdgImgWrap{
			ul{
				gap: 15px;
				flex-wrap: wrap;
			}
		}
		&.sdgGradient_1{
			background-image: linear-gradient(to right, #fdebcb 0%, #fdebcb 0%, #fff8e6 100%);
		}
		&.sdgGradient_2{
			background-image: linear-gradient(to right, #cde7e0 0%, #cde7e0 0%, #ecf4de 100%);
		}
	}
}

@media screen and (max-width:1366px) {
	.vcWrap {
		& .vcInner {
			.vcHeading {
				margin-bottom: 20px;
			}
		}
	}
	.vcWrap {
		& .vcInnerTxt {
			& .vcTitle {
				&.vcTitle_1 {
					& h3 {
						&::after {
							width: 265px;
						}
					}
				}
				&.vcTitle_2 {
					& h3 {
						&::after {
							width: 225px;
						}
					}
				}
				&.vcTitle_3 {
					& h3 {
						&::after {
							width: 280px;
						}
					}
				}
				&.vcTitle_4 {
					& h3 {
						&::after {
							width: 400px;
						}
					}
				}				
			}
			& .vcInnerRight {
				& .vcTitle {
					&.vcTitle {
						&.vcTitle_5 {
							& h3 {
								&::after {
									width: 320px;
								}
							}
						}
						&.vcTitle_6 {
							& h3 {
								&::after {
									width: 270px;
								}
							}
						}
						&.vcTitle_7 {
							& h3 {
								&::after {
									width: 315px;
								}
							}
						}
						&.vcTitle_8 {
							& h3 {
								&::after {
									width: 440px;
								}
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1280px) {
	.vcWrap {
		& .vcInnerTxt {
			& .vcTitle {
				&.vcTitle_1 {
					& h3 {
						&::after {
							width: 250px;
						}
					}
				}
				&.vcTitle_2 {
					& h3 {
						&::after {
							width: 215px;
						}
					}
				}
				&.vcTitle_3 {
					& h3 {
						&::after {
							width: 250px;
						}
					}
				}
				&.vcTitle_4 {
					& h3 {
						&::after {
							width: 350px;
						}
					}
				}				
			}
			& .vcInnerRight {
				& .vcTitle {
					&.vcTitle {
						&.vcTitle_5 {
							& h3 {
								&::after {
									width: 280px;
								}
							}
						}
						&.vcTitle_6 {
							& h3 {
								&::after {
									width: 240px;
								}
							}
						}
						&.vcTitle_7 {
							& h3 {
								&::after {
									width: 280px;
								}
							}
						}
						&.vcTitle_8 {
							& h3 {
								&::after {
									width: 400px;
								}
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1160px) {
	.vcWrap {
		& .vcInnerTxt {
			& .vcTitle {
				&.vcTitle_1 {
					& h3 {
						&::after {
							width: 200px;
						}
					}
				}
				&.vcTitle_2 {
					& h3 {
						&::after {
							width: 180px;
						}
					}
				}
				&.vcTitle_3 {
					& h3 {
						&::after {
							width:190px;
						}
					}
				}
				&.vcTitle_4 {
					& h3 {
						&::after {
							width: 280px;
						}
					}
				}				
			}
			& .vcInnerRight {
				& .vcTitle {
					&.vcTitle {
						&.vcTitle_5 {
							& h3 {
								&::after {
									width: 220px;
								}
							}
						}
						&.vcTitle_6 {
							& h3 {
								&::after {
									width: 180px;
								}
							}
						}
						&.vcTitle_7 {
							& h3 {
								&::after {
									width: 200px;
								}
							}
						}
						&.vcTitle_8 {
							& h3 {
								&::after {
									width: 320px;
								}
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:991px) {
	.vcm-tab {
		& .capHeadingWrap {
			h3{
				width: calc(100% - 90px);
			}
		}
		.fz_22 {
			font-size: 18px !important;
		}
		& .vcmCapitalBox {
			&.greenCapBefore, &.orangeCapBefore {
				padding: 15px;
				padding-left: 25px;
				position: relative;
			}
		}
	}
	.vcInnerMiddle{
		display: none;
	}
	.vcWrap {
        & .vcInnerTxt {
            & .vcTitle {
                &.vcTitle_1 {
                    & h3 {
                        &::after {
                            display: none !important;
                        }
                    }
                }
				&.vcTitle_2 {
                    & h3 {
                        &::after {
                            display: none;
                        }
                    }
                }
				&.vcTitle_3 {
                    & h3 {
                        &::after {
                            display: none;
                        }
                    }
                }
				&.vcTitle_4 {
                    & h3 {
                        &::after {
                            display: none;
                        }
                    }
                }
            }
			& .vcInnerRight {
                & .vcTitle {
                    &.vcTitle {
                        &.vcTitle_5 {
                            & h3 {
                                &::after {
                                    display: none !important;
                                }
                            }
                        }
						&.vcTitle_6 {
                            & h3 {
                                &::after {
                                    display: none !important;
                                }
                            }
                        }
						&.vcTitle_7 {
                            & h3 {
                                &::after {
                                    display: none !important;
                                }
                            }
                        }
						&.vcTitle_8 {
                            & h3 {
                                &::after {
                                    display: none !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
	.vcWrap {
		padding: 20px;
		& .vcInnerTxt {
			flex-wrap: wrap;
			.vcInnerLeft {
				width:100%;
				padding-left: 30px;
				margin-bottom: 15px;
			}
			& .vcTitle {
                & h3 {
					br{
						display: none;
					}
				}
            }
			& .vcInnerRight {
				text-align: left !important;
				width: 100%;
				padding-left: 30px;
				& .vcTitle {
					&::before {
						right: auto;
						left: 0;
					}
					&::after {
						left: 20px;
						right: auto;
					}
				}
            }
		}
	}
	.outputWrap{
		padding: 20px;
	}
	.outcomeWrap {
		.outcomeInner {
			padding: 20px;
		}
	}
	.sdgWrap {
		.sdgContent {
			padding: 20px;
		}
	}
}