/*********************** Banner slider css start ***********************/
.banner-section .banner-inner { position: relative; min-height: 700px; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; z-index: 1; }
.banner-section .banner-inner::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; opacity: 0.8; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 76.62%); }
.banner-section .banner-inner .banner-caption{max-width: 600px;}
.banner-section .banner-inner .banner-caption .title-style-1{ color: var(--global-white); margin-bottom: 24px; }
.banner-section .banner-inner .banner-caption p{ font-size: 18px; color: var(--global-white); line-height: 26px; margin-bottom: 34px; }
.banner-section .slick-dots { width: auto; left: calc(50% - (1224px / 2) + 12px); z-index: 1; bottom: 44px; display: flex; gap: 8px; }
/*********************** Banner slider css end ***********************/

/*********************** Products & Services Home Css Start ***********************/
.product-services-section{position: relative;z-index: 1;}
.product-wrapper{display: flex;flex-wrap: wrap;gap: 24px;}
.product-wrapper>div{ width: calc(100% / 3 - 16px); }
.product-services-section .slider-arrow-part{display: none}

.product-services-section .common-box p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/*********************** Products & Services Home Css End ***********************/

/*********************** About KC Securities Css Start ***********************/
.about-wrapper{ position: relative; padding: 46px; border-radius: 44px; background-image: url(../assets/images/about-shape.png); background-repeat: no-repeat; background-position: 100px bottom; background-size: 28%; }
.about-content-wrapper { padding: 0px 80px 0px 58px; }
.about-content-wrapper .title-style-2{ color: var(--global-white); margin-bottom: 24px; }
.about-content-wrapper .about-content{margin-bottom: 24px;}
.about-content-wrapper .about-content p{ color: var(--grey-shade-90); margin-bottom: 16px; }
.about-content-wrapper .about-content p:last-child{margin-bottom: 0;}
.about-content-wrapper .know-btn{color: var(--global-white);}
.about-content-wrapper .know-btn:after{filter: brightness(0) invert(1);}
.about-wrapper .about-images { position: relative; padding-top: 91.5%; }
.about-wrapper .about-images img { border-radius: 24px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
/*********************** About KC Securities Css End ***********************/

/*********************** Investor Alerts and Compliance Css Start ***********************/
.investor-alerts-section{background: var(--grey-shade-97);position: relative;z-index: 1;}
.investor-alerts-section:before{ content: ""; position: absolute; width: 100%; height: 100%; background: url(../assets/images/investor-shape.png); bottom: 0; left: 0; background-repeat: no-repeat; opacity: 0.15; z-index: -1; background-position: left bottom; background-size: 100% 100%; }
.investor-alerts-section .row>div{flex-grow: 1;}
.investor-alerts-section .row>div:last-child .common-box-img{display: none;}
/*********************** Investor Alerts and Compliance Css End ***********************/

/*********************** Filing Complaints on Scores Css Start ***********************/
.filing-complaints-section{padding: 60px 0;}
.filing-complaints-section .title-main { display: flex; align-items: center; justify-content: space-between; }
.filing-wrapper{display: flex;flex-wrap: wrap;gap: 24px;}
.filing-wrapper>div{width: calc(100% / 3 - 18px);}

.filing-box{position: relative;display: flex;gap: 16px;align-items: center; background: var(--secondary-s-97);border-radius: 8px; padding:15px;min-height: 108px;border: 1px solid transparent;transition: 0.5s all; -webkit-transition: 0.5s all;}
.filing-box .filing-img{ background: var(--secondary-s-95); width: 76px; height: 76px; padding: 16px; border-radius: 8px; transition: 0.5s all; -webkit-transition: 0.5s all; border-radius: 50%; }
.filing-box .filing-img>span { position: relative; overflow: hidden; display: block; width: 44px; height: 44px; transition: 0.5s all; -webkit-transition: 0.5s all; }
.filing-box .filing-img>span img { position: absolute; object-fit: cover; transition: 0.5s all; -webkit-transition: 0.5s all;width: 76px; }
.filing-box .filing-img>span img:nth-child(2) { transform: translateY(42px); }
.filing-box p{color: var(--grey-shade-20);margin: 0;font-weight: 600;margin-bottom: 8px;}
.filing-box .filling-content ul{padding-left: 15px;}
.filing-box .filling-content ul li{font-size:16px;font-weight: 500;line-height: 24px;color: var(--grey-shade-40);}
.filing-box:hover{ border-color:var(--global-white) ; }
.filing-box:hover .filing-img>span img:first-child { transform: translateY(-55px); }
.filing-box:hover .filing-img>span img:nth-child(2) { transform: translateY(0px); }

.filing-complaints-section .primary-button{ font-size: 14px; line-height: 22px; }
/*********************** Filing Complaints on Scores Css End ***********************/

/*********************** Trade Online With KC Securities Css Start ***********************/
.trade-section{background: var(--secondary-s-20);}
.trade-section .title-main .title-style-2{margin-bottom: 8px;color: var(--global-white);}
.trade-section .title-main p{font-size: 20px;font-weight: 600;line-height: 28px;color: var(--global-white);}
.trade-wrapper-box{position: relative;border: 1px solid var(--base-color-s-main);border-radius: 24px;transition: 0.5s all;-webkit-transition: 0.5s all;}
.trade-wrapper-box:hover{border-color: var(--global-white);}
.trade-wrapper-box:hover .trade-content{border-color: var(--global-white);}
.trade-box-img{padding: 28px 20px;text-align: center;display: flex;align-items: center;justify-content: center; background: url(../assets/images/trade-shape.svg); background-repeat: no-repeat; background-position: left bottom; background-size: 28%; }
.trade-content{position: relative;padding: 24px;text-align: center;border-top: 1px solid var(--base-color-s-main); border-radius: 0 0 24px 24px;transition: 0.5s all;}
.trade-content .title-style-6{margin-bottom: 24px;color: var(--global-white);}
/*********************** Trade Online With KC Securities Css End ***********************/

/*********************** Common-part Css Start ***********************/
.common-card{ padding: 80px 0;background: var(--secondary-s-97);}
.common-card-wrapper{display: flex;gap: 24px;flex-wrap: wrap;}
.common-card-wrapper>div{ width: calc(100% / 6 - 20px); }
.common-filter { position: relative; display: flex; gap: 16px; align-items: center; border-radius: 8px; background: var(--secondary-s-95); padding: 15px; min-height: 108px; border: 1px solid transparent; transition: 0.5s all; -webkit-transition: 0.5s all; flex-direction: column; }
.common-filter .common-filter-img{ background: var(--secondary-s-90); width: 66px; height: 66px; padding: 16px; transition: 0.5s all; -webkit-transition: 0.5s all; border-radius: 50%; }
.common-filter .common-filter-img>span { position: relative; overflow: hidden; display: block; width: 34px; height: 34px; transition: 0.5s all; -webkit-transition: 0.5s all; }
.common-filter .common-filter-img>span img { position: absolute; object-fit: cover; transition: 0.5s all; -webkit-transition: 0.5s all;width: 34px;height: 34px;object-position: center; }
/* .common-filter .common-filter-img>span img:first-child{filter: brightness(0) invert(1);} */
.common-filter .common-filter-img>span img:nth-child(2) { transform: translateY(42px); }
.common-filter p{color: var(--grey-shade-40);margin: 0;font-weight: 600;}
.common-filter:focus{ background: var(--secondary-s-95)!important; }
.common-filter:hover .common-filter-img {background: var(--global-white);}
.common-filter:hover .common-filter-img>span img:first-child { transform: translateY(-55px); }
.common-filter:hover .common-filter-img>span img:nth-child(2) { transform: translateY(0px); }
/*********************** Common-part Css End ***********************/


/*********************** Media-query ***********************/
@media (min-width: 1200px) and (max-width: 1399px) {
    /*********************** Banner slider css ***********************/
    .banner-section .slick-dots { left: calc(50% - (1140px / 2) + 12px); }

     /*********************** Common Box css ***********************/
    .filing-wrapper .filing-box { gap: 12px; padding: 12px; }
}


@media (min-width: 992px) and (max-width: 1199px) {
    /*********************** Banner slider css ***********************/
    .banner-section .banner-inner { min-height: 550px; }
    .banner-section .slick-dots { left: calc(50% - (960px / 2) + 12px); }

    /*********************** Common Box css ***********************/
    .common-box p { font-size: 15px;line-height: 23px; }

    /*********************** About KC Securities ***********************/
    .about-content-wrapper { padding: 0px 30px 0px 0px; }
    .about-wrapper .about-images {padding-top: 100%;height: 100%; }

    /*********************** Filing Complaints on Scores ***********************/
    .filing-box { align-items: center; border-radius: 8px; padding: 15px; min-height: 108px; flex-direction: column; justify-content: center; }
    .filing-box p { text-align: center; }
    .filing-box .filing-img { margin: 0 auto; }

    /*********************** Common-part  ***********************/
    .common-card-wrapper>div { width: calc(100% / 6 - 17px); }
    .common-card-wrapper { display: flex; gap: 20px; }
    .common-filter{padding: 13px;}
    .common-filter p{ font-size: 14px; line-height: 22px; }

    /*********************** Trade Online With KC Securities Css Start ***********************/
    .trade-box-img { min-height: 380px; }
       
}


@media (min-width: 768px) and (max-width: 991px) {
     /*********************** Banner slider css ***********************/
    .banner-section .banner-inner { min-height: 500px; }
    .banner-section .banner-inner .banner-caption { max-width: 75%; }
    .banner-section .slick-dots { left: calc(50% - (720px / 2) + 12px); }

    /*********************** Trade Online With KC Securities Css Start ***********************/
    .trade-box-img { min-height: 380px; }
}

@media (max-width: 991px) {
    /*********************** Products & Services Home ***********************/
    .product-wrapper>div { width: 100%; }
    .product-wrapper .slick-slide{margin: 0 8px;height: 100%;}
    .product-services-section .slider-arrow-part{display: flex;}

     /*********************** About KC Securities ***********************/
    .about-wrapper { padding: 30px; }
    .about-content-wrapper { padding: 0px 0px 30px 0px; }
    .about-wrapper .about-images {padding-top: 400px;height: auto; }

    /*********************** Filing Complaints on Scores ***********************/
    .filing-complaints-section .title-main .primary-button{display: none;}
    .filing-wrapper>div { width: calc(100% / 2 - 12px); }

    /*********************** Common-part  ***********************/
    .common-card { padding: 40px 0; }
    .common-card-wrapper>div { width: calc(100% / 3 - 16px); }

    .filing-complaints-section{padding: 40px 0;}

    .filing-box p{font-size: 16px;}
    .filing-box .filling-content ul li{font-size:14px;line-height: 22px;}
}


@media (min-width: 576px) and (max-width: 768px) {
     /*********************** Banner slider css ***********************/
    .banner-section .banner-inner { min-height: 500px; }
     .banner-section .slick-dots { left: calc(50% - (540px / 2) + 12px); }
}
@media (max-width: 767px) {
    /*********************** Banner slider css ***********************/
    .banner-section .banner-inner .banner-caption { max-width: 370px; }
    .banner-section .banner-inner { min-height: 400px; }
    .banner-section .banner-inner .banner-caption .title-style-1 { margin-bottom: 10px; }
    .banner-section .banner-inner .banner-caption p { font-size: 16px; line-height: 24px; margin-bottom: 15px; }
    /*********************** Filing Complaints on Scores ***********************/
    .filing-wrapper>div { width: 100%; }

    /*********************** Trade Online With KC Securities***********************/
    .trade-content { padding: 15px; }
    .trade-content .title-style-6 { margin-bottom: 15px; }
    .trade-section .title-main p { font-size: 18px; line-height: 26px; }
}



@media (max-width: 575px) {
     /*********************** Banner slider css ***********************/
  
    .banner-section .slick-dots {left: calc(50% - (100% / 2) + 12px); }

     /*********************** About KC Securities ***********************/
    .about-content-wrapper .title-style-2 { margin-bottom: 12px; }
    .about-wrapper { padding: 22px;border-radius: 20px; }
    .about-wrapper .about-images img { border-radius: 14px; }
    .about-wrapper .about-images { padding-top: 300px; }
    /*********************** Common-part  ***********************/
    .common-card-wrapper>div { width: calc(100% / 2 - 12px); }
}


@media (max-width: 480px){
    /*********************** Banner slider css ***********************/
    /* .banner-section .banner-inner .banner-caption .title-style-1 {
        font-size: 32px;
        line-height: 40px;        
    } */
}

@media (max-width: 360px){
    .common-card-wrapper { gap: 15px; }
    .common-card-wrapper>div { width: calc(100% / 2 - 8px); }
    .common-filter p{ font-size: 14px; }
}