/* Tablet Styles - For screens between 769px and 1024px */

/* Consistent spacing for tablet view */
@media (max-width: 1024px) {
  .portfolio {
    padding: 60px 0;
  }
  
  .technology-section {
    padding: 60px 0;
  }
  
  .why-choose {
    padding: 60px 2rem;
  }
  
  .service-container {
    padding: 60px 20px;
  }
  
  .contact-section {
    padding: 60px 0;
  }
  
  .main-section {
    padding: 60px 20px;
  }
  
  .hero {
    margin: 1rem 4rem;
  }
  
  .logo img {
    margin: 0 4rem;
  }
  
  .headline {
    font-size: 42px;
  }
  
  .right-form {
    flex: 0 0 450px;
    padding: 25px 40px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    margin: 1rem 3rem;
  }
  
  .logo img {
    margin: 0 3rem;
  }
  
  .headline {
    font-size: 38px;
  }
  
  .right-form {
    flex: 0 0 400px;
    padding: 25px 35px;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stats div {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (max-width: 1200px) {
  .roadmap-grid {
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 30px;
  }
}

/* Specific tablet breakpoint for roadmap */
@media (min-width: 769px) and (max-width: 1024px) {
  .roadmap-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: auto;
  }
  .card-01 {
    top: -11px;
    right: 54px;
    transform: rotate(-13deg);
}
.dot-start {
    top: 100px;
    left: 107px;
}
.step-01 {
    top: 100px;
    left: 135px;
}
.dot-between-1-2 {
    top: 128px;
    left: 179px;
}
.card-02 {
    top: 77px;
    right: -47px;
    transform: rotate(-6deg);
}
.card-03 {
    top: 239px;
    right: -63px;
    transform: rotate(-2deg);
}
.dot-between-2-3 {
    top: 199px;
    left: 215px;
}
.step-03 {
    top: 231px;
    left: 201px;
}
.dot-between-3-4 {
    top: 280px;
    left: 189px;
}
.step-04 {
    top: 300px;
    left: 141px;
}
.dot-end {
    top: 319px;
    left: 107px;
}

.step-02 {
    top: 150px;
    left: 192px;
}
.card-04 {
    top: 351px;
    right: 15px;
    transform: rotate(4deg);
}
  
 .card-01-mirrored {
    top: -11px;
    left: 42px;
    transform: rotate(-62deg);
}
.dot-between-1-2-mirrored {
    top: 131px;
    right: 183px;
}
.card-02-mirrored {
    top: 110px;
    left: -63px;
    transform: rotate(-137deg);
}
.dot-between-2-3-mirrored {
    top: 218px;
    right: 216px;
}
.step-03-mirrored {
    top: 250px;
    right: 195px;
}
.card-03-mirrored {
    top: 251px;
    left: -54px;
    transform: rotate(140deg);
}
.dot-between-3-4-mirrored {
    top: 291px;
    right: 179px;
}
.step-04-mirrored {
    top: 302px;
    right: 134px;
}
.dot-end-mirrored {
    top: 319px;
    right: 108px;
}
.card-04-mirrored {
    top: 366px;
    left: 62px;
    transform: rotate(59deg);
}
.step-02-mirrored {
    top: 159px;
    right: 196px;
}
.dot-start-mirrored {
    top: 100px;
    right: 107px;
}
.step-01-mirrored {
    top: 102px;
    right: 133px;
}
  
  .roadmap-content {
    padding: 15px;
  }
  
  .roadmap__box--content {
    gap: 15px;
  }
  
  .roadmap__box--content .content {
    padding: 12px;
  }
  
  /* Adjust modules canvas for tablet */
  .modules-canvas {
    width: 280px;
    height: 430px;
  }
  
  .modules-circle {
    width: 130px;
    height: 130px;
  }
  
  .modules-text {
    font-size: 14px;
  }
  
  .module-card {
    width: 80px;
    height: 80px;
  }
  
  .icon {
    width: 32px;
    height: 32px;
  }
}