/* banner */

@media (width > 2500px ){
	.banner-section{
		.right-content{
			min-height: calc(75vh - 145px - 32px) !important;
		}
	}
}

.admin-bar .banner-section{
	.right-content{
		min-height: calc(100vh - 145px - 32px);
	}
}
.banner-section{
    display: flex;
    align-items: end;
    .title-img{
        display: flex;
        justify-content: end;
    }
    .content-wrap{
        align-items: end;
        --left-content: 710px;
        --right-content: calc(100% - var(--left-content) - var(--gap));
    }
    .right-content{
        min-height: calc(100vh - 145px);
        position: relative;
        .img-holder{
            position: absolute;
            top: 0;
            bottom: 0;
            left: -335px;
            right: var(--side-gap);
            clip-path: polygon(0 23%, 100% 0%, 100% 100%, 0% 100%);
        }
    }
    .left-content{
        position: relative;
        z-index: 1;
        .img-holder{
            height: 160px;
            width: 240px;
        }
        .content{
            display: flex;
            flex-direction: column;
            gap: 106px;
        }
    }
    .inner-content{
        padding: 32px;
        width: 100%;
		background-color: var(--bg-color);
        .title-wrap{
            display: flex;
            flex-direction: column;
            gap: 8px;

            .sub-title{
                font-size: 18px;
                font-family: var(--primary-fonts);
                font-weight: 500;
                line-height: 1.7;
                text-transform: uppercase;
                margin: 0 0 16px;
                color: var(--title-color);
                display: inline-block;
            }
            .title{
                color: var(--title-color);
                margin-bottom: 0;
                font-size: 46px;
                line-height: 1.4;
            }
            p{
                font-size: 20px;
                margin-top: 16px;
                line-height: 1.5;
                color: var(--text-color);
                &:last-child{
                    margin-bottom: 0;
                }
            }
            img , svg{
                --size: 80px;
                height: var(--size);
                width: var(--size);
            }
        }
        .btn-wrap{
            margin-top: 24px;
        }
    }
    &.min{
        .content-wrap{
            --left-content: 585px;
        }
        .right-content {
            .img-holder{
                left: -160px;
            }
        }
        .left-content .main-title .title{
            font-size: 40px;
        }
    }
    &.max{
        .content-wrap{--left-content: 766px;}
        .right-content{
            .img-holder{
                left: -260px;
            }
        }
        &.right{
            .right-content{
                .img-holder{
                    right: -260px;
                }
            }
        }
    }
    &.small{
        .right-content{
            min-height: 616px;
            .img-holder{
                clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
            }
        }
        .inner-content{
            .title{
                font-size: 32px !important;
            }
        }
        .title-img{
            display: none;
        }
    }
    &.right{
        .content-wrap{
            flex-direction: row-reverse;
        }
        .right-content{
            .img-holder{
                clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%);
                right: -180px;
                left: var(--side-gap) !important;
            }
        }
    }
    &.icon-bottom .title-wrap{
        flex-direction: column-reverse;
        gap: 16px;
    }
    &.thankyou-banner{
        .title-img { justify-content: start;}
        .content-wrap{--left-content: 766px;}
        .inner-content{
            .title-wrap{
                .title{
                    font-size: 48px;
                }
            }
        }
        .right-content{min-height: 615px;}
    }
    &.center{
        .container{
            max-width: 740px;
        }
        .content-wrap{
            min-height: 240px;
            .right-content{
                display: none;
            }
        }
    }
	&.inner-border-left .inner-content{
		border-left: 2px solid var(--title-color);
	}
}
@media (width < 1025px) {
    .banner-section{
        --side-gap: -20px !important;
        .main-title{
            .title{
                font-size: 42px !important;
            }
        }
        .left-content .img-holder{display: none;}
		&.max{
            .right-content{
                .img-holder{
                    left: -410px;
                }
            }
			&.right{
				.right-content{
					.img-holder{
						rigth: -410px;
					}
				}
			}
        }
		&.small{
			.right-conten{
				min-height: 470px;
			}
		}
    }
}
@media (width < 991px ) {
    .banner-section{
        .content-wrap{
            flex-direction: column-reverse !important;
            --right-content: 100% !important;
            --left-content: 100% !important;
            gap: 0;
        }
        .right-content{
            width: 100%;
            min-height: 500px !important;
            .img-holder{ 
                left: -20px !important;
                right: -20px !important;
            }
        }
        .left-content{
            margin-top: -60px;
        }
        .main-title .title{
            font-size: 40px !important;
            line-height: 1.5;
        } 
		&.max{
			.content-wrap {
				--left-content: 100%;
			}
		} 
        &.small{
            .inner-content{
                border: 1px solid #0224251A;
                position: relative;
                &::before{
                    content: '';
                    background-color: var(--bg-color);
                    position: absolute;
                    left: -25px;
                    right: -25px;
                    top: 59px;
                    bottom: -1px;
                    z-index: -1;
                }
            }
        }
        &.center{
            .content-wrap{
                align-items: start;
            }
        }
    }
}
@media (width < 767px) {
    .banner-section{
		padding: 0 !important;
        .right-content{
            min-height: 310px !important;
        }
        .inner-content{
            .title-wrap {
                gap: 24px;
            }
        }
		&.right{
            .right-content{
                min-height: 275px !important;
                .img-holder{
                    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);
                }
            }
        }
		&.contact-banner .left-content .main-title .title{
			font-size: 28px !important;
		}
        .btn-box {width: 100%;}
    }
}
/* banner */