/* GoClick ERP Production — responsive master layer
   Purpose: normalize sizing, prevent overflow, preserve image ratio,
   and keep every section usable from large desktop to small mobile. */
:root{
  --gc-container:1240px;
  --gc-mobile-gutter:16px;
  --gc-tablet-gutter:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;max-width:100%;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
svg{max-width:100%}
iframe,video{display:block;max-width:100%}
.container{width:100%;margin-left:auto;margin-right:auto}
.row{min-width:0}
.row>[class*="col-"],.row>div{min-width:0}
section,.container-fluid{scroll-margin-top:78px}

/* ---------- Header ---------- */
.navbar{position:absolute;inset:0 0 auto 0;z-index:1000;width:100%;min-height:74px}
.production-main-nav{display:flex!important;align-items:center;justify-content:center;gap:0;min-width:0}
.production-main-nav .goclick-menu-logo{flex:0 0 auto;display:flex!important;align-items:center;margin-right:24px!important;padding:0!important}
.production-main-nav .goclick-menu-logo img{width:auto!important;height:38px!important;max-width:180px!important;object-fit:contain}
.production-main-nav .nav-link{flex:0 0 auto;white-space:nowrap;padding:27px 0!important;margin-right:20px!important;line-height:1.1;font-size:14px!important}
.production-main-nav .header-consult-btn{margin-left:0!important;margin-right:0!important}

@media (max-width:1199.98px) and (min-width:992px){
  .container{max-width:960px!important;padding-left:18px;padding-right:18px}
  .production-main-nav .goclick-menu-logo{margin-right:14px!important}
  .production-main-nav .goclick-menu-logo img{height:34px!important;max-width:155px!important}
  .production-main-nav .nav-link{margin-right:11px!important;padding:23px 0!important;font-size:12.2px!important}
  .header-consult-btn{min-width:118px!important;font-size:12px!important;padding:9px 12px!important}
}

@media (max-width:991.98px){
  .navbar{min-height:68px;padding-left:0!important;padding-right:0!important}
  .navbar>.navbar-toggler{position:relative;z-index:1101;margin:10px 14px 10px auto!important;padding:8px 9px!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:10px!important;background:rgba(6,28,46,.22)!important;box-shadow:none!important}
  .navbar-collapse{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;margin:0!important;padding:0!important;z-index:1099;background:transparent!important}
  .production-main-nav{width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;max-height:33vh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px 18px 14px!important;background:rgba(7,26,42,.97)!important;border-top:1px solid rgba(255,255,255,.14)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .production-main-nav .goclick-menu-logo{display:flex!important;width:100%!important;justify-content:flex-start!important;margin:0!important;padding:0 0 10px!important;min-height:44px!important;border-bottom:1px solid rgba(255,255,255,.13)!important}
  .production-main-nav .goclick-menu-logo img{height:34px!important;max-width:170px!important}
  .production-main-nav .nav-link{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:42px;padding:10px 4px!important;margin:0!important;color:#fff!important;font-size:15px!important;font-weight:600!important;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal}
  .production-main-nav .nav-link:last-child{border-bottom:0}
  .production-main-nav .nav-link::after{display:none!important}
  .header-consult-btn{width:100%!important;justify-content:center!important;margin-top:8px!important}
}

/* ---------- Global section rhythm ---------- */
section,.container-fluid{width:100%;max-width:100%;overflow-x:clip}
.container-fluid.p-0{overflow:visible}
@media (min-width:1200px){.container{max-width:var(--gc-container)!important;padding-left:24px;padding-right:24px}}
@media (max-width:1199.98px) and (min-width:992px){.container{max-width:960px!important}}
@media (max-width:991.98px) and (min-width:768px){.container{max-width:720px!important;padding-left:var(--gc-tablet-gutter);padding-right:var(--gc-tablet-gutter)}}
@media (max-width:767.98px){.container{max-width:100%!important;padding-left:var(--gc-mobile-gutter)!important;padding-right:var(--gc-mobile-gutter)!important}.container-fluid>.container{padding-left:var(--gc-mobile-gutter)!important;padding-right:var(--gc-mobile-gutter)!important}}

.title{max-width:100%}
.title .title-left,.title .title-center,.title .title-right{max-width:100%;overflow:visible}
.title h1,.title h2,.title h3,.title h4,.title h5,.title p{overflow-wrap:break-word;word-break:normal}
.title .title-center h1{max-width:100%}

/* ---------- Hero ---------- */
#header-carousel{position:relative;width:100%;overflow:hidden;background:#dfeef3}
#header-carousel .carousel-inner{width:100%;overflow:hidden}
#header-carousel .carousel-item{position:relative;width:100%;overflow:hidden}
#header-carousel .carousel-item>img{display:block;width:100%;height:auto;object-fit:cover;object-position:center center}
#header-carousel .carousel-caption{position:absolute!important;inset:0!important;width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;z-index:2;background:linear-gradient(180deg,rgba(7,29,44,.22),rgba(7,29,44,.24))!important;padding:clamp(86px,9vw,130px) clamp(24px,4vw,56px) 48px!important;text-align:center;overflow:hidden}
#header-carousel .carousel-caption .title{width:min(100%,1060px)!important;margin:0 auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#header-carousel .carousel-caption .title h5{font-size:clamp(11px,1.2vw,16px)!important;line-height:1.3!important;letter-spacing:.20em!important;color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important;margin:0 0 12px!important}
#header-carousel .carousel-caption .title h1{max-width:1020px!important;margin:0 auto!important;color:#fff!important;font-size:clamp(40px,4.2vw,64px)!important;line-height:1.06!important;letter-spacing:.012em!important;text-shadow:0 4px 18px rgba(0,0,0,.58)!important;border-bottom:1px solid rgba(255,255,255,.72)!important;padding:0 0 12px!important;overflow-wrap:normal!important;word-break:normal!important}
#header-carousel .carousel-caption p{width:min(100%,980px)!important;margin:24px auto 28px!important;color:#fff!important;font-size:clamp(15px,1.25vw,19px)!important;line-height:1.68!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important}
#header-carousel .carousel-caption>.btn{min-height:50px!important;padding:0 30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;border-radius:999px!important}
#header-carousel .carousel-control-prev,#header-carousel .carousel-control-next{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:8%!important;height:64px!important;z-index:5}

@media (max-width:1199.98px) and (min-width:992px){
  #header-carousel .carousel-caption{padding:92px 40px 44px!important}
  #header-carousel .carousel-caption .title h1{font-size:clamp(36px,4.4vw,54px)!important}
  #header-carousel .carousel-caption p{font-size:16px!important;max-width:860px!important}
}
@media (max-width:991.98px) and (min-width:768px){
  #header-carousel .carousel-item{height:clamp(500px,72vw,620px)!important;min-height:0!important}
  #header-carousel .carousel-item>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  #header-carousel .carousel-caption{padding:92px 44px 42px!important}
  #header-carousel .carousel-caption .title h1{font-size:clamp(34px,5vw,48px)!important}
  #header-carousel .carousel-caption p{font-size:15.5px!important;max-width:700px!important;margin:18px auto 22px!important}
}
@media (max-width:767.98px){
  #header-carousel .carousel-item{height:clamp(520px,142vw,620px)!important;min-height:520px!important}
  #header-carousel .carousel-item>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;filter:saturate(1.03) brightness(.74) contrast(1.01)!important}
  #header-carousel .carousel-caption{padding:86px 28px 34px!important;background:linear-gradient(180deg,rgba(7,29,44,.30) 0%,rgba(7,29,44,.14) 48%,rgba(7,29,44,.30) 100%)!important}
  #header-carousel .carousel-caption .title{width:100%!important;max-width:600px!important}
  #header-carousel .carousel-caption .title h5{font-size:clamp(9px,2.6vw,12px)!important;letter-spacing:.18em!important;margin-bottom:9px!important}
  #header-carousel .carousel-caption .title h1{width:100%!important;max-width:600px!important;font-size:clamp(27px,7.2vw,38px)!important;line-height:1.08!important;letter-spacing:0!important;padding-bottom:10px!important;overflow-wrap:normal!important;word-break:keep-all!important;text-wrap:balance!important}
  #header-carousel .carousel-caption p{width:100%!important;max-width:580px!important;margin:17px auto 20px!important;font-size:clamp(13px,3.7vw,16px)!important;line-height:1.56!important}
  #header-carousel .carousel-caption>.btn{min-height:46px!important;padding:0 22px!important;font-size:13px!important}
  #header-carousel .carousel-control-prev,#header-carousel .carousel-control-next{width:13%!important;height:54px!important}
  #header-carousel .carousel-control-prev-icon,#header-carousel .carousel-control-next-icon{width:2rem;height:2rem;filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.4))!important}
}
@media (max-width:575.98px){
  #header-carousel .carousel-item{height:clamp(500px,154vw,590px)!important;min-height:500px!important}
  #header-carousel .carousel-caption{padding:82px 18px 28px!important}
  #header-carousel .carousel-caption .title h1{font-size:clamp(25px,7.2vw,33px)!important;line-height:1.08!important}
  #header-carousel .carousel-caption p{font-size:clamp(12.5px,3.65vw,15px)!important;line-height:1.52!important;margin-top:15px!important;margin-bottom:18px!important}
}
@media (max-width:399.98px){
  #header-carousel .carousel-item{height:500px!important;min-height:500px!important}
  #header-carousel .carousel-caption{padding:78px 13px 22px!important}
  #header-carousel .carousel-caption .title h5{font-size:9px!important;letter-spacing:.15em!important}
  #header-carousel .carousel-caption .title h1{font-size:24px!important;line-height:1.06!important;padding-bottom:8px!important}
  #header-carousel .carousel-caption p{font-size:12px!important;line-height:1.48!important;margin:13px auto 16px!important}
  #header-carousel .carousel-caption>.btn{min-height:43px!important;font-size:12.5px!important;padding:0 19px!important}
}

/* ---------- Content cards / grids ---------- */
.production-stages,.erp-module-grid{display:grid!important;align-items:stretch!important}
.production-stages{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.erp-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.production-stage-card,.production-model-card,.erp-module-card,.production-pain-card,.production-outcome-card,.erp-permission-item,.production-faq-item{min-width:0;max-width:100%;overflow-wrap:break-word}
.production-stage-card,.production-model-card,.erp-module-card{height:100%!important}
.production-stage-card p,.production-model-card p,.erp-module-card p,.erp-module-card li{overflow-wrap:break-word;word-break:normal}
.production-stage-card .production-stage-icon,.production-model-card .production-model-icon,.erp-module-icon,.production-pain-icon,.erp-permission-item>i{flex-shrink:0}

@media (max-width:1199.98px) and (min-width:768px){
  .production-stages{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .erp-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767.98px){
  .production-stages,.erp-module-grid{grid-template-columns:1fr!important;gap:14px!important}
  .production-stage-card{padding:20px!important}
  .production-stage-card h3{font-size:18px!important;line-height:1.35!important}
  .erp-module-card{padding:19px 17px!important}
  .erp-module-card h3{font-size:16px!important;line-height:1.35!important}
  .erp-module-card p,.erp-module-card li{font-size:13px!important;line-height:1.58!important}
}

/* ---------- Permission ---------- */
.erp-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important}
@media(max-width:991.98px){.erp-permission-grid{grid-template-columns:1fr!important}}
.erp-permission-flow{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center;gap:14px!important}
@media(max-width:991.98px){.erp-permission-flow{grid-template-columns:1fr!important}.erp-permission-flow>i{transform:rotate(90deg)!important;justify-self:center!important}}

/* ---------- Consultation ---------- */
.consultation-section .consultation-grid{display:grid!important;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;gap:58px!important;align-items:center!important}
.consultation-section .consultation-card,.consultation-section .consultation-info{min-width:0;max-width:100%}
.consultation-section .consultation-card{height:auto!important}
.consultation-section form .row>[class*="col-"]{min-width:0}
.consultation-section form .form-control{max-width:100%!important}
@media(max-width:991.98px){.consultation-section .consultation-grid{grid-template-columns:1fr!important;gap:34px!important}}
@media(max-width:575.98px){.consultation-section .consultation-grid{gap:26px!important}.consultation-section .consultation-info h2{font-size:clamp(32px,9vw,40px)!important}.consultation-section .consultation-card{padding:24px 17px 22px!important;border-radius:18px!important}.consultation-section form .form-control{min-height:49px!important}.consultation-section form button[type="submit"]{width:100%!important}}

/* ---------- Images: keep natural aspect ratio everywhere except the hero ---------- */
.about img,.production-detail-section img,.production-models-wrap img,.production-pain-section img,.erp-modules-section img,.erp-permission-section img,.production-outcomes-section img,.production-faq-section img,.consultation-section img{width:100%;height:auto!important;object-fit:contain!important;object-position:center!important}
.about [class*="col-"]>img,.production-detail-section [class*="col-"]>img,.production-models-wrap [class*="col-"]>img{max-height:none!important}

/* ---------- Sections / typography ---------- */
@media(max-width:767.98px){
  .title{margin-bottom:1.4rem!important}
  .title h2,.title-center h2,.title-left h2,.title-right h2{font-size:clamp(25px,7.4vw,34px)!important;line-height:1.15!important}
  .erp-modules-section,.erp-workflow-section,.production-detail-section,.production-models-wrap,.erp-permission-section,.production-pain-section,.production-outcomes-section,.production-faq-section,.consultation-section{overflow:visible!important}
  .production-detail-lead,.production-models-lead,.erp-modules-lead,.production-pain-lead,.production-outcomes-lead,.erp-workflow-lead{font-size:14.5px!important;line-height:1.7!important}
}

/* ---------- Tables / long content ---------- */
.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
ul,ol{max-width:100%}
button,.btn,input,select,textarea{max-width:100%}

/* ---------- Popup ---------- */
.goclick-success-overlay{padding:20px!important}
@media(max-width:575.98px){
  .goclick-success-overlay{padding:12px!important}
  .goclick-success-modal{width:min(100%,420px)!important;max-height:88vh;overflow:auto!important;padding:24px 18px!important;border-radius:18px!important}
  .goclick-success-modal h3{font-size:22px!important}
  .goclick-success-modal p{font-size:14px!important;line-height:1.6!important}
  .goclick-success-confirm{width:100%!important;min-height:46px!important}
}

/* ---------- Footer / floating button ---------- */
@media(max-width:767.98px){
  .footer{padding-top:42px!important;padding-bottom:30px!important}
  .footer img{max-width:180px!important;height:auto!important;margin-inline:auto}
  .back-to-top{right:16px!important;bottom:16px!important}
}