/* Web Development page — responsive overrides (tablet/mobile) */

/* Tablet (≤991px) */
@media (max-width: 991px){
  /* Choose box */
  .webdev-choose-box{max-width:760px;margin:0 auto;padding:20px}
  .webdev-choose-box-title{font-size:18px;line-height:1.3;margin:0 0 12px}
  .webdev-choose-list{gap:12px}
  .webdev-choose-item{gap:12px}
  .webdev-choose-item img{width:18px;height:18px}
  .webdev-choose-item span{font-size:15px;line-height:1.5}
  /* Hero */
  .webdev-hero-title{font-size:clamp(36px,6.2vw,56px);line-height:1.1;text-align:center}
  .webdev-hero-cta{flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:center}

  /* Intro */
  .webdev-intro-section{padding:72px 0}
  .webdev-intro-section .container-narrow{max-width:820px;padding:0 24px}
  .webdev-intro-text{font-size:16px;line-height:1.65;text-align:center;margin:0 auto}

  /* What section */
  .webdev-what-section{padding:72px 0}
  .webdev-what-section .container-narrow{max-width:860px;padding:0 24px}
  .webdev-what-grid{grid-template-columns:1fr;gap:24px}
  .webdev-what-text{max-width:760px;margin:0 auto 12px}
  .webdev-what-text p{font-size:16px;line-height:1.65;margin:0}
  .webdev-what-cards{gap:16px}
  .webdev-info-card{padding:18px}
  .webdev-card-icon{width:44px;height:44px}
  .webdev-card-title{font-size:18px;line-height:1.3;margin:0}
  .webdev-card-desc{font-size:15px;line-height:1.6;margin:0}

  /* Section headings */
  .webdev-section-title{text-align:center}
  .webdev-section-subtitle{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}

  /* What is Web Dev */
  .webdev-what-grid{grid-template-columns:1fr;gap:20px}
  .webdev-what-cards{flex-direction:column;gap:16px}
  .webdev-card-icon{width:44px;height:44px}

  /* Ecommerce */
  .webdev-ecommerce-grid{grid-template-columns:1fr;gap:24px}
  .webdev-ecommerce-title{font-size:32px;line-height:1.2}
  .webdev-ecommerce-text{font-size:16px;line-height:1.6}
  .webdev-ecommerce-tags{gap:10px}
  .webdev-tags-label{font-size:15px}
  .webdev-tag{padding:10px 20px;font-size:13px}
  .webdev-ecommerce-small{font-size:13px;line-height:1.5}
  .webdev-ecommerce-features{gap:14px}
  .webdev-feature-item{padding:14px;gap:16px}
  .webdev-feature-item span{font-size:15px;line-height:1.4}

  /* Types */
  .webdev-types-grid{flex-wrap:wrap;gap:16px;justify-content:center}
  .webdev-type-card{width:calc(50% - 8px);padding:20px}
  .webdev-type-icon{width:44px;height:44px}
  .webdev-type-title{font-size:17px;line-height:1.3}
  .webdev-quote-box{padding:20px;gap:20px;margin-top:40px}
  .webdev-quote-text{font-size:15px;line-height:1.6}
  .webdev-quote-subtitle{font-size:15px}
  .webdev-quote-main{font-size:18px;line-height:1.4}
  .webdev-quote-tags{gap:12px;flex-wrap:wrap;justify-content:center}
  .webdev-quote-tag{padding:6px 14px;font-size:14px;gap:8px}
  .webdev-quote-tag img{width:16px;height:16px}

  /* Web app */
  .webdev-webapp-features{grid-template-columns:1fr;gap:20px}
  .webdev-webapp-intro{padding:30px 20px;margin-bottom:32px}
  .webdev-webapp-text{font-size:16px;line-height:1.6}
  .webdev-webapp-item{padding:20px;gap:16px}
  .webdev-webapp-icon{width:44px;height:44px}
  .webdev-webapp-item span{font-size:15px;line-height:1.5}
  .webdev-webapp-divider{margin:32px 0}
  .webdev-webapp-footer{font-size:16px;line-height:1.6}

  /* CMS */
  .webdev-cms-grid{grid-template-columns:1fr}

  /* Insights */
  .webdev-section-subtitle-wide{font-size:16px;line-height:1.6;margin:20px auto 40px}
  .webdev-insights-list{gap:14px}
  .webdev-insight-item{gap:14px}
  .webdev-insight-icon{width:44px;height:44px}
  .webdev-insight-icon svg{width:22px;height:22px}
  .webdev-insight-item p{font-size:15px;line-height:1.6}
  .webdev-insights-quote-section{padding:32px 0}
  .webdev-startup-quote-section{padding:32px 0}
  .webdev-quote-card{padding:20px}
  .webdev-quote-card p{font-size:18px;line-height:1.6}
  .webdev-partner-section{padding:32px 0}
  .webdev-partner-box{padding:28px 20px}
  .webdev-partner-box p{font-size:18px;line-height:1.5}

  /* Why Choose section */
  .webdev-why-features{gap:20px}
  .webdev-why-item{padding:20px;gap:16px}
  .webdev-why-icon{width:44px;height:44px}
  .webdev-why-icon svg{width:22px;height:22px}
  .webdev-why-item span{font-size:15px;line-height:1.5}

  /* Startup timeline section */
  .webdev-startup-section{padding:60px 0}
  .webdev-startup-timeline-wrapper{height:500px;max-width:100%}
  .webdev-startup-timeline-wrapper .webdev-timeline-line{top:200px}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot{top:196px}
  .webdev-startup-timeline-wrapper .webdev-step-card{width:140px}
  .webdev-startup-timeline-wrapper .webdev-step-1{left:60px;top:260px}
  .webdev-startup-timeline-wrapper .webdev-step-2{left:240px;top:0}
  .webdev-startup-timeline-wrapper .webdev-step-3{left:420px;top:260px}
  .webdev-startup-timeline-wrapper .webdev-step-4{left:600px;top:0}
  .webdev-startup-timeline-wrapper .webdev-step-label{width:140px}
  .webdev-startup-timeline-wrapper .webdev-step-label-1{left:60px;top:220px}
  .webdev-startup-timeline-wrapper .webdev-step-label-2{left:240px;top:160px}
  .webdev-startup-timeline-wrapper .webdev-step-label-3{left:420px;top:220px}
  .webdev-startup-timeline-wrapper .webdev-step-label-4{left:600px;top:160px}
  .webdev-step-content{padding:20px;gap:16px}
  .webdev-step-icon{width:40px;height:40px}
  .webdev-step-icon svg{width:20px;height:20px}
  .webdev-step-content p{font-size:14px;line-height:1.5}
  .webdev-step-label{font-size:13px}

  /* Industries */
  .webdev-industries-grid{flex-wrap:wrap;gap:16px;justify-content:center}
  .webdev-industry-card{flex:1 1 220px;max-width:320px}

  /* Benefits */
  .webdev-benefits-row{flex-direction:column;align-items:stretch}
  .webdev-benefit-small{max-width:none}
  .webdev-benefits-wide-row{flex-direction:column}
  .webdev-benefit-half{width:100%;max-width:none}
  /* Choose footer text size */
  .webdev-choose-footer{font-size:15px;line-height:1.55}

  /* Mid CTA tablet */
  .webdev-mid-cta{padding:40px 40px}
  .webdev-mid-cta-text{font-size:24px;line-height:1.4}
  .webdev-mid-cta-btn{height:44px;padding:0 28px;font-size:17px}

  /* Bottom CTA tablet */
  .webdev-bottom-cta{padding:40px 40px}
  .webdev-bottom-cta-text{font-size:24px;line-height:1.4}
  .webdev-bottom-cta-btn{height:44px;padding:0 28px;font-size:17px}
}

/* Mobile (≤640px) */
@media (max-width: 640px){
  /* Industries: single horizontal row on mobile */
  .webdev-industries-grid{flex-wrap:nowrap;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scroll-snap-type:x mandatory}
  .webdev-industry-card{flex:0 0 140px;width:140px;scroll-snap-align:start}
  .webdev-industry-icon{width:36px;height:36px;margin:0 auto}
  .webdev-industry-icon .icon-circle{width:36px;height:36px;border-radius:50%}
  .webdev-industry-title{font-size:13px;line-height:1.3;text-align:center}
  /* Choose box */
  .webdev-choose-box{width:92%;max-width:560px;margin:0 auto;padding:12px}
  .webdev-choose-box-title{font-size:15px;margin:0 0 6px}
  .webdev-choose-list{gap:4px}
  .webdev-choose-item{gap:4px}
  .webdev-choose-item img{width:15px;height:15px}
  .webdev-choose-item span{font-size:13px;line-height:1.38}

  /* Choose footer text size */
  .webdev-choose-footer{font-size:13px;line-height:1.5}

  /* Section footer text size */
  .webdev-section-footer{font-size:13px;line-height:1.5}

  /* Benefits section: adjust sizes for mobile */
  .webdev-benefits-section .container-wide{max-width:680px;padding:0 18px}
  .webdev-benefits-intro{font-size:14px;line-height:1.5;margin:0 0 20px}
  .webdev-benefits-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px !important;margin-top:20px}
  .webdev-benefits-row{display:contents !important}
  .webdev-benefits-wide-row{display:contents !important}
  .webdev-benefit-card{padding:16px;gap:12px;width:auto !important}
  .webdev-benefit-icon{width:40px;height:40px}
  .webdev-benefit-icon img{width:20px;height:20px}
  .webdev-benefit-title{font-size:16px;line-height:1.3}
  .webdev-benefit-desc{font-size:13px;line-height:1.5}
  .webdev-benefit-small{max-width:none !important;flex:none !important}
  .webdev-benefit-half{width:auto !important;max-width:none !important;flex:none !important}
  
  /* Only the last card (Brand Trust) spans full width, not Stronger Conversions */
  .webdev-benefits-grid .webdev-benefit-card.webdev-benefit-half:last-child{grid-column:1/-1 !important;max-width:100% !important}
  .webdev-benefits-grid .webdev-benefit-card:nth-child(3){grid-column:span 1 !important}

  .webdev-section-title{font-size:clamp(24px,7vw,32px)!important;line-height:1.2!important;text-align:center!important;margin:0 0 10px!important}
  .webdev-section-subtitle{font-size:14px!important;line-height:1.5!important;text-align:center!important;margin:6px auto 20px!important;max-width:680px!important}
  
  /* Consistent 30px gaps between all sections */
  .webdev-what-section,
  .webdev-services-section,
  .webdev-choose-section,
  .webdev-industries-section,
  .webdev-benefits-section,
  .webdev-ecommerce-section,
  .webdev-types-section,
  .webdev-webapp-section,
  .webdev-cms-section,
  .webdev-startup-section,
  .webdev-startup-quote-section,
  .webdev-why-section,
  .webdev-partner-section,
  .webdev-insights-section,
  .webdev-insights-quote-section,
  .webdev-bottom-cta{padding-top:30px;padding-bottom:0}

  /* First section after hero */
  .webdev-intro-section{padding-top:40px;padding-bottom:0}

  /* Intro */
  .webdev-intro-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-intro-text{font-size:15px;line-height:1.7;text-align:center}
  /* keep <br> visible on mobile */

  /* What section */
  .webdev-what-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-what-section{padding-bottom:0 !important;margin-bottom:0}
  
  /* Services section spacing - reduce top gap */
  .webdev-services-section{padding-top:30px !important;margin-top:0}
  .webdev-services-section .webdev-section-title{margin:0 0 10px}
  .webdev-services-section .webdev-section-subtitle{margin:2px 0 6px}
  .webdev-services-section .logo-marquee{margin-top:8px !important}

  /* How to Choose spacing */
  .webdev-what-grid{grid-template-columns:1fr;gap:10px}
  .webdev-what-text{max-width:680px;margin:0 auto 4px}
  .webdev-what-text p{font-size:15px;line-height:1.7}
  .webdev-what-cards{gap:14px;display:grid;grid-template-columns:repeat(2,1fr)}
  .webdev-info-card{padding:16px}
  .webdev-card-icon{width:40px;height:40px}
  .webdev-card-title{font-size:17px}
  .webdev-card-desc{font-size:14px}

  /* Startup timeline: stack vertically on mobile */
  .webdev-startup-timeline-wrapper{position:relative!important;height:auto!important;padding:12px 0 0!important}
  .webdev-startup-timeline-wrapper .webdev-timeline-line{display:none!important}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot{display:none!important}
  .webdev-startup-timeline-wrapper .webdev-step-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin:10px 0!important}
  .webdev-startup-timeline-wrapper .webdev-step-label{position:relative!important;left:auto!important;top:auto!important;margin-bottom:6px!important}

  /* Mid CTA responsive */
  .webdev-mid-cta{padding:30px 18px !important}
  .webdev-mid-cta-text{font-size:20px;line-height:1.4}
  .webdev-mid-cta-btn{width:100%;max-width:280px;height:44px;padding:0 24px;font-size:16px}

  /* Bottom CTA responsive */
  .webdev-bottom-cta{padding:30px 18px !important}
  .container-cta{flex-direction:column;text-align:center;gap:16px}
  .webdev-bottom-cta-text{font-size:20px;line-height:1.4}
  .webdev-bottom-cta-btn{width:100%;max-width:280px;height:44px;padding:0 24px;font-size:16px}

  /* Ecommerce mobile */
  .webdev-ecommerce-section .container-wide{max-width:680px;padding:0 18px}
  .webdev-ecommerce-grid{grid-template-columns:1fr;gap:20px}
  .webdev-ecommerce-content{gap:18px}
  .webdev-ecommerce-title{font-size:clamp(24px,6vw,28px);line-height:1.3}
  .webdev-ecommerce-text{font-size:15px;line-height:1.65}
  .webdev-ecommerce-tags{gap:8px}
  .webdev-tags-label{font-size:14px}
  .webdev-tags-list{gap:8px;flex-wrap:wrap}
  .webdev-tag{padding:8px 16px;font-size:12px}
  .webdev-ecommerce-small{font-size:12px;line-height:1.5}
  .webdev-ecommerce-features{gap:12px}
  .webdev-feature-item{padding:12px;gap:12px}
  .webdev-feature-item img{width:18px;height:18px}
  .webdev-feature-item span{font-size:13px;line-height:1.45}

  /* Types section mobile */
  .webdev-types-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-types-grid{flex-wrap:nowrap;gap:8px;justify-content:center;margin-bottom:32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .webdev-type-card{flex:0 0 calc(33.333% - 6px);min-width:100px;max-width:none;padding:12px}
  .webdev-type-icon{width:32px;height:32px}
  .webdev-type-icon img{width:18px;height:18px}
  .webdev-type-title{font-size:13px;line-height:1.3;text-align:center}
  .webdev-quote-box{padding:16px;gap:16px;margin-top:32px}
  .webdev-quote-text{font-size:14px;line-height:1.6}
  .webdev-quote-highlight{gap:12px}
  .webdev-quote-subtitle{font-size:14px;line-height:1.5}
  .webdev-quote-main{font-size:16px;line-height:1.5}
  .webdev-quote-tags{gap:8px;flex-wrap:wrap;justify-content:center}
  .webdev-quote-tag{padding:6px 12px;font-size:12px;gap:6px}
  .webdev-quote-tag img{width:14px;height:14px}

  /* Web App section mobile */
  .webdev-webapp-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-webapp-intro{padding:20px 16px;margin-bottom:24px}
  .webdev-webapp-text{font-size:15px;line-height:1.65}
  .webdev-webapp-features{gap:12px}
  .webdev-webapp-item{padding:16px;gap:12px}
  .webdev-webapp-icon{width:40px;height:40px}
  .webdev-webapp-icon svg,.webdev-webapp-icon img{width:20px;height:20px}
  .webdev-webapp-item span{font-size:14px;line-height:1.5}
  .webdev-webapp-divider{margin:24px 0}
  .webdev-webapp-footer{font-size:14px;line-height:1.65}

  /* Insights section mobile */
  .webdev-insights-section .container{max-width:680px;padding:0 18px}
  .webdev-section-subtitle-wide{font-size:14px;line-height:1.65;margin:10px auto 32px}
  .webdev-insights-list{max-width:100%;gap:12px}
  .webdev-insight-item{gap:12px;flex-wrap:wrap}
  .webdev-insight-icon{width:36px;height:36px;flex-shrink:0}
  .webdev-insight-icon svg{width:18px;height:18px}
  .webdev-insight-item p{font-size:14px;line-height:1.6;flex:1 1 0;min-width:200px}
  .webdev-insight-wide{max-width:100%}

  /* Insights Quote section mobile */
  .webdev-insights-quote-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-insights-quote-section{padding:30px 0}
  .webdev-quote-card{padding:16px}
  .webdev-quote-card p{font-size:12px;line-height:1.6}

  /* Startup Quote section mobile - match Insights Quote */
  .webdev-startup-quote-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-startup-quote-section{padding:30px 0}
  .webdev-startup-quote-section .webdev-quote-card{padding:16px}
  .webdev-startup-quote-section .webdev-quote-card p{font-size:12px;line-height:1.6}

  /* Partner section mobile */
  .webdev-partner-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-partner-section{padding:30px 0}
  .webdev-partner-box{padding:20px 16px}
  .webdev-partner-box p{font-size:16px;line-height:1.5}

  /* Why Choose section mobile - keep 2-column layout to match desktop */
  .webdev-why-section .container-narrow{max-width:680px;padding:0 18px}
  .webdev-why-features{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  .webdev-why-item{padding:16px;gap:12px}
  .webdev-why-icon{width:40px;height:40px}
  .webdev-why-icon svg{width:20px;height:20px}
  .webdev-why-item span{font-size:14px;line-height:1.5}

  /* Startup timeline section mobile - maintain horizontal layout */
  .webdev-startup-section .container{max-width:100%;padding:0 18px;overflow-x:auto}
  .webdev-startup-section{padding:30px 0}
  .webdev-startup-timeline-wrapper{height:400px !important;min-width:680px;position:relative !important;padding:0 !important}
  .webdev-startup-timeline-wrapper .webdev-timeline-line{display:block !important;top:160px !important;width:calc(100% - 36px);left:18px}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot{display:block !important;top:156px !important}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot[style*="left: 204px"]{left:60px !important}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot[style*="left: 468px"]{left:200px !important}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot[style*="left: 732px"]{left:340px !important}
  .webdev-startup-timeline-wrapper .webdev-timeline-dot[style*="left: 996px"]{left:480px !important}
  .webdev-startup-timeline-wrapper .webdev-step-card{position:absolute !important;width:120px !important;margin:0 !important}
  .webdev-startup-timeline-wrapper .webdev-step-1{left:30px !important;top:210px !important}
  .webdev-startup-timeline-wrapper .webdev-step-2{left:170px !important;top:0 !important}
  .webdev-startup-timeline-wrapper .webdev-step-3{left:310px !important;top:210px !important}
  .webdev-startup-timeline-wrapper .webdev-step-4{left:450px !important;top:0 !important}
  .webdev-startup-timeline-wrapper .webdev-step-label{position:absolute !important;width:120px !important;left:auto !important;top:auto !important;margin:0 !important}
  .webdev-startup-timeline-wrapper .webdev-step-label-1{left:30px !important;top:170px !important}
  .webdev-startup-timeline-wrapper .webdev-step-label-2{left:170px !important;top:130px !important}
  .webdev-startup-timeline-wrapper .webdev-step-label-3{left:310px !important;top:170px !important}
  .webdev-startup-timeline-wrapper .webdev-step-label-4{left:450px !important;top:130px !important}
  .webdev-step-content{padding:16px;gap:12px}
  .webdev-step-icon{width:36px;height:36px}
  .webdev-step-icon svg{width:18px;height:18px}
  .webdev-step-content p{font-size:13px;line-height:1.4}
  .webdev-step-label{font-size:11px}
}