.about-low-area{
    position: relative;
    &.about-low-area2{
        &::before{
            position: unset;
            background: none;
        }
    }

    // left content
    position: relative;
    .about-caption{
        padding-left: 50px;
		@media #{$md}{
			padding-top: 50px;
		}
		@media #{$sm}{
			padding-top: 50px;
		}
		@media #{$xs}{
			padding-top: 20px;
		}
        p.about-cap-top{
            font-size: 18px;
            color: #545454;
            line-height: 1.6;
            margin-bottom: 29px;
            font-weight: 400;
        }
         p{
            font-size: 16px;
            color: #071112;
            line-height: 1.6;
            margin-bottom: 33px;
            padding-right: 50px;
            @media #{$lg}{
                padding-right: 20px;
            }
            @media #{$sm}{
                padding-right: 0px;
            }
            @media #{$xs}{
                padding-right: 0px;
            }
        }
    }
     
    // left img
    .about-right-cap{
        position: relative;
        @media #{$xs}{
            padding-top: 50px;
           
        }
        @media #{$md}{
            padding-top: 50px;
        }
        @media #{$lg}{
            padding-top: 50px;
        }
        @media #{$sm}{
            padding-top: 50px;
        }
        @media #{$sm}{
            padding-top: 50px;
        }
        .about-right-img{
            img{
                width: 100%;
                margin-bottom: 15px;
            }
        }
        p{
            font-size: 22px;
            color: #140C40;
            font-weight: 300;
            line-height: 1.5;
        }
        .about-right-cap2{
            margin-bottom: 0px;
            @media #{$xs}{
                margin-bottom: 0px;
            }
            @media #{$md}{
                margin-bottom: 0px;
            }
            @media #{$sm}{
                margin-bottom: 0px;
            }
            @media #{$sm}{
                margin-bottom: 0px;
            }
        }
	}
	
	// Counter

	.single-counter{
		margin-bottom: 10px;
		.counter{
            color: $theme-color;
            font-size: 50px;
            font-weight: 600;
			font-family: $font_1;
			line-height: 1;
			margin-bottom: 12px;
			display: inline-block;

			text-transform: uppercase;
			@media #{$xs}{
				font-size: 40px;
			}
		}
		p{
            color: $theme-color;
            font-size: 50px;
            font-weight: 600;
			line-height: 1;
			margin: 0;
			padding: 0;
			display: inline-block;
			font-family: $font_1;

			@media #{$xs}{
				font-size: 40px;
			}

		}
	}
	.pera-count{
		h5{
			color: #131933;
			font-size: 24px;
			font-weight: 400;
			margin-bottom: 11px;
			font-family: $font_2;
		}
		p {
			color: #132E43;
			font-size: 22px;
			line-height: 1.4;

			@media #{$lg}{
				font-size: 17px;
			}
			@media #{$sm}{
				font-size: 17px;
			}
		}
	}
}

// Video Area 
.video-area{
    height: 710px;
    @media #{$lg}{
        height: 700px;
    }
    @media #{$md}{
        height: 400px;
    }
    @media #{$sm}{
        height: 400px;
    }
    @media #{$xs}{
        height: 300px;
    }
    // Video icon
    .video-icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        text-align: center;
        @media #{$lg}{
            // right: 48px;
        }
        @media #{$md}{
            // right: 63px;
        }

        a{
            background: #fff;
            color: #F04506;
            width: 100px;
            height: 100px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            img{
                position: relative;
                z-index: 1;
            }
            &::after{
                    position: absolute;
                    border: 80px solid rgba(255, 255, 255,.3);
                    content: "";
                    border-radius: 50%;
                    left: -31px;
                    top: -31px;
                    right: 0;
                    z-index: 0;
                    background: #0000;
                    @media #{$xs}{
                        border: 70px solid rgba(255, 255, 255,.3);
                        left: -35px;
                        top: -34px;
                        right: 0;
                        // position: unset;
                        border: 0;
                    }
            }
            @media #{$xs}{
                width: 60px;
                height: 60px; 
                line-height: 60px;
            }
            i{
                font-size: 20px;
                font-size: 20px;
                line-height: 1;
                position: relative;
                right: -2px;
                top: 2px;
                color: $theme-color;
            }
        } 
        // btn Animated Style
        a.btn-icon{
            position: relative;
            &::before{
                content: '';
                display: inline-block;
                position: absolute;
                top: -2px;
                left: -2px;
                bottom: -2px;
                right: -2px;
                border-radius: inherit;
                border: 1px solid #fff;
                -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
                animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;

                @media #{$xs}{
                    border: 0;
                }
            }
            /* Animations */
            @-webkit-keyframes btnIconRipple { 
                0% { border-width: 4px;
                    -webkit-transform: scale(1);
                    transform: scale(1); }
                50% { 
                    border-width: 1px;
                    -webkit-transform: scale(1.50);
                    transform: scale(1.50); 
                    }
                80% { 
                    border-width: 1px;
                    -webkit-transform: scale(1.90);
                    transform: scale(1.90); 
                    }
                100% { 
                    opacity: 0; }
                }
                @media #{$xs}{
                    position: unset;
                }
            /* End Animated */
            &:hover{
                background: #c6a16e;
                background: #fff;
                color: #FF9F67;
            }
        }
    }
}