.portfolio_banner_section{padding:200px 0 160px 0; background-position:bottom; position:relative; overflow:hidden; background:#000d23;}
.portfolio_banner_section::before{content:""; position:absolute; background-image:url(../img/boxBgBanner.png); width:90%; height:100%; left:50%; top:50%; background-repeat:no-repeat; transform:translate(-50%,-50%); background-size:cover;}
.portfolio_banner_section{text-align:center; color:#fff;}
.portfolio_banner_section h1{font-size:42px; font-weight:500; font-family:"HelveticaNeueMedium"; line-height:45px; margin-bottom:15px;}
.portfolio_banner_section p{font-size:19px; line-height:140%; padding-inline:10%;}
.portfolio-section{display:flex; justify-content:center; background:#f8f9fb; padding:80px 0;}
.portfolio-container{display:flex; width:90%; max-width:1300px; gap:40px;}
.portfolio-sidebar{flex:0 0 240px;}
.category-menu{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:15px;}
.category-item{background:#fff; padding:14px 20px; cursor:pointer; color:#294359; font-weight:500; border:2px solid #e0e0e0; transition:all 0.3s ease; text-align:left;border-radius: 8px;}
.category-item a{color:#001334; text-decoration:none;}
.category-item.active a,.category-item:hover a{color:#fff; text-decoration:none;}
.category-item.active,.category-item:hover{background:#e94e1b; color:#fff; border-color:#e94e1b;}
.portfolio-content{flex:1;}
.portfolio-category{display:none;}
.portfolio-category.active{display:block; animation:fadeIn 0.4s ease;}
.filter-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:25px;}
.filter-btn{padding:8px 16px; border:2px solid #e94e1b; background:transparent; cursor:pointer; transition:all 0.3s ease; font-weight:500; color:#001334;border-radius: 8px;}
.filter-btn.active,.filter-btn:hover{background:#e94e1b; color:#fff; border-color:#e94e1b;}
.sub-filters{display:flex; gap:15px; margin-bottom:25px;}
.sub-filter{background:#fff; border:1px solid #ddd; padding:6px 14px; border-radius:8px; font-size:0.9rem; color:#555;}
.portfolio-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; align-items:start; justify-items:stretch;}
.portfolio-item{position:relative;}
.portfolio-item img{width:100%; height:auto;}
.portfolio-info{position:relative; padding-left:16px;}
.portfolio-info::before{content:""; width:3px; height:calc(100% - 12px); position:absolute; top:50%; left:0; transform:translateY(-50%); background-color:#e94e1b;}
.portfolio-info h3{margin-bottom:10px; padding-bottom:10px; font-size:22px; font-weight:700; line-height:25px; display:inline-block; text-transform:capitalize; position:relative; transition:all 0.3s ease; color:#001334;}
.portfolio-info h3::before{content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#e94e1b; transition:all 0.3s ease;}
.portfolio-info h3:hover{color:#e94e1b;}
.portfolio-info h3:hover:before{width:100%;}
.portfolio-info h3:hover{color:inherit; background:linear-gradient(to right,currentcolor 0%,currentcolor 100%) 0 95% / 0 1px no-repeat; transition:all 500ms ease;}
.portfolio-info p{color:#001334; font-size:0.9rem;}
.portfolio-info p span{color:#e94e1b;}
.portfolio-item.hide{display:none;}
.portfolio-image{position:relative; margin-bottom:25px; overflow:hidden; border-radius:10px;}
.portfolio-image img{width:100%; display:block; border-radius:inherit; transition:all 600ms cubic-bezier(0,0,0.44,1.18);}
.portfolio-image-overly{position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transform:rotateX(-90deg); transform-origin:50% 50%; background-color:rgba(0,19,52,0.7); transition:transform 0.6s ease-in-out,opacity 0.6s;}
.portfolio-image::after{content:""; width:calc(100% - 20px); height:calc(100% - 20px); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:10px; border:1px solid var(--deskot-white,#ffffff); opacity:0; transition:opacity 0.6s ease-in-out; transition-delay:0.1s;}
.portfolio-item:hover .portfolio-image img{transform:scale(1.05);}
.portfolio-item:hover .portfolio-image-overly{opacity:1; transform:rotateX(0);}
.portfolio-item:hover .portfolio-image::after{opacity:1;}
.portfolio-info .see-more-icon{position:absolute; right:0; bottom:0; width:42px; height:42px; background-color:#001334; display:flex; justify-content:center; align-items:center; transition:all 0.4s ease-in-out;border-radius: 5px;}
.portfolio-info .see-more-icon img{width:28px;}
.portfolio-info .see-more-icon:hover{background-color:#e94e1b;}
.portfolio-info .see-more-icon:hover img{transform:rotate(360deg);}
.portfolio-info{display:flex; flex-direction:column; flex-grow:1;}
.portfolio-tech{position:absolute; top:15px; right:12px; display:flex; gap:5px; transition:all 0.3s ease;}
.portfolio-tech span{background:#e94e1b;border-radius: 5px; color:#fff; font-size:12px; line-height:12px; font-weight:600; text-transform:uppercase; padding:8px 10px; transition:all 0.3s ease; transition-delay:0.1s;}
.portfolio-item:hover .portfolio-tech span{background:#e94e1b; color:#fff;}
.portfolio-description{font-size:14px; color:#666; line-height:1.5; margin-bottom:15px; order:1;}
.portfolio-tags{margin-bottom:15px; order:2;}
.portfolio-tags span{display:inline-block; background-color:#f0f0f0; border-radius:4px; padding:4px 10px; font-size:12px; font-weight:500; color:#555; margin-right:5px; margin-bottom:5px;}
.portfolio-item.hide{display:none;}
.sub-filters .sub-filter-btn{background:none; border:1px solid #ddd; padding:8px 15px; margin:0 5px 10px; border-radius:20px; cursor:pointer; font-size:14px; transition:all 0.3s ease;}
.sub-filters .sub-filter-btn:hover{background-color:#f5f5f5; border-color:#bbb;}
.sub-filters .sub-filter-btn.active{background-color:#001334; color:#fff; border-color:#001334;}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
/* Single Portfolio Page CSS */

 .single_portfolio_banner_section{padding:200px 0 100px 0; background-position:bottom; position:relative; overflow:hidden; background:#000d23;}
.single_portfolio_banner_section h1{font-size:42px; font-weight:500; font-family:"HelveticaNeueMedium"; line-height:45px; margin-bottom:15px; color:#fff;}
.spBannerContent{width:560px; max-width:100%;}
.single-portfolio-box{background:#000d23; border-radius:12px; transition:all 0.3s ease-in-out; /* box-shadow:0 10px 10px rgba(2,6,23,0.3),0 4px 10px rgba(2,6,23,0.5); */}
.single-portfolio-box-position{position:absolute; right:0; top:-425px; width:400px; box-shadow:0 20px 40px rgba(2,6,23,0.7),0 4px 10px rgba(2,6,23,0.65);}
.single_portfolio_banner_section p{font-size:19px; line-height:140%; color:#fff;}
.single-portfolio-image img{width:100%; height:auto;}
.single-portfolio-info{position:relative; padding:30px;}
.single-portfolio-info::before{content:""; width:3px; height:calc(100% - 60px); position:absolute; top:50%; left:15px; transform:translateY(-50%); background-color:#e94e1b;}
.single-portfolio-info h3{margin-bottom:10px; padding-bottom:10px; font-size:22px; font-weight:700; line-height:25px; display:inline-block; text-transform:capitalize; position:relative; transition:all 0.3s ease; color:#fff;}
.single-portfolio-info h3::before{content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#e94e1b; transition:all 0.3s ease;}
.single-portfolio-info h3:hover{color:#e94e1b;}
.single-portfolio-info h3:hover:before{width:100%;}
.single-portfolio-info h3:hover{background:linear-gradient(to right,currentcolor 0%,currentcolor 100%) 0 95% / 0 1px no-repeat; transition:all 500ms ease;}
.single-portfolio-info p{color:#fff; font-size:0.9rem;}
.single-portfolio-info p span{color:#e94e1b;}
.single-portfolio-image{position:relative; overflow:hidden; border-radius:10px 10px 0 0;}
.single-portfolio-image img{width:100%; display:block; border-radius:inherit; height:320px; transition:all 600ms
cubic-bezier(0,0,0.44,1.18); object-fit:cover;}
.single-portfolio-image-overly{position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transform:rotateX(-90deg); transform-origin:50% 50%; background-color:rgba(0,19,52,0.7); transition:transform 0.6s ease-in-out,opacity 0.6s;}
.single-portfolio-image::after{content:""; width:calc(100% - 20px); height:calc(100% - 20px); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:10px; border:1px solid var(--deskot-white,#ffffff); opacity:0; transition:opacity 0.6s ease-in-out; transition-delay:0.1s;}
.single-portfolio-box .single-portfolio-image img{transform:scale(1.05);}
.single-portfolio-box:hover .single-portfolio-image-overly{opacity:1; transform:rotateX(0);}
.single-portfolio-box:hover .single-portfolio-image::after{opacity:1;}
.single-portfolio-info .see-more-icon{position:absolute; right:15px;  bottom:15px;   width:45px; height:45px; background-color:#e94e1b; display:flex; justify-content:center; align-items:center; transition:all 0.4s ease-in-out;border-radius:5px;}
.single-portfolio-info .see-more-icon img{width:30px;}
.single-portfolio-info .see-more-icon:hover{background-color:#e94e1b;}
.single-portfolio-info .see-more-icon:hover img{transform:rotate(360deg);}
.single-content-sec{position:relative; padding:100px 0 120px;}
.single-content-inner h4{font-size:15px; font-weight:500; line-height:120%; margin-bottom:10px; color:#001334;}
.single-content-inner h3{font-size:23px; font-weight:500; line-height:120%; margin-bottom:20px; font-family:"HelveticaNeueMedium"; color:#001334;}
.single-content-inner h2{font-size:24px; line-height:28px; font-weight:500; font-family:"HelveticaNeueMedium"; margin-top:30px; margin-bottom:20px; color:#001334;}
.single-content-inner p{color:#001334; font-size:16px; font-weight:400; line-height:160%; margin-bottom:10px;}
.col2Para{column-count:2; column-gap:2rem;}
.techLogo{display:flex; gap:15px; flex-wrap:wrap;}
.techLogo img{width:60px; height:auto;}
.portfolio-image-carousel{margin:40px 0;}
.visitWebsite{margin-top:30px; display:inline-flex; align-items:center; justify-content:center; gap:5px; text-decoration:none; background:#e94e1b; color:#fff; padding:10px 15px; font-size:17px; transition:all 0.3s ease;border-radius: 8px;}
.visitWebsite img{width:25px; height:25px; transition:transform 0.3s ease;}
.visitWebsite:hover{transform:translateY(-2px);}
.visitWebsite:hover img{transform:rotate(360deg);}
.others-portfolio-sec-heading{font-size:42px; font-weight:500; font-family:"HelveticaNeueMedium"; line-height:120%; color:#001334; margin-bottom:50px;}
.others-portfolio-sec{padding-bottom:100px;}


/* mediaa queries */


@media (max-width:1200px){
 .spBannerContent {
    width: 480px;
    max-width: 100%;
}

}

@media (max-width:991px){
.portfolio-section{padding:60px 10px;}
.portfolio-container{width:100%;    gap: 30px; }

.category-item{padding:12px 15px; font-size: 14px;}
.portfolio-sidebar {
    flex: 0 0 210px;
}
.portfolio-tags{margin-right:30px;}

.portfolio-info .see-more-icon  , .single-portfolio-info .see-more-icon{width:35px; height:35px;}
.portfolio-info .see-more-icon img , .single-portfolio-info .see-more-icon img{width:20px;}
.portfolio-grid{    gap: 15px;}
.spBannerContent {
        width: 360px;
        max-width: 100%;
    }

.single_portfolio_banner_section p {
    font-size: 17px;
    line-height: 140%;
    color: #fff;
}

.single-portfolio-box-position{    width: 340px;}

}

@media (max-width:767px){
.portfolio-container{flex-direction:column;}
.category-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.portfolio-sidebar{flex:initial;}
.portfolio-content{flex:initial;}
.sub-filters{flex-wrap: wrap;}
.portfolio-tech span{font-size:11px; }
.portfolio_banner_section::before{display:none;}
.portfolio_banner_section h1{font-size:32px; line-height:35px;}
.portfolio_banner_section p{font-size:16px; padding-inline: 0;}
.single_portfolio_banner_section h1{font-size:32px; line-height:35px;}
  .single_portfolio_banner_section p{font-size:16px;}
    .single-portfolio-box.single-portfolio-box-position {
        position: relative;
        top: initial;
        right: initial;
        width: 380px;
        margin-top: -170px;
        margin-bottom: 40px;
        max-width: 100%;
    }
.spBannerContent{width:100%; max-width:100%;}
 .techLogo img{width:50px;}
 .single-content-sec{padding:100px 0 50px;}
}

@media (max-width:576px){
  .portfolio-grid{grid-template-columns:repeat(1,minmax(0,1fr));}
  .portfolio-info h3{font-size:18px; line-height:18px; }
  
.portfolio-section{padding:40px 10px;}
    .category-item {
        padding: 12px 10px;
        font-size: 13px;
    }
    .portfolio-container{gap:20px;}
.filter-btn {padding: 6px 12px; font-size: 13px;}
.sub-filter-btn {padding: 6px 10px; font-size: 12px;}
.portfolio_banner_section p , .single_portfolio_banner_section p{font-size:15px;}

.portfolio_banner_section {padding: 180px 0 80px 0;}
.single-portfolio-info h3{font-size:20px; line-height:20px;}
.single-content-inner h3{font-size:21px;}
.single-content-inner h2{font-size:22px;    margin-top: 20px;
    margin-bottom: 15px;}
    .techLogo img{width:40px;}

    .single-content-inner p{font-size:15px;}

    .others-portfolio-sec-heading {
    font-size: 32px;
   
    margin-bottom: 40px;
}

.col2Para{
  gap: 10px;
}

.others-portfolio-sec{padding-bottom:50px;}

}


@media (max-width:480px){
     .others-portfolio-sec-heading {font-size: 28px;margin-bottom: 30px;}
     
.single_portfolio_banner_section{padding: 170px 0 100px 0;}

}