body{
     font-family: "Inter", sans-serif;
}

body, html{
    overflow-x:clip;
}

:root {
    --primary-color: #2352A1;
    --secondary-color:#EC223F;
}

p{
    font-size:16.5px;
    color:rgba(255, 255, 255, 0.74);
}
.bg-gras{
    background: #1b1b1b;
}



img{
    max-width:100%;
    height:auto;
}

a {
    color: #000;
    text-decoration: none;
}

.mega-menu{
    padding: 15px 20px;
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 30px;
    max-width: fit-content;
    margin: 0 auto;
}

.mega-menu li a{
    color: #fff;
    font-size: 16.5px;
    font-weight: 600;
}

.header-btn{
    text-align:end;
}

.enqur-btn{
    font-size:14px;
    background-color: #2352A1;
    padding: 15px 30px;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all .1s cubic-bezier(.68,.01,.58,.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-sec-brand{
    position: relative;
   
    padding: 13rem 0 5rem;
    z-index: 1;
    overflow: hidden;
}


.banner-content-box .banne-tilsd{
     font-size: 63px;
    font-weight: 200;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 50px;
}

.banner-content-box .banne-tilsd span{
    font-weight:600;
}
.banner-img-box{
    position:relative;
}

.banner-img-box .hero-img img{
   
    border-radius: 30px;
    width:100%;
    object-fit:cover;
}

.banner-img-box .banner-top-text{
        padding: 10px 30px 30px 10px;
    background: #1b1b1b;
    border-radius: 0 0 30px 0;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 450px;
}


.banner-img-box .banner-top-text p{
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: #c4c4c4;
    margin: 0;
}

.banner-img-box .banner-bottom-text{
    padding: 20px 0 0 20px;
    background: #1b1b1b;
    border-radius: 30px 0 0 0;
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-img-box .banner-bottom-text .title{
     color: #fff;
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
    text-align: right;
}
.banner-img-box .banner-bottom-text .title span{
    font-weight: 200;
    display: block;
}
.banner-img-box .banner-bottom-text .arrowbtn{
    min-width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 5px;
    background:var(--secondary-color);
    display: block;
    margin-left: 15px;
}

.banner-img-box .banner-bottom-text .arrowbtn i{
        color: #fff;
    font-size: 27px;
    transform: rotate(-90deg);
    display: block;
    position: relative;
    left: 5px;
}

.banner-img-box .banner-bottom-text:before, .banner-img-box .banner-bottom-text:after {
    content: "";
    position: absolute;
    background-color: transparent;
    height: 40px;
    width: 40px;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    box-shadow: 0 20px 0 0 #1b1b1b;
    border-bottom-right-radius: 20px;
    z-index: 4;
    left: auto;
    right: 0px;
    bottom: auto;
    top: -40px;
}
.banner-img-box .banner-bottom-text:after{
    left: -40px !important;
    bottom: 0px !important;
    top:unset;
}

.banner-content-box .daiment-img{
    position: absolute;
    top: 130px;
    left: 50px;
    z-index: -1;
}


.banner-sec-brand .shape-circle {
    width: 45vw;
    height: 45vw;
    border: 5vw solid rgb(246 166 178);
    border-radius: 50%;
    position: absolute;
    top: -10%;
   right: -10%;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    opacity: .4;
    z-index: -1;
}

.brand-sec-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    padding:10px 0 0;
}

.sticky.brand-sec-header{
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.1);
    transform: translateY(0%);
    visibility: visible;
    animation: sliddown 1s;
}

@keyframes sliddown{
    0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
}
100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}


.banner-img-box .banner-top-text:before,
.banner-img-box .banner-top-text:after{
        content: "";
    position: absolute;
    left: 0;
    bottom: -40px;
    background-color: transparent;
    height: 40px;
    width: 40px;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    box-shadow: 0 -20px 0 0 #1b1b1b;
    border-top-left-radius: 20px;
    z-index: 4;
}

.banner-img-box .banner-top-text:before{
    left: auto;
    right: -40px;
    bottom: auto;
    top: 0;
}

.about-sec-main{
    padding:0 0 3rem;
    position:relative;
  
}
.about-sec-main .pagebtna .arrow{
    background:var(--secondary-color)
}
.about-img-main{
    position:relative;
}
.about-img-main img{
    mask-image: url(../image/home/about-img.svg);
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
}

.pagebtna{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 5px 5px 5px 20px;
    background: rgb(255 255 255 / 20%);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    width: max-content;
    font-size: 14px;
    text-transform: uppercase;
    color:#fff;
    transition: 0.4s linear;
}
.pagebtna:hover .arrow {
    background:var(--secondary-color);
    transform: rotate(45deg);
}

.pagebtna:hover .arrow i{
    left: 1px;
    top: 2px;
}
.about-img-main .pagebtna{
    position: absolute;
    bottom:5px;
    right: 30px;
}

.pagebtna .arrow {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background:#2352A1;
    text-align: center;
    margin-left:10px;
    transition: 0.4s linear;
}

.pagebtna .arrow i{
      position: relative;
    transform: rotate(-45deg);
    display: inline-block;
    font-size: 18px;
    left: 3px;
    top: 2px;
    transition: 0.4s linear;
}

.about-content-box{
    margin-left:50px;
}
.section-title.text-center .sec-small-title{
     margin: 0 auto 10px;
     max-width:fit-content;
}
.sec-small-title{
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px;
    padding-left: 18px;
    display: block;
    position:relative;
}
.sec-small-title::before {
    content:'';
    position:absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color:  var(--secondary-color);
}
.sec-big-title{
    color: #fff;
    font-weight: 600;
    font-size: 45px;
    line-height: 1.3;
   margin-bottom: 1rem;
}

.key-num-abot{
     padding: 0;
    display: flex;
    margin: 50px 0 0;
    list-style: none;
    justify-content: space-between;
}
.key-num-abot li{
    text-align:center;
}

.key-num-abot li span, .key-num-abot li em{
    font-size:80px;
    color: var(--primary-color);
    margin:0 0 15px;
    font-style: normal;
}

.key-num-abot li p{
    color: #c4c4c4;
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.about-content-box p{
      color: #c4c4c4;
    text-align: justify;
}

.why-choose-sec{
     padding:2rem 0;
    position:relative;
    background:linear-gradient(0deg, #000000, #00000005);
}

.why-choose-sec .why-choose-box .why-btn{
    margin:30px 0 0 ;
}

.why-choose-box .section-title{
    max-width:90%;
}

.client-logo-carosule.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: linear !important;
}

.client-logo-carosule .swiper-wrapper{
    margin-top:100px !important;
}

.services-sec-main{
    padding:2rem 0 5rem;
    position:relative;
    background:#1b1b1b;
    z-index: 1;
}

.services-sec-main .shape-circle{
    width: 45vw;
    height: 45vw;
    border:5vw solid rgb(247 107 107 / 74%);
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    right: -25%;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    opacity: .5;
    z-index: -1;
    top:0;
}

.services-sec-main .service-righ-box p{
    color: #c4c4c4;
}

.service-righ-box  .servic-btn{
    margin:30px 0 0;
}

.service-box{
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position:relative;
}
.service-box.hovered.active .text-btn-brand{
    opacity:1;
    visibility:visible;
}
.service-box-main{
    max-width:90%;
    margin-left:auto;
    margin-top:70px;
}

.service-box .servic-imh{
    border-radius: 10px;
    width: 70%;
    transition: all .4s;
    overflow:hidden;
}

.service-box:hover .servic-imh{
    width: 100%;
}

.servic-imh img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.service-bontent-box{
    margin-left:20px;
}
.service-bontent-box .title{
    font-size:65px;
    font-weight:600;
    color:#fff;
}

.service-bontent-box .title span{
    font-size:15px;
    color: #c4c4c4;
    margin-right:10px;
}
.service-bontent-box .text-btn-brand .box-textbot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:20px 0 0;
    position: relative;
    
}
.service-bontent-box .text-btn-brand{
    opacity:0;
    visibility:hidden;
    transition: 0.4s linear;
}

.service-bontent-box .text-btn-brand p{
   max-width: 70%;
    color: #c4c4c4;
    display: flex
;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
}
.service-bontent-box .text-btn-brand p a{
color: #c4c4c4;
    display: block;
    border: 1px solid #c4c4c4;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 15px;
}
.serv-brnd-btn{
    color: #c4c4c4;
    text-transform: uppercase;
}
.serv-brnd-btn i{
    position: relative;
    transform: rotate(-45deg);
    display: block;
    right: 33px;
    top: -8px;
}

.service-righ-box{
    margin-left:20px;
}
.service-box-main .service-box:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.service-bot-hero{
    position: relative;
    background-image: url(../image/home/hero-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
}

.service-bot-hero .container-fluid{
    padding:0;
}

.portfoli-sec-main{
    background: #000;
    position:relative;
    padding:0 0 5rem;
}

.portfoli-sec-main:before, 
.portfoli-sec-main:after{
    width: 426px;
    height: 426px;
    border-radius: 100%;
    opacity: 0.9;
    background:rgba(255, 255, 255, 0.74);
    filter: blur(220px);
    position: absolute;
    content: "";
    top:30%;
}

.portfoli-sec-main:before{
    top: -213px;
    right: -213px;
}

.portfoli-sec-main .video-portfolio{
    position:absolute;
    z-index:3;
    top:250px;
}
.video-portfolio .sec-big-title{
    font-size:60px;
}
.portfoli-sec-main .video-portfolio .section-title{
        max-width: 60%;
    margin: 0 auto;
    text-align: center;
}
.video-portfolio-sec{
    height: 100vh;
}
.video-portfolio-sec video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center center;
}

.portfoli-btn{
       margin: 30px auto 0;
    max-width: fit-content;
}
.portfoli-btn .pagebtna .arrow{
    background:var(--secondary-color);
}
.project-sec-main{
    position:relative;
    padding:5rem 0;
    background: #000;
}
.project-sec-main .row{
    gap:30px 0;
}

.project-box{
    padding-inline: 10px;
    padding-block-start: 10px;
    border-radius: 30px;
    background-color: #18191b;
}

.portfoli-sec-main .container-fluid{
    padding:0;
}

.project-box .project-img img {
    transition: all 0.5s ease;
    width:100%;
}
.project-box:hover .project-img img{
    transform: scale(1.1) rotate(3deg);
}
.project-box .project-img{
    border-radius: 30px;
    overflow: hidden;
}

.project-box .project-content .title-categies span{
      
   font-weight:600;
    position: relative;
    padding-left: 18px;
    color: var(--secondary-color);
    margin:0 0 10px;
    display:block;
}

.project-box .project-content .title-categies span:before{
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--secondary-color);
    position: absolute;
    content: "";
}

.project-box .project-content .title-categies .title{
   font-size:20px;
   font-weight:600;
   color:#fff;
   margin:0;
}
.project-box .project-content{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projec-btn{
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #18191b;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border: 1.5px solid #808080;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
}

.projec-btn span{
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 23px;
    height: 23px;
}

.projec-btn span i:nth-child(1){
        position: absolute;
    top: 0;
    left: 3px;
    transition: 0.3s cubic-bezier(0.37, 0.08, 0.02, 0.93);
    font-size: 14px;
    transform: rotate(-45deg);
    font-size:20px;
    color:#fff;
}
.projec-btn:hover span i:nth-child(1) {
    top: -20px;
    left: 15px;
}
.projec-btn span i:nth-child(2){
    position: absolute;
    bottom: -35px;
    left: -10px;
    transition: 0.3s cubic-bezier(0.37, 0.08, 0.02, 0.93);
    font-size: 14px;
    transform: rotate(-45deg);
    font-size:20px;
    color:#fff;
}

.projec-btn:hover span i:nth-child(2) {
        bottom: -5px;
    left: 5px;
}
.projec-btn:hover {
    background:#000;
}

.faq-branding-sec{
    padding:5rem 0;
    position:relative;
     background: #000;
}


.faq-branding-sec .section-title.text-center{
    max-width: 75%;
    margin: 0 auto 50px;
}

.faq-main-branding{
    
}

.accordion-item{
    transition: all 0.2s ease-in-out !important;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
     background-color:unset;
    padding:0;
}
.accordion-button:not(.collapsed){
    border: 1px solid #2352A1;
    border-bottom: none;
    transition:0.4s linear;
}
.accordion-collapse.collapse{
     border: 1px solid #2352A1;
     border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition:0.1s linear;
}
.accordion-item:not(:first-of-type) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.accordion-button:focus {
    outline: 0;
    box-shadow:none;
}
.accordion-button, .accordion-button:not(.collapsed){
    background-color:unset;
    color:#fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
 .accordion-button:not(.collapsed){
     box-shadow:none;
 }
.accordion-button{
     padding: 20px 30px;
     color:#fff;
     font-size:20px;
     font-weight:600;
}

.accordion-body{
    padding-inline: 30px;
    padding-block: 0 30px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 18px;
    text-align: justify;
}

.accordion .accordion-item:not(:last-child){
    margin:0 0 30px;
}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
   border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.accordion-button::after{
    width: 35px;
    height: 35px;
    line-height:35px;
    text-align:center;
    content:"\f104";
    font-family: flaticon_normal-icon !important;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    transform: rotate(-90deg);
    font-size:15px;
}

.footer-sec-brand{
    position:relative;
  
}

.cta-sec-main {
    padding: 50px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
  
}

.cta-sec-main .sec-big-title{
    font-size: 60px;
    font-weight: 800;
    
}

.cta-sec-main .sec-big-title span{
    font-weight: 400;
}

.cta-btn-brnd{
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
}
.cta-sec-main  .star{
    position:relative;
}
 .star svg:nth-child(1) {
    top: 45px;
    left: 40px;
    position: absolute;
    content: "";
}

.star svg{
    color:var(--secondary-color);
    animation: rotate 8s linear infinite;
}

.star svg:nth-child(2) {
    right: 40px;
    bottom: -270px;
    position: absolute;
    content: "";
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.footer-menu-sec{
    position:relative;
    padding:4rem 0 0;
    background:#000;
}

.foter-logo-main p{
    margin:30px 0 0;
    max-width:80%;
}

.social-media-link{
    padding: 0;
    margin: 50px 0 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-media-link li a{
    min-width: 40px;
    height: 40px;
    line-height: 42px;
    text-align:center;
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid var(--primary-color);
    font-size: 14px;
    display:block;
}

.social-media-link li a:hover{
    background:#2352A1;
}

.categiri-box .title{
    font-size: 22px;
    color:#fff;
    font-weight: 600;
}

.quick-menu{
    padding: 0;
    list-style: none;
    margin: 25px 0 0;
}
.quick-menu li a{
    color:rgba(255, 255, 255, 0.74);
    font-size:15.5px;
    font-weight: 400;
}
.quick-menu li a:hover{
    color:var(--secondary-color);
}
.quick-menu li:not(:last-child){
    margin:0 0 10px;
}

.mr-l50{
    margin-left:50px;
}

.adrees-points{
    padding: 0;
    list-style: none;
    margin: 25px 0 0;
}

.adrees-points li  i{
    display: inline-block;
    color: #fff;
    height: 40px;
    min-width: 40px;
    text-align: center;
    line-height: 45px;
    background: #ffffff3d;
    border-radius: 50%;
    margin-right: 10px;
}

.adrees-points li a, .adrees-points li p{
    color:rgba(255, 255, 255, 0.74);
    font-size:15.5px;
        display: flex;
    align-items: center;
    max-width: fit-content;
}

.adrees-points li:not(:last-child){
    margin:0 0 15px;
}

.adrees-points li a:hover, .adrees-points li p:hover{
    color:#fff;
}

.adrees-points li a:hover i, .adrees-points li p:hover i{
    color:#fff;
}


.copyright{
    border-top: 1px solid rgba(204, 204, 204, 0.2);
    padding:20px 0;
    margin-top:4rem;
}

.copyright .col-lg-6{
    padding:0;
}

.copyright p{
    margin:0;
}

.image-portfolio-sec{
    gap:20px 0;
}
.accordion-button:not(.collapsed)::after{
    background-image:unset;
}

.privacy-terms{
    display:flex;
    align-items:center;
    gap: 15px;
    justify-content: end;
}

.privacy-terms a{
    color:rgba(255, 255, 255, 0.74);
    position:relative;
}

.privacy-terms a:nth-child(1):before{
    top: 0;
    position: absolute;
    content: "";
    height: 70%;
    width: 2px;
    background: rgba(255, 255, 255, 0.74);
    right: -8px;
    bottom: 0;
    margin: auto 0;
}

.site-icon-brand{
    position:fixed;
    right:20px;
    top:40%;
    z-index:9999;
}

.sticky.brand-sec-header .mega-menu{
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
}

.mega-menu li .active{
    color:var(--secondary-color);
}

@media(min-width : 1700px) and (max-width : 2000px){
    .portfoli-sec-main .video-portfolio{
        top:60px;
    }
}

.brand-call{
    display:none;
}

.site-icon-brand a{
    margin:0 0 10px;
}

.mega-menu li a:hover{
    color:var(--secondary-color);
}

.wbas-why-chos{
    position:relative;
    padding:4rem 0;
}
.wbas-why-chos .sec-big-title{
    font-size: 110px;
    text-transform: none;
    line-height: 1.2;
    margin-bottom:2.5rem;
}
.main-color{
     color:#2352A1;
}
.cion-dosd{
    width: 80px;
    display: inline-block;
    margin: 0 1rem;
}
.shape1sbd{
    position: absolute;
    top: 30%;
    left: 0;
    z-index: -1;
    background-image:url(../image/svg/curl-shape.svg);
    width:242px;
    height:272px;
}

.cursor{
    
    pointer-events: none;
    position: fixed;
    padding: 0.3rem;
    background-color: #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    -webkit-transition: opacity 0.4s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.4s ease, -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease, opacity 0.4s ease;
    transition: transform 0.3s ease, opacity 0.4s ease;
    transition: transform 0.3s ease, opacity 0.4s ease, -webkit-transform 0.3s ease;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99999;
}
.cursor-active {
  -webkit-transform: translate(-50%, -50%) scale(12);
  -ms-transform: translate(-50%, -50%) scale(12);
  transform: translate(-50%, -50%) scale(12);
  opacity: .1; 
    
}
  
 .why-sedfsdf{
      background:linear-gradient(45deg, rgba(255, 255, 255, 0.05), #1B1B1B);
      padding:40px 30px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    height: 100%;
 }
.se-imafsd{
    position: relative;
    margin-bottom: 30px;
    width:80px;
}
.se-imafsd:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    border-left: 2px solid var(--secondary-color);
}
.why-tlsd{
    font-size:21px;
    color:#fff;
    line-height: 1.3;
}
.why-sedfsdf p{
    color: #c4c4c4;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 300;
}


.cliental-logo img {
    filter: brightness(0) invert(1);
}

.breadcrimb{
    padding:10rem 0 5rem;
    position:relative;
}

.title-navbar h1{
    font-size:80px;
    font-weight:600;
    color:#fff;
}
.highlints{
    color:#2352A1;
}
.cretive-title{
    font-weight: 200;
    font-style: italic;
}

.naviton-detail{
    display:flex;
    color:#fff;
    padding:0;
    margin:0;
    position:relative;
    gap: 23px;
    margin-top:1.5rem;
}
.naviton-detail li{
    color:#fff;
    list-style-type:none;
    font-size:18px;
    position:relative;
}
.naviton-detail li a{
    color:#fff;
    position:relative;
}
.naviton-detail li a::before{
    content: "\f108";
    position: absolute;
    font-family: flaticon_normal-icon !important;
    top: -3px;
    right: -21px;
    font-size: 20px;
}
.li-active{
    color: #ec223f !important;
    font-weight:600;
}
.key-numbers{
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: space-between;
    flex-direction: column;
    max-width: 334.479px;
    width: 100%;
    margin-inline: auto;
    background-color: #2352A1;
    border-radius: 20px;
    padding: 22px 50px 50px 50px;
}
.key-numbers li span, .key-numbers li em {
    font-size: 80px;
    color: #fff;
    margin: 0 0 15px;
    font-style: normal;
}
.key-numbers li p{
    line-height:0;
}
.key-numbers li{
        border-bottom: 1px solid #ffffff63;
    padding-bottom: 15px;
}
.hero-images{
        margin-top: -12rem;
    z-index: -1;
    position: relative;
}
.breadcrum-logos .client-logo-carosule .swiper-wrapper{
    margin-top:40px !important;
}
.personal-brand{
    position:relative;
}
.main-content-section{
    position:relative;
}
.importance-brand{
    position:relative;
    padding:5rem 0;
    
}
.design-strategy{
    position:relative;
}
.builds-credibilit{
    position:relative;
    background: #1E1E1E;
    padding: 50px;
    margin-bottom: 28px;
}
.builds-credibilit img{
    filter: invert(21%) sepia(65%) saturate(3865%) hue-rotate(339deg) brightness(94%) contrast(97%);
}
.builds-credibilit h4{
    color:#fff;
    margin-top:1rem;
}
.builds-credibilit p{
    margin:0;
}
.professiona-leddders{
    position:sticky;
    top:15%;
}
.videograpgers img{
    filter: invert(100%) sepia(10%) saturate(7482%) hue-rotate(210deg) brightness(115%) contrast(92%);
}
.videograpgers h4{
    color:#fff;
    margin-top:1rem;
}
.branding-serivces .video-product-company{
    margin-left:5rem;
}
.videograpgers {
  position: relative;
  display: block;
  margin-bottom: 24px;
  padding: 44px 35px 35px;
  border-radius: 24px;
  background-color: #b5b5b514;
  overflow: hidden;
  transition: all .5s ease;
}

.videograpgers::after {
  content: "";
  background: url(../image/marketing/shape-31.png);
  position: absolute;
  left: 70px;
  top: -50px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Optional: better fit */
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 0; /* You may adjust this depending on content layering */
}

.videograpgers:hover {
  /*background-image: linear-gradient(270deg, #eac05480, #f397b580);*/
  /*background-color: transparent;*/
}

.videograpgers:hover::after {
  opacity: 1;
}


/* Hidden gradient border initially */
.videograpgers::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px; /* border thickness */
  background: linear-gradient(90deg, #2352A1 20%, #EC223F 60%, #EC223F 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

/* Show gradient border on hover */
.videograpgers:hover::before {
  opacity: 1;
}

.video-product-company .swiper-wrapper{
    margin-bottom:5rem !important;
}
.video-product-company .swiper-button-next, .video-product-company .swiper-button-prev{
    position: relative;
    top: unset;
    bottom: 20px;
    background: #b5b5b514;
    height: 50px;
    width: 50px;
    z-index: 1;
     border: 2px solid transparent;
    border-radius: 50%;
    transition: all 0.5s ease;
   
}

.video-product-company .swiper-button-prev {
    right: 0;
    left: 85%;
    top:-40px;
}
.video-product-company .swiper-button-next:after, .video-product-company .swiper-rtl .swiper-button-prev:after{
    font-size:16px;
     color:#fff !important;
}
.video-product-company .swiper-button-prev:after, .video-product-company .swiper-rtl .swiper-button-next:after{
    font-size:16px;
     color:#fff !important;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: -92% !important;
    left: unset !important;
    top: -67px !important;
}



.video-product-company .swiper-button-next::before ,.video-product-company .swiper-button-prev::before {
    content: "";
    position: absolute;
    inset: -2px; /* expands beyond the button */
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(90deg, #4BB6EF, #DD933E, #D82E5A);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.video-product-company .swiper-button-next:hover::before,.video-product-company .swiper-button-prev:hover::before {
    opacity: 1;
}
.branding-serivces .sec-big-title{
    text-align:end;
    margin-bottom:3rem;
}
.personal-branding {
    padding:0;
    margin:0;
    position:relative;
    display: flex;
    justify-content: space-around;
    margin-top:3rem;
    
}
.personal-branding li{
    list-style-type: none;
    position: relative;
    width: 24%;
    text-align: center;
}
.personal-branding h4{
    color:#fff;
}
.first-span{
    color:#bbbbb9;
    text-transform:uppercase;
    padding-bottom: 2rem;
    display: block;
    position:relative;
    font-size: 18px;
    font-weight: 700;
}
.first-span::before{
       position: absolute;
    height: 12px;
    background-color: #ec223f;
    border-radius: 50%;
    box-shadow: 0 0 10px #ec223f;
    content: "";
    width: 12px;
    top: 56px;
    left: 0;
    right: 0;
    margin: auto;
}
.second-span{
    font-size:80px;
    padding-top:1rem;
    font-family: Teko, serif;
    font-weight: 700;
    display:block;
}
.personal-branding::before{
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    top: 13.5%;
    left: 0;
    background-color: #ffffff1f;
    z-index: -1;
    
}
.how-we-work{
    position:relative;
    padding:1rem 0 4rem;
}
.process-section{
    position:relative;
    text-align:center;
}
.branding-serivces{
    position:relative;
    background: url(../image/marketing/shape-38.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.cta-contnet{
    position: relative;
    background-color: #1E1E1E;
    border-radius: 58px;
    padding: 97px 80px;
    overflow: hidden;
}
.cta-span{
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 32px;
    font-weight:700;
    margin:0;
    color:#fff;
}
.cta-title{
    font-size: 70px;
    line-height: 81px;
    margin-bottom: 24px;
    font-weight:700;
    color:#fff;
}

.call-cta-butn{
        position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
   color:#fff;
    text-align: center;
    border-radius: 50px;
    padding: 10px 15px 10px 25px;
    text-transform: capitalize;
    overflow: hidden;
    z-index: 1;
    transition: all .5s ease;
}
.bg-gradiebt{
    background-color: linear-gradient(90deg, #2352A1 20%, #EC223F 60%, #EC223F 100%);
    background-image: linear-gradient(90deg, #2352A1 20%, #EC223F 60%, #EC223F 100%);

}
.call-cta-butn i{
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 33px;
    text-align: center;
    border-radius: 50%;
    font-size: 17px;
    color: #2352A1;
    z-index: 1;
    background: #fff;
    
}

.call-cta-grai{
    position:relative;
}

.call-cta-grai::before{
    content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(90deg, #2352A1 20%, #EC223F 60%, #EC223F 100%);
  z-index: -1;
  border-radius: 50px; /* Optional */
  background-origin: border-box;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude; /* For Firefox use -moz- */
  -webkit-mask-composite: destination-out;
  padding: 3px; /* width of the border */
}

.cyta-button{
    display:flex;
    gap:10px
}

.cta-section{
    position:relative;
   }