/* ==========================================================================
   DARFINITY - PREMIUM RESPONSIVE OVERRIDES STYLE SHEET
   Handles all specific screen sizes for Mobile, Tablet, Laptop, and Desktop
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL HIGH-RESOLUTION / 4K SCALING (Desktop scaling & Max width caps)
   ========================================================================== */

/* 4K Displays (3840px × 2160px) */
@media (min-width: 3840px) {
  html {
    font-size: 20px;
    /* Scale base font size to prevent layout from appearing tiny */
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 2400px !important;
  }

  .tsl-row,
  .ind-opt-wrapper .container-fluid {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2K Displays (2560px × 1440px) */
@media (min-width: 2560px) and (max-width: 3839.98px) {
  html {
    font-size: 18px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1800px !important;
  }

  .tsl-row,
  .ind-opt-wrapper .container-fluid {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Full HD Screens (1920px × 1080px) */
@media (min-width: 1920px) and (max-width: 2559.98px) {
  html {
    font-size: 16px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1500px !important;
  }

  .tsl-row,
  .ind-opt-wrapper .container-fluid {
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   2. LAPTOP & DESKTOP RESOLUTIONS (1366px, 1440px, 1536px)
   ========================================================================== */

/* Common 1536px and 1440px Screens */
@media (min-width: 1367px) and (max-width: 1536px) {
  .hero-title {
    font-size: 2.8rem;
  }

  .carousel-hero-title {
    font-size: 2.8rem;
  }
}

/* Most Common Laptop Screen (1366px × 768px) */
@media (min-width: 1200px) and (max-width: 1366px) {
  .navbar-logo {
    height: 80px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .carousel-hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle,
  .carousel-hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }

  .section-padding {
    padding: 5rem 0;
  }

  .visual-sphere {
    width: 320px;
    height: 320px;
  }

  .visual-card-1 {
    width: 190px;
    top: 10%;
  }

  .visual-card-2 {
    width: 185px;
    bottom: 8%;
  }
}

/* ==========================================================================
   3. TABLET & IPAD BREAKPOINTS (768px, 820px, 834px, 1024px)
   ========================================================================== */

/* iPad Pro 12.9" Portrait / Netbooks (1024px × 1366px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* Navbar squish protection */
  .custom-navbar .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem !important;
  }

  .navbar-logo {
    height: 70px;
  }

  .header-call-box {
    display: none !important;
    /* Hide call box to create room for menus */
  }

  .header-divider {
    display: none !important;
  }

  /* Hero Metric Sphere scale down */
  .visual-sphere {
    width: 280px;
    height: 280px;
  }

  .visual-card-1 {
    width: 170px;
    padding: 0.8rem;
    font-size: 0.8rem;
  }

  .visual-card-2 {
    width: 160px;
    padding: 0.8rem;
    font-size: 0.8rem;
  }

  .visual-card-3 {
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
  }

  /* Bento Grid Font Shrinkage to prevent overflow */
  .ind-bento-card {
    padding: 1rem !important;
  }

  .ind-card-title {
    font-size: 1rem !important;
  }

  .ind-card-desc {
    font-size: 0.8rem !important;
  }
}

/* iPad Pro 11" (834px × 1194px) & iPad Air (820px × 1180px) */
@media (min-width: 769px) and (max-width: 834.98px) {
  .navbar-logo {
    height: 65px;
  }

  .slider-hero-section,
  .carousel-hero-item {
    height: 520px !important;
  }

  .carousel-hero-title {
    font-size: 2.2rem;
  }

  .carousel-hero-subtitle {
    font-size: 0.95rem;
    max-width: 90%;
    margin: 0 auto 1.5rem;
  }

  /* Grid padding */
  .section-padding {
    padding: 4.5rem 0;
  }

  /* Process nodes spacing */
  .process-wave-circle {
    width: 80px;
    height: 80px;
  }

  /* Testimonial slider space scaling */
  .tsl-left-inner {
    padding: 3rem 2rem !important;
  }

  .tsl-right {
    padding: 3rem 2rem !important;
  }
}

/* iPad Mini & Standard Portrait Tablets (768px × 1024px) */
@media (min-width: 576px) and (max-width: 768.98px) {
  .navbar-logo {
    height: 60px;
  }

  .slider-hero-section,
  .carousel-hero-item {
    height: 480px !important;
  }

  .carousel-hero-title {
    font-size: 2rem;
  }

  .carousel-hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .section-padding {
    padding: 4rem 0;
  }

  /* Adjust About visual card sizes in small tablet views */
  .about-visual-wrapper {
    padding: 2rem 1.5rem !important;
  }

  .about-visual-deck {
    height: 320px !important;
  }

  /* Force testimonials statistics to be grid-2x2 */
  .tsl-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem;
  }
}

/* ==========================================
   4. MOBILE RESOLUTIONS (360px - 430px)
   ========================================== */

/* General Mobile Override Classes */
@media (max-width: 575.98px) {

  /* Common structural adjustments */
  .section-padding {
    padding: 3.5rem 0 !important;
  }

  .section-title {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  .section-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 2rem !important;
  }

  /* Hero sliders */
  .slider-hero-section {
    height: 480px !important;
  }

  .carousel-hero-item {
    height: 480px !important;
  }

  .carousel-hero-content {
    padding: 0 1rem;
  }

  .carousel-hero-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }

  .carousel-hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero Option B spacing */
  .hero-section {
    padding: 4.5rem 0 3rem !important;
  }

  .hero-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
  }

  .hero-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Navigation */
  .navbar-logo {
    height: 79px !important;
  }

  .btn-get-in-touch.btn-sm {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem !important;
  }

  /* About Visual Deck (Card Stacking) */
  .about-visual-wrapper {
    padding: 1.5rem 1rem !important;
  }

  .about-visual-deck {
    height: 275px !important;
  }

  .about-tab-btn {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.72rem !important;
  }

  .card-title-custom {
    font-size: 0.85rem !important;
  }

  .color-swatch {
    width: 25px !important;
    height: 25px !important;
  }

  .font-letter {
    font-size: 1.75rem !important;
  }

  .code-terminal {
    padding: 0.75rem !important;
  }

  .perf-circle {
    width: 50px !important;
    height: 50px !important;
  }

  .perf-meta strong {
    font-size: 0.8rem !important;
  }

  /* Philosophy Card Padding */
  .phil-card {
    padding: 1.5rem !important;
    margin-bottom: 0.5rem;
  }

  .phil-card-title {
    font-size: 1.25rem !important;
  }

  .phil-card-desc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* Mobile Services section styling */
  .mobile-service-card {
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .mobile-service-title {
    font-size: 1.2rem !important;
  }

  /* Mobile Industries Stack */
  .ind-mob-full-card {
    border-radius: 16px !important;
    overflow: hidden;
  }

  .ind-mob-card-img-wrap {
    height: 160px !important;
  }

  .ind-mob-card-body {
    padding: 1.25rem !important;
  }

  .ind-mob-card-title {
    font-size: 1.25rem !important;
  }

  .ind-mob-card-desc {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .ind-mob-card-features {
    font-size: 0.82rem !important;
  }

  /* Process Timeline */
  .process-wave-step {
    margin-bottom: 1.5rem;
  }

  .process-wave-circle {
    width: 65px !important;
    height: 65px !important;
  }

  .process-wave-icon {
    font-size: 1.3rem !important;
  }

  .process-wave-badge {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
  }

  .process-wave-title {
    font-size: 1.15rem !important;
  }

  .process-wave-desc {
    font-size: 0.85rem !important;
    max-width: 90%;
    margin: 0 auto;
  }

  /* Testimonial slider mobile constraints */
  .tsl-counter {
    top: 15px !important;
    right: 15px !important;
    font-size: 0.8rem !important;
  }

  .tsl-card {
    min-height: 380px !important;
    /* Allow room for long quotes */
  }

  .tsl-card-body {
    padding: 1.25rem !important;
  }

  .tsl-card-quote {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
  }

  .tsl-card-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.85rem !important;
  }

  .tsl-card-author-info strong {
    font-size: 0.88rem !important;
  }

  .tsl-card-author-info span {
    font-size: 0.72rem !important;
  }

  /* Contact Form spacing */
  .contact-info-box {
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  .contact-info-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
    margin-right: 1rem !important;
  }

  .contact-info-title {
    font-size: 1rem !important;
  }

  .contact-info-text {
    font-size: 0.85rem !important;
  }

  .btn-submit {
    width: 100% !important;
    padding: 0.75rem !important;
  }

  /* Footer compacting */
  .custom-footer {
    padding: 3rem 0 1.5rem !important;
  }

  .footer-logo {
    max-height: 50px !important;
    margin-bottom: 0.5rem !important;
  }

  .footer-heading {
    margin-bottom: 1rem !important;
    font-size: 1rem !important;
  }

  .footer-bottom {
    margin-top: 2rem !important;
    padding-top: 1.25rem !important;
  }

  /* Back to Top Position */
  .back-to-top {
    bottom: 20px !important;
    right: 20px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }
}

/* Specific Mobile Screen Optimization Targets */

/* iPhone 14 Pro Max (430px × 932px) */
@media (min-width: 413px) and (max-width: 430px) {
  .carousel-hero-title {
    font-size: 1.9rem !important;
  }

  .hero-title {
    font-size: 2rem !important;
  }
}

/* Samsung Galaxy S24 Ultra (412px × 915px) */
@media (min-width: 391px) and (max-width: 412.98px) {
  .carousel-hero-title {
    font-size: 1.85rem !important;
  }

  .hero-title {
    font-size: 1.95rem !important;
  }
}

/* iPhone 12/13/14 (390px × 844px) */
@media (min-width: 376px) and (max-width: 390px) {
  .carousel-hero-title {
    font-size: 1.8rem !important;
  }

  .hero-title {
    font-size: 1.9rem !important;
  }

  .about-visual-deck {
    height: 265px !important;
  }
}

/* iPhone SE (375px × 667px) */
@media (min-width: 361px) and (max-width: 375px) {
  .carousel-hero-title {
    font-size: 1.7rem !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
  }

  .slider-hero-section,
  .carousel-hero-item {
    height: 440px !important;
  }

  .about-visual-deck {
    height: 255px !important;
  }

  .tsl-card {
    min-height: 395px !important;
    /* Give slightly more room for text in short viewport */
  }
}

/* Samsung Galaxy S23 (360px × 780px) and smaller */
@media (max-width: 360px) {
  .carousel-hero-title {
    font-size: 1.6rem !important;
  }

  .hero-title {
    font-size: 1.7rem !important;
  }

  .slider-hero-section,
  .carousel-hero-item {
    height: 420px !important;
  }

  .about-visual-deck {
    height: 245px !important;
  }

  .tsl-card {
    min-height: 420px !important;
    /* Ensure quote text doesn't overflow at narrowest width */
  }

  .ind-mob-kpi .kpi-val {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   5. ABOUT PAGE RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 991.98px) {
  .about-hero-section {
    padding: 3.5rem 0 2.5rem 0;
  }

  .about-story-section,
  .about-values-section,
  .about-bento-values,
  .about-expertise-b {
    padding: 4.5rem 0 !important;
  }

  .about-story-card {
    padding: 2rem;
  }

  .story-metric-divider {
    height: 40px;
  }

  .specs-monitor-wrapper {
    margin-top: 1.5rem;
  }

  .circular-chart-b {
    max-width: 75px;
    max-height: 75px;
  }

  .contact-hero-section {
    padding: 3.5rem 0 2.5rem 0;
  }

  .contact-form-card-wrapper {
    padding: 2rem;
  }

  .contact-map-wrapper {
    margin-top: 1.5rem;
  }

  .services-hero-section {
    padding: 3.5rem 0 2.5rem 0;
  }

  .services-block-item {
    padding: 2.5rem 0;
  }

  .services-block-item .col-lg-5.order-1 {
    margin-bottom: 2rem;
  }

  .web-dev-hero-section,
  .seo-hero-section,
  .ecommerce-hero-section,
  .hosting-hero-section,
  .maintenance-hero-section,
  .automation-hero-section {
    padding: 3.5rem 0 2.5rem 0;
  }

  .web-dev-intro-section .col-lg-6:first-child {
    margin-bottom: 2rem;
  }

  .web-dev-step-card {
    margin-bottom: 1rem;
  }

  .service-sidebar {
    position: static;
    margin-top: 3rem;
  }
}

@media (max-width: 767.98px) {
  .about-hero-title {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }

  .about-hero-subtitle {
    font-size: 1rem !important;
  }

  .about-story-card {
    padding: 1.5rem;
  }

  .about-value-card {
    padding: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .stack-tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.9rem;
  }

  .about-bento-values .col-lg-6 {
    padding: 0 10px;
  }

  .specs-monitor {
    padding: 1rem;
  }

  .spec-code-block {
    font-size: 0.75rem;
  }

  .contact-hero-title {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }

  .contact-hero-subtitle {
    font-size: 1rem !important;
  }

  .contact-form-card-wrapper {
    padding: 1.5rem;
  }

  .services-hero-title {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }

  .services-hero-subtitle {
    font-size: 1rem !important;
  }

  .web-dev-hero-title {
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
  }

  .web-dev-hero-subtitle {
    font-size: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  .about-hero-section {
    padding: 3rem 0 2rem 0;
  }

  .about-hero-title {
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }

  .about-hero-subtitle {
    font-size: 0.88rem !important;
  }

  .about-story-section,
  .about-values-section,
  .about-bento-values,
  .about-expertise-b {
    padding: 3.5rem 0 !important;
  }

  .story-metric-num {
    font-size: 1.8rem;
  }

  .story-metric-label {
    font-size: 0.72rem;
  }

  .story-metric-divider {
    height: 35px;
  }

  .about-cta-inner {
    padding: 2.5rem 1.25rem !important;
  }

  .about-cta-inner h2 {
    font-size: 1.75rem !important;
  }

  .about-cta-inner p {
    font-size: 0.85rem !important;
  }

  .contact-hero-section {
    padding: 3rem 0 2rem 0;
  }

  .contact-hero-title {
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }

  .contact-hero-subtitle {
    font-size: 0.88rem !important;
  }

  .services-hero-section {
    padding: 3rem 0 2rem 0;
  }

  .services-hero-title {
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }

  .services-hero-subtitle {
    font-size: 0.88rem !important;
  }

  .services-block-item {
    padding: 2rem 0;
  }

  .web-dev-hero-section,
  .seo-hero-section,
  .ecommerce-hero-section,
  .hosting-hero-section,
  .maintenance-hero-section,
  .automation-hero-section {
    padding: 3rem 0 2rem 0;
  }

  .web-dev-hero-title {
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }

  .web-dev-hero-subtitle {
    font-size: 0.88rem !important;
  }
}