@use '../utils' as *;

/*=============================
    	01. about
===============================*/
.td-about{
	&-thumb{
		border: 10px solid #fff;
		border-radius: 30px;
		box-shadow: 0 29px 50px 0 #d5e3e3;
		background: var(--td-common-white);
		display: inline-block;
		& img{
			border-radius: 20px;
			mix-blend-mode: luminosity;
		}
	}
	&-video{
		&-inner{
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			margin: 0 auto;
			transform: translateY(-50%);
		}
	}
	&-icon{
		width: 95px;
		height: 95px;
		line-height: 95px;
		text-align: center;
		display: inline-block;
		flex: 0 0 auto;
		border-radius: 35px;
		background: var(--td-common-white);
		box-shadow: 0 11px 20px 0 #dce7e7;
		color: var(--td-theme-secondary);
		transition: all .4s ease;
	}
	&-title{
		font-weight: 600;
		font-size: 20px;
		line-height: 150%;
		text-transform: capitalize;
	}
	&-item{
		&:hover{
			& .td-about-icon{
				color: var(--td-theme-primary);
			}
		}
		@media #{$xl,$lg,$md,$sm,$xs} {
			margin-left: 0;
		}
	}
	&-2{
		&-bigtitle{
			font-weight: 700;
			font-size: 100px;
			letter-spacing: 0.12em;
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke-color: #E9E9E9;
			-webkit-text-stroke-width: 2px;
			margin-bottom: 0;
			text-transform: uppercase;
			position: absolute;
			left: -90px;
			top: 213px;
			z-index: 2;
			writing-mode: vertical-rl;
			transform: translateY(-50%) rotate(-180deg);
		}
		&-thumb{
			& .thumb{
				margin-left: 124px;
				clip-path: polygon(0 0, 84% 0%, 100% 15%, 100% 80%, 100% 100%, 15% 100%, 0% 84%, 0% 20%);
				border-radius: 12px 110px 12px 110px;
				@media #{$xl,$lg,$md,$sm,$xs} {
					margin-left: 0;
				}
				@media #{$lg,$sm,$xs} {
					clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 80%, 100% 100%, 20% 100%, 0% 80%, 0% 20%);
				}
			}
		}
		&-content{
			margin-right: 85px;
			@media #{$lg,$md,$sm,$xs} {
				margin-right: 0;
			}
			& .para{
				font-family: var(--td-ff-poppins);
				text-transform: capitalize;
				color: var(--td-grey-1);
			}
			&-wrap{
				@media #{$lg,$md,$sm,$xs} {
					margin-left: 0;
				}
			}
		}
		&-list{
			& ul{
				display: grid;
				grid-template-columns: auto auto;
				@media #{$lg,$md,$sm,$xs} {
					grid-template-columns: inherit;
				}
				& li{
					font-family: var(--td-ff-poppins);
					font-weight: 500;
					font-size: 16px;
					text-transform: capitalize;
					color: var(--td-common-black);
					display: flex;
					margin-bottom: 10px;
					& i{
						width: 22px;
						height: 22px;
						background: var(--td-theme-primary);
						color: var(--td-common-white);
						line-height: 22px;
						border-radius: 50%;
						font-size: 14px;
						text-align: center;
						margin-right: 10px;
						transform: translateY(2px);
						flex: 0 0 auto;
					}
				}
			}
		}
	}
	&-3{
		&-content{
			&-wrap{
				@media #{$md,$sm,$xs} {
					margin-left: 0;
				}
				& .para-2{
					font-weight: 500;
					font-size: 18px;
					color: var(--td-common-black);
					@media #{$xl,$lg,$md,$sm,$xs} {
						& br{
							display: none;
						}
					}
				}
				@media #{$xl,$lg,$md,$sm,$xs} {
					& .td-about-2-content {
						 margin-right: 0;
					 }
				 }
			}
		}
		&-clients{
			& .items{
				&:hover{
					& .icon{
						color: var(--td-theme-secondary);
					}
				}
			}
			& .icon{
				width: 80px;
				height: 80px;
				border-radius: 24px;
				display: inline-block;
				background: #f4f2ff;
				color: var(--td-theme-primary);
				font-size: 50px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all .4s ease;
			}
			& .title{
				font-weight: 600;
				font-size: 18px;
				line-height: 24px;
			}
			& .td-border{
				height: 142px;
				width: 4px;
				background: #f0f0f0;
				margin-left: 70px;
				margin-right: 70px;
				@media #{$sm,$xs} {
					margin-left: 40px;
					margin-right: 40px;
				}
			}
		}
		&-number{
			& .call-icon{
				border-radius: 100px;
				width: 46px;
				height: 46px;
				background: var(--td-theme-primary);
				color: var(--td-common-white);
				font-size: 25px;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			& .subtitle{
				font-weight: 400;
				font-size: 14px;
				color: var(--td-grey-1);
			}
			& .td-number{
				font-weight: 600;
				font-size: 18px;
				color: var(--td-common-black);
				margin-bottom: 0;
				& a{
					&:hover{
						color: var(--td-theme-primary);
					}
				}
			}
		}
		&-thumb{
			@media #{$xl,$lg,$md,$sm,$xs} {
				margin-right: 0;
			}
		}
		&-btn{
			@media #{$xs} {
				flex-direction: column;
				align-items: flex-start!important;
			}
		}
	}
	&-4{
		&-thumb{
			& .thumb{
				border-radius: 20px;
			}
			&-2{
				@media #{$xs} {
					padding-left: 0;
					margin-right: 0;
				}
				& .thumb{
					border-radius: 20px;
					z-index: 2;
					position: relative;
				}
			}
			&-wrap{
				@media #{$sm,$xs} {
					margin-right: 0;
				}
			}
		}
		&-bigtitle{
			right: -128px!important;
			top: 406px!important;
		}
		&-shape{
			position: absolute;
			left: 30px;
			bottom: 0;
		}
	}
	&-5{
		&-clients{
			& .title {
				font-size: 17px;
			}
		}
		&-thumb{
			& img{
				border-radius: 30px;
			}
			& .thumb-2{
				position: absolute;
				border: 8px solid #fff;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				@media #{$xl,$lg,$md,$sm,$xs} {
					width: 53%;
				}
				@media #{$xs} {
					position: inherit;
					width: 100%;
					transform: translateY(0);
					top: 30px;
					border: none;
				}
			}
		}
		&-text{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			text-align: center;
		}
		&-rounded{
			&-text{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 40%;
				&-inner{
					width: 140px;
					height: 140px;
					background: var(--td-common-white);
					border-radius: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			&-icon{
				border: 1px solid #ccc;
				border-radius: 100px;
				width: 70px;
				height: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	&-6{
		&-thumb{
			& img{
				width: 100%;
				border-radius: 20px;
			}
		}
		&-content{
			& .para{
				font-family: var(--td-ff-poppins);
				line-height: 175%;
				text-transform: capitalize;
				@media #{$xl,$lg,$md,$sm,$xs} {
					& br{
						display: none;
					}
				}
			}
		}
		&-tittle{
			font-weight: 700;
			font-size: 50px;
			line-height: 130%;
			text-transform: uppercase;
			@media #{$xxl} {
				font-size: 40px;
			}
			@media #{$xl} {
				font-size: 35px;
			}
			@media #{$lg,$md,$sm,$xs} {
				font-size: 30px;
			}
		}
	}
	&-7{
		&-clients{
			& .icon {
				flex: 0 0 auto;
				margin-right: 23px;
				background: #ffe8f7;
				color: var(--td-theme-secondary);
			}
		}
		&-shape{
			position: absolute;
			right: 60px;
			top: 70px;
			@media #{$sm} {
				right: 20px;
			}
			@media #{$xs} {
				display: none;
			}
		}
		&-thumb{
			@media #{$xl,$md,$sm,$xs} {
				margin-right: 0;
			}
			& img{
				border-radius: 15px;
			}
			& .thumb-2{
				margin-top: -210px;
				@media #{$xs} {
					margin-top: 20px;
				}
			}
		}
		&-video{
			position: absolute;
			top: 25%;
			left: 30%;
			@media #{$md,$xs} {
				left: 41%;
			}
			& .td-video-play{
				background: var(--td-theme-primary);
				color: var(--td-common-white);
				position: absolute;
				width: 75px;
				height: 75px;
				line-height: 75px;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				right: 0;
				margin: 0 auto;
				&:hover{
					background: var(--td-theme-secondary);
					color: var(--td-common-white);
				}
			}
		}
	}
}