/* animation  */
@keyframes banner {
	50% {
		transform: translateY(-20px);
	}
}
@keyframes up {
	0% {
		width: 0;
	}
	15% {
		width: 100%;
	}
	85% {
		opacity: 1;
	}
	90% {
		width: 100%;
		opacity: 0;
	}
	100% {
		width: 0;
		opacity: 0;
	}
}
/* animation  */
@keyframes borderanimate2 {
	0% {
		transform: translate(-50%,-50%) scale(.8);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%,-50%) scale(2.5);
		opacity: 0;
	}
}
/* banner hover start */
/* banner hover end */
.banner {
	background: url(../assets/image/others/banner/Hero.jpg) no-repeat center / cover;
	padding-top: 210px;
	padding-bottom: 75px;
}
.banner-text {
	position: relative;
	z-index: 1;
	h1 {
		font-weight: 700;
		font-size: 65px;
		color: #04091E;
		margin-bottom: 0;
		line-height: 92px;
		letter-spacing: -0.01em;
	}
	p {
		font-weight: 400;
		font-size: 24px;
		line-height: 150%;
		color: #747681;
		padding-top: 14px;
		margin-right: 50px;
	}
}
.banner-vic {
	position: absolute;
	bottom: 106px;
	left: 0;
	z-index: -1;
}
.banner-vic-1 {
	position: absolute;
	bottom: -144px;
	left: -211px;
	animation: banner 7s linear infinite;
}
.banner-btn {
	margin-top: 46px;
}
.banner-btn-item {
	display: flex;
	gap: 36px;


	.banner-btn-left{
		line-height: 0;
	}
}
.banner-btn-right {
	display: flex;
	align-items: center;
	gap: 20px;
	.vidio {
		
		
		a {
			i {
				height: 60px;
				width: 60px;
				border-radius: 50px;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
				color: #2662FA;
				border: 1.5px solid #2662faa9;
				background-color: #F4F8FA;
			}
			position: relative;
			z-index: 1;
            &::after{
                position: absolute;
                content: "";
				top: 24%;
                left: 50%;
                height: 45px;
                width: 45px;
                background-color: rgb(59 130 246 / 0.5);
                animation: borderanimate3 2s linear infinite;
                z-index: -1;
                border-radius: 50px;
                transition: all linear 0.3s;
                
            }
		}
	}
}
.text {
	span {
		font-weight: 500;
		font-size: 15px;
		color: #04091E;
		letter-spacing: 3px;
	}
	p {
		font-weight: 500;
		font-size: 15px;
		color: #747681;
	}
}




@keyframes  borderanimate3 {
    0%{
        transform: translate(-50%,-50%) scale(.8);
    }
    60%{
        opacity: 1;
    }

    100%{
        transform: translate(-50%,-50%) scale(2.5);
        opacity: 0;
    }
}












// banner-two start 

.banner-two{


background: url(../assets/image/others/banner/banner-bg-two.png) no-repeat center / cover;
padding: 180px 0 193px 0;



.banner-text{
	h1{
		position: relative;
		z-index: 1;

		.heading-inner-text{
		
			display: block;
		
		}
	

		&::before{
			position: absolute;
			content: "";
			top: 239px;
			left: 0;
			width: 451px;
			height: 6%;
			background-image: url(../assets/image/others/victor/banner-vic-two.png)   ;
			z-index: -1;
			opacity: 0.66;
		}
	}
}



.banner-btn-text{
	margin-top: 60px;
	h4{
		font-size: 20px;
		font-weight: 400;
		line-height: 32px;
		color: #747681;
		span{
			font-weight: 600;
			font-size: 32px;
			color: #47D990;
		}
	}
}



}




// banner-three start 

.banner-three{

background: url(../assets/image/others/banner/banner-three-bg.png) no-repeat center / cover;
padding-bottom: 60px;
padding-top: 187px;

.banner-text{
	h1{
		position: relative;
		z-index: 1;
		color: #fff;
		letter-spacing: -0.01em;
		&::before{
			position: absolute;
			content: "";
			top: 243px;
			left: 3px;
			width: 450px;
			height: 6%;
			background-image: url(../assets/image/others/victor/banner-vic.png)   ;
			z-index: -1;
			opacity:1 ;
			border-radius: 10px;
		}
	}

	p{
		color: #F4F4F4;
	}
}


.banner-btn-right {
	display: flex;
	align-items: center;
	gap: 20px;
	.vidio {
		a {
			i {
				height: 60px;
				width: 60px;
				border-radius: 50px;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
				color:  #DAED1A;
				background-color: #050F25;
				position: relative;
				z-index: 1;
				border: 1.5px solid rgba(218, 237, 26, 0.5);
			}
			
            &::after{
                position: absolute;
                content: "";
                top: 2px;
                left: 50%;
                height: 45px;
                width: 45px;
                background-color: rgba(218, 237, 26, 0.5);
                animation: borderanimate3 2s linear infinite;
                z-index: -1;
                border-radius: 50px;
                transition: all linear 0.3s;
                
            }
		}
	}
}

.text {
	span {
		color: #fff;
	}
}




.banner-btn-text{
	h4{
		font-weight: 500;
font-size: 20px;
line-height: 160%;
		span{
			color: #DAED1A;
		}
	}
}




}








// banner-lawyer 


.banner-lawyer{

background: url(../assets/image/others/banner/lawyer-b.png) no-repeat center / cover;
padding: 258px 0 75px 0;

.banner-lawyer-img{
	img{
		width: 587px;
		height: 648px;
	}
}

.lawyer{
	padding: 0;
	padding-left: 30px;
}
.banner-lawyer-text{
	h1{
		position: relative;
		z-index: 1;
		color: #fff;
		font-weight: 700;
		font-size: 60px;
		line-height: 140%;
		&::before{
			position: absolute;
			content: "";
		    top: 51px;
    		left: 274px;
    		width: 256px;
   			height: 11px;
			background-image: url(../assets/image/others/victor/Line.png)    ;
			z-index: -1;
			opacity:1 ;
		}
	}

	p{
		font-weight: 400;
		font-size: 20px;
		line-height: 160%;
		color: #F4F8F7;
		padding: 0 20px 0 50px;
		position: relative;
		margin-top: 24px;
		&::before{
			position: absolute;
			content: "";

			top: 21%;
			left: 6px;

			width: 3px;
			height: 41px;
			background-color: #C4C4C4;
		}
	}
}



.banner-lawyer-btn{
	line-height: 0;
	margin-top: 44px;
	.btn-style-3{
		width: 227px;
	
			
	}
}





}











.hero {
    background: url("../assets/image/hero-bg-min.png") no-repeat center / cover;
    min-height: 950px;
    display: flex;
    align-items: center;

    .hero-content {
        padding: 100px 0 0 0;
		position: relative;
		z-index: 1;
		.hero-victor-img{
			position: absolute;
			top: 326px;
			left: -8px;
			z-index: -1;
		}

		.hero-content-imgg{
			position: absolute;
			top: 360px;
    		left: -140px;
			animation: banner 4s linear infinite;
		}


		h1{
			font-weight: 700;
			font-size: 72px;
			line-height: 84.46px;
			color: rgba(245, 245, 245, 1);
		}

      
	


        .hero-btn {
            display: flex;
            justify-content: space-between;
            background-color:rgba(245, 245, 245, 1);
            padding: 10px 10px 10px 20px;
            border-radius: 8px;

            input {
                border: none;
                background-color: rgba(245, 245, 245, 1);
                outline: none;
                font-family: inherit;
                font-size: 16px;
                width: 60%;
            }

			.cmn-nav{
				padding: 16px 24px;
				background-color:rgba(253, 204, 4, 1);
				color: rgba(4, 9, 30, 1);
				border-radius: 8px;
				display: inline-block;
				border: 1px solid rgba(253, 204, 4, 1);
				transition: all 0.5s;
				&:hover{
					background: rgba(245, 245, 245, 1);
				}
			}
        }

        .hero-testimonial-img {
            margin: 40px 0 0 0;
        }



		.hero-btn-1{
			line-height: 0;
			margin-top: 24px;
			.btn-style-4{
				width: 227px;
			}
		}







    }

    .hero-content p {
        padding: 20px 0;
        font-size: 24px;
        line-height: 36px;
        color: rgba(245, 245, 245, 1);

        span {
            display: block;
        }
    }

    .hero-img {
        width: 550.01px;
        height: 786px;

        .hero-inner-img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 80px;
            right: -95px;
        }

        .chart {
            top: 281px;
            z-index: 1;
            left: -16px;
        }

        .congratulation {
            right: -130px;
            top: 241px;
            z-index: 1;
        }

        .students {
            right: -170px;
            bottom: 0px;
            z-index: 1;
        }

    }
}




// photographer 

.photographer {
    background: url("../assets/image/Photographer/photographer-bg.png") no-repeat center / cover;

    .hero-img {
        width: 770px;
        height: 757px;

        .hero-inner-img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 96px;
            left: -250px;
        }
    }

    .hero-content {
        padding: 100px 0 0 0;
		position: relative;
		z-index: 1;

		.hero-vic{
			position: absolute;
			top: 157px;
			left: -10px;
			z-index: -1;
		}

        .hero-tittle p {
            padding: 20px 0;
            font-size: 24px;
            line-height: 36px;
            color: $secondary-color;
        }

        .hero-achievement {
            p {
                font-size: 20px;
                font-weight: 600;
                line-height: 32px;
                color: rgba(71, 217, 144, 1);
            }

            .hero-achievement-img {
                img {
                    margin-right: 16px;
                }
            }

        }
    }

}








// .lawyer 

.lawyer {
    background: url("../assets/image/lawyer/hero-bg.png") no-repeat center / cover;

    .hero-img {
        width: 587px;
        height: 648px;
        .hero-inner-img {
            position: absolute;
            top: 96px;
            left: -70px;
            width: 100%;
            height: 100%;
        }
    }
    .hero-gap{
        margin: 0;
        padding: 0;
    }
    .hero-content {
        h1 {
            font-size: 58px;
        }

		.hero-tittle{
			position: relative;
			z-index: 1;
			.hero-tittle-img{
				position: absolute;
			    top: 54px;
    			left: 253px;
				z-index: -1;
			}
		}

        .hero-tittle p {
            padding: 20px 0;
            font-size: 22px;
            line-height: 32px;
            font-weight: 400;
            color: $secondary-color;
        }

        .hero-nav {
            background-color: rgba(255, 63, 0, 1);
            border: 1px solid rgba(255, 63, 0, 1);
            margin-top: 54px;

            a {
                color: #ffff;

                i {
                    margin-left: 8px;

                }
            }
        }
    }

}
