@media (max-width: 991px) {
  .nav-links {
    position: fixed;

    top: 90px;

    right: -100%;

    width: 320px;

    height: calc(100vh - 90px);

    background: #08111f;

    padding: 50px 35px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 30px;

    transition: 0.4s;

    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links.active {
    right: 0;
  }

  #menu-btn {
    display: flex;
  }

  .navbar .btn {
    display: none;
  }
}
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .hero-content {
    order: 2;
  }

  .hero-visual {
    order: 1;

    margin-bottom: 60px;
  }

  .hero-content p {
    margin: auto;

    margin-bottom: 40px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-content h1 {
    font-size: 52px;
  }

  .hero-circle {
    width: 360px;

    height: 360px;
  }

  .inner-circle img {
    width: 170px;
  }
}
@media (max-width: 992px) {
  .orbit-2 {
    display: none;
  }

  .orbit-1 {
    width: 420px;

    height: 420px;
  }

  .floating-card {
    display: none;
  }

  .tech {
    font-size: 12px;

    padding: 10px 16px;
  }

  .trusted-logos {
    justify-content: center;
  }
}
@media (max-width: 992px) {
  .hero-dashboard {
    display: none;
  }

  .tech span {
    display: none;
  }

  .tech {
    padding: 12px;
  }
}
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 35px;
  }
}

@media (max-width: 992px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-large {
    grid-template-columns: 1fr;

    padding: 35px;
  }
}
@media (max-width: 1200px) {
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 80px;
  }

  .shopify-card {
    grid-column: 1 / -1;
    min-height: 520px;
  }

  .marketing-card {
    grid-column: 1 / -1;
    min-height: 340px;
  }

  .ai-card,
  .website-card,
  .automation-card,
  .hubspot-card,
  .crm-card,
  .mobile-card {
    min-height: 320px;
  }
}
@media (max-width: 768px) {
  .bento-grid {
    display: flex;

    flex-direction: column;
  }

  .bento-card {
    min-height: 280px;

    padding: 28px;
  }

  .shopify-card {
    min-height: 520px;
  }

  .card-image {
    position: relative;

    width: 100%;

    height: 220px;

    margin-top: 20px;
  }

  .marketing-stats {
    grid-template-columns: 1fr;

    text-align: center;
  }
}
@media (max-width: 1200px) {
  .portfolio-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .shopify {
    grid-column: span 6;
  }

  .ai,
  .automation {
    grid-column: span 3;
  }

  .hubspot {
    grid-column: span 6;
  }
}
@media (max-width: 768px) {
  .portfolio-grid {
    display: flex;

    flex-direction: column;
  }

  .portfolio-card img {
    height: 240px;
  }

  .portfolio-content {
    padding: 24px;
  }

  .portfolio-content h3 {
    font-size: 24px;
  }

  .portfolio-filter {
    justify-content: flex-start;

    overflow-x: auto;

    padding-bottom: 10px;
  }
}
@media(max-width:1100px){

.featured-project{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

}
@media(max-width:768px){

.portfolio-section{

padding:90px 0;

}

.portfolio-info{

padding:24px;

}

.portfolio-info h3{

font-size:28px;

}

.browser-frame{

margin:18px;

}

.portfolio-filter{

justify-content:flex-start;

overflow:auto;

padding-bottom:10px;

}

}
@media(max-width:1100px){

.why-grid{

grid-template-columns:1fr;

}

.features-panel{

grid-template-columns:1fr;

}

.process-line{

grid-template-columns:repeat(3,1fr);

row-gap:50px;

}

.process-line::before{

display:none;

}

}
@media(max-width:768px){

.why-us-section{

padding:90px 0;

}

.stat-card{

padding:28px;

}

.feature-card{

padding:24px;

}

.process-line{

grid-template-columns:1fr;

}

.process-step{

margin-bottom:35px;

}

}
@media(max-width:992px){

.trust-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.trust-grid{

grid-template-columns:1fr;

}

}
@media(max-width:992px){

.featured-case-study{

grid-template-columns:1fr;

}

}
@media(max-width:992px){

.engagement-grid{

grid-template-columns:1fr;

}

.engagement-card.featured{

transform:none;

}

}
@media(max-width:992px){

.cta-card{

padding:60px 30px;

}

.cta-card h2{

font-size:40px;

}

.cta-stats{

grid-template-columns:repeat(2,1fr);

}

}
@media(max-width:991px){

.contact-layout{

grid-template-columns:1fr;

}

.contact-sidebar{

position:relative;

top:0;

}

.form-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}
@media(max-width:768px){

.service-grid{

grid-template-columns:repeat(2,1fr);

}

.budget-grid{

grid-template-columns:repeat(2,1fr);

}

.checkbox-grid{

grid-template-columns:1fr;

}

.upload-box{

padding:30px 20px;

}

}
@media(max-width:991px){

.footer-cta{

flex-direction:column;

text-align:center;

padding:40px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

.newsletter-box{

flex-direction:column;

text-align:center;

}

.newsletter-form{

width:100%;

max-width:100%;

}

}
@media(max-width:768px){

.footer{

padding:120px 0 40px;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-cta h2{

font-size:40px;

}

.newsletter-form{

flex-direction:column;

gap:15px;

}

.newsletter-form input{

border-radius:16px;

}

.newsletter-form button{

border-radius:16px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}
@media(max-width:768px){
.tech-grid, .tech-wrapper{
    grid-template-columns: repeat(1, 1fr);
}
.success-section::before {
  width: auto;
}
  .process-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .trust-item {
 display: grid;
  place-items: center;
  text-align: center;
  width: 100%;
}
 .trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 15px;
    font-size: 12px;
    gap: 20px;
  }
  .logo {
    margin-left: 20px;
}
.hero-visual{
  min-height: 410px;
}
.marketing-content a.btn {
  text-align: center;
  margin: 20px auto 0;
  display: block;
}
}
@media(max-width:991px){

.process-timeline::before{

    left:35px;

}

.timeline-item{

    justify-content:flex-start !important;

    padding-left:90px;

}

.timeline-dot{

    left:35px;

}

.timeline-card{

    width:100%;

}

}
@media(max-width:1200px){

.standards-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.standards-grid{

grid-template-columns:1fr;

}

.standard-card{

min-height:auto;

}

}
@media(max-width:768px){

.comparison-header{

    display:none;

}

.comparison-row{

    grid-template-columns:1fr;

}

.old-side{

    border-right:none;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.old-side,
.new-side{

    padding:20px;

}

}
@media(max-width:991px){

.ecosystem-wrapper{

    width:100%;

    height:650px;

    transform:scale(.8);

}

}

@media(max-width:768px){

.ecosystem-wrapper{

    transform:scale(.58);

    transform-origin:center top;

    height:500px;

}

}
@media(max-width:991px){

.shopify-cta-card{

    grid-template-columns:1fr;

    gap:60px;

    padding:60px 40px;

}

.cta-content{

    text-align:center;

}

.cta-content p{

    margin-inline:auto;

}

.cta-buttons{

    justify-content:center;

}

.cta-benefits{

    max-width:650px;

    margin-inline:auto;

    margin-bottom:40px;

}

}

@media(max-width:768px){

.cta-content h2{

    font-size:42px;

}

.cta-benefits{

    grid-template-columns:1fr;

}

.cta-visual{

    transform:scale(.8);

    height:420px;

}

.shopify-cta-card{

    padding:40px 25px;

}

}
@media(max-width:992px){

.hubspot-services-grid{

    grid-template-columns:repeat(2,1fr);

}

.featured{

    transform:none;

}

}

@media(max-width:768px){

.hubspot-services-grid{

    grid-template-columns:1fr;

}

.hubspot-service-card{

    text-align:center;

}

.service-icon{

    margin-inline:auto;
    margin-bottom:25px;

}

.featured{

    transform:none;

}

}
@media(max-width:992px){

.advantages-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.advantages-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:992px){

.hubspot-cta{

    grid-template-columns:1fr;

}

.hubspot-cta-visual{

    order:-1;

}

}

@media(max-width:768px){

.hubspot-cta-features{

    grid-template-columns:1fr;

}

}
@media(max-width:992px){

.ai-hero-grid{

    grid-template-columns:1fr;

}

.ai-network-wrapper{

    height:620px;

    margin-top:60px;

}

}

@media(max-width:768px){

.ai-content h1{

    font-size:48px;

}

.ai-network-wrapper{

    transform:scale(.8);

    transform-origin:center;

}

}
@media(max-width:991px){

    .app-hero{

        padding:100px 0 70px;

        min-height:auto;

    }

    .app-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .app-content{

        text-align:center;

    }

    .app-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

    .app-showcase{

        height:520px;

    }

}
@media(max-width:991px){

    .process-line{

        left:20px;

    }

    .process-step{

        display:block;

        padding-left:60px;

        margin-bottom:50px;

        position:relative;

    }

    .step-dot{

        position:absolute;

        left:10px;

        top:35px;

    }

}
@media(max-width:768px){

    .app-cta-card{

        padding:60px 30px;

    }

    .app-cta-features{

        flex-direction:column;

        align-items:center;

    }

}
@media(max-width:1100px){

    .erp-dashboard{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .erp-dashboard{

        grid-template-columns:1fr;

    }

}
@media(max-width:900px){

    .erp-process::before{

        left:35px;

    }

    .erp-step{

        grid-template-columns:70px 1fr;

        gap:25px;

    }

    .step-number{

        grid-column:1;

        width:60px;

        height:60px;

        font-size:18px;

    }

    .step-content{

        grid-column:2 !important;

    }

    .step-content::after{

        display:none;

    }

}
@media(max-width:768px){

    .erp-cta-box{

        padding:60px 30px;

    }

    .erp-cta-features{

        flex-direction:column;

        align-items:center;

    }

    .erp-cta-box .hero-buttons{

        flex-direction:column;

    }

}
@media(max-width:992px){

    .solutions-hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .solutions-hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .solutions-hero .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:650px){

    .solutions-visual{

        width:360px;

        height:360px;

    }

    .orbit-one{

        width:240px;

        height:240px;

    }

    .orbit-two{

        width:330px;

        height:330px;

    }

    .solutions-core{

        width:120px;

        height:120px;

    }

    .solutions-core i{

        font-size:28px;

    }

    .solution-node{

        width:75px;

        height:75px;

        border-radius:16px;

        font-size:11px;

    }

    .solution-node i{

        font-size:18px;

    }

    .node-commerce{

        left:142px;

    }

    .node-apps{

        left:142px;

    }

    .node-cms{

        right:0;

    }

    .node-ai{

        right:0;

    }

}
@media(max-width:1000px){

    .solutions-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .solutions-grid{

        grid-template-columns:1fr;

    }

    .solution-card{

        min-height:320px;

    }

}
@media(max-width:700px){

    .solutions-tech-board{

        grid-template-columns:1fr;

    }

    .tech-category{

        padding:26px;

    }

}
@media(max-width:992px){

    .about-hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .about-hero .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:600px){

    .about-hero-visual{

        width:360px;

        height:360px;

    }

    .about-orbit-one{

        width:240px;

        height:240px;

    }

    .about-orbit-two{

        width:330px;

        height:330px;

    }

    .about-core{

        width:120px;

        height:120px;

    }

    .about-core i{

        font-size:28px;

    }

    .about-floating-card{

        padding:10px 14px;

        font-size:12px;

    }

    .card-one{

        top:30px;

        left:0;

    }

    .card-two{

        top:140px;

        right:-5px;

    }

    .card-three{

        bottom:30px;

        left:20px;

    }

}
@media(max-width:1100px){

    .expertise-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .expertise-grid{

        grid-template-columns:1fr;

    }

    .expertise-card{

        min-height:320px;

    }

}
@media(max-width:768px){

    .approach-line{

        left:35px;

    }

    .approach-step{

        display:grid;

        grid-template-columns:70px 1fr;

        gap:24px;

        min-height:auto;

        margin-bottom:30px;

    }

    .approach-number{

        grid-column:1;

        width:60px;

        height:60px;

        font-size:15px;

    }

    .approach-content{

        grid-column:2 !important;

        grid-row:1;

        padding:24px;

    }

}
@media(max-width:900px){

    .contact-main-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contact-info{

        text-align:center;

    }

    .contact-info > p{

        margin-left:auto;

        margin-right:auto;

    }

    .contact-details{

        align-items:center;

    }

}

@media(max-width:600px){

    .contact-form-wrapper{

        padding:24px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

}
@media(max-width:768px){

    .contact-process-grid{

        grid-template-columns:1fr;

    }

}
@media(max-width:1100px){

    .faq-categories-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .faq-categories-grid{

        grid-template-columns:1fr;

    }

}
@media(max-width:600px){

    .faq-cta-box{

        padding:65px 24px;

    }

    .faq-cta-box p{

        font-size:16px;

    }

}
@media(max-width:600px){

    .legal-content{

        padding:30px 22px;

    }

    .legal-section h2{

        font-size:21px;

    }

    .legal-intro{

        font-size:16px;

    }

}
@media(max-width:700px){

    .sitemap-grid{

        grid-template-columns:1fr;

    }

    .sitemap-card{

        padding:28px 24px;

    }

}
@media(max-width:1000px){

    .custom-web-hero-grid{

        grid-template-columns:1fr;

    }

    .custom-web-hero-content{

        max-width:800px;

        text-align:center;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .custom-web-trust{

        justify-content:center;

    }

    .custom-benefits-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .custom-process-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .custom-web-hero-content h1{

        font-size:42px;

    }

    .custom-benefits-grid,

    .custom-services-grid,

    .custom-process-grid{

        grid-template-columns:1fr;

    }

    .custom-web-hero-visual{

        min-height:350px;

    }

    .website-preview{

        grid-template-columns:80px 1fr;

    }

    .preview-sidebar{

        padding:18px 12px;

    }

    .preview-content{

        padding:16px;

    }

    .floating-tech{

        width:48px;

        height:48px;

        font-size:18px;

    }

}