#cgn-fmcg {
  padding: 80px 0px !important;
}
.prod-badge,
.pd-badge {
  width: max-content !important;
}
.prod-badges,
.pd-badges {
  width: 100% !important;
  /* flex-direction: unset !important; */
}
/* .pd-gallery,
.pd-main-wrap {
  height: 100% !important;
  width: 100% !important;
} */
.overlay.open {
  height: calc(100vh - 70px) !important;
  margin-top: 70px !important;
}
@media only screen and (max-width: 767px) {
  .W,
  .nw {
    padding: 0px 15px !important;
  }
  .nlogo img {
    height: 50px !important;
  }
  #nav {
    height: 70px;
  }
  .mnav {
    top: 70px !important;
    padding: 0px 15px !important;
  }
  .hero-slider {
    margin-top: 70px !important;
    height: calc(100vh - 70px) !important;
    min-height: unset !important;
  }
  .slide-content {
    padding: 25px 15px !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
  }

  .slide-title,
  .al.in h2,
  h2.cth-refined,
  .page-title {
    font-size: 32px !important;
    /* font-weight: 700 !important; */
  }
  .sz-content .snum {
    font-size: 26px !important;
  }
  /* h2.cth-refined br {
    display: none !important;
    margin-left: 15px !important;
  } */
  .slide-sub,
  .slide-title,
  .au.in,
  .al.in,
  .ar.in {
    margin-bottom: 15px !important;
  }
  .ui-lead {
    margin: 25px 0px !important;
  }
  .ui-card.card-value.au.d2.in {
    margin-bottom: 25px !important;
  }
  .ui-card {
    border-color: #00000010 !important;
  }
  .sbtn1,
  .sbtn2,
  .btn-glow,
  .btn-orange,
  .btn-slate,
  .cbtn1,
  .cbtn2,
  .ctax .au.d2.in a {
    width: 100% !important;
    text-align: center !important;
  }
  .sec,
  .sband-modern,
  .footer-modern,
  .about-intro,
  .vm-sec,
  .what-sec,
  .cap-sec,
  .how-sec,
  .value-sec,
  .benefits-sec,
  .intro-sec,
  .div-sec,
  .ins,
  .handle-sec,
  .kp-sec,
  .phil-sec,
  .section,
  .ctax,
  .form-sec,
  .newsletter-band {
    padding: 50px 0px !important;
  }
  .ui-container,
  .fm-grid,
  .ai-grid,
  .intro-grid,
  .phil-grid,
  .two-col,
  .adv-grid,
  .form-grid,
  .contact-grid {
    gap: 50px !important;
  }
  .ui-left,
  .how-header,
  .value-header,
  .how-header h2,
  .value-header h2,
  .how-header p,
  .value-header p,
  .ins .W .au.in,
  .ins .W h2,
  .ins .W p,
  .handle-sec .W h2,
  .handle-sec .W p,
  .handle-sec .W .au.in,
  .swsc .W .au.in,
  .swsc .W h2,
  .swsc .W p,
  .tir .W .au.in,
  .tir .W h2,
  .tir .W p,
  .wgi .W .au.in,
  .wgi .W h2,
  .wgi .W p,
  .section .W .au.in,
  .section .W h2,
  .section .W p {
    text-align: left !important;
  }
  .value-header .stag span,
  .ins .W .stag span,
  .handle-sec .W .stag span,
  .phil-sec .W .stag span,
  .swsc .W .stag span,
  .tir .W .stag span,
  .wgi .W .stag span,
  .section .W .stag span {
    margin: 0px !important;
  }
  .W .wp-title-box,
  .W h2.cth-refined,
  .W .wp-desc-box,
  .W .hww-grid .hww-card,
  .W .wp-grid .wp-card,
  .cta-card-refined .cw-item,
  .W .ai-grid .ai-img-wrap,
  .W .cap-grid .cap-item,
  .W .val-item,
  .W .ben-card,
  .cta-btns,
  .W .div-grid,
  .w .div-content,
  .ins .W .str-item,
  .intro-grid .al.in,
  .handle-item,
  .swsc .W .sector-card,
  .W .strength-card,
  .W .why-cell,
  .W .region-card,
  .W .supply-item,
  .W .ch-cell,
  .W .why-card,
  .W .hiring-steps .hs-step:last-child,
  .W .job-card,
  .W .form-grid .al.in {
    margin-bottom: 0px !important;
  }
  .wp-head,
  section#partner,
  .intro-sec {
    padding-bottom: 0px !important;
  }
  /* .div-sec {
    padding-top: 0px !important;
  } */
  .hww-grid,
  .cta-r-refined,
  .how-grid,
  .W .value-grid,
  .div-grid,
  .str-grid,
  .region-grid,
  .supply-grid,
  .channel-grid {
    gap: 26px !important;
  }
  .handle-grid {
    gap: 15px !important;
  }
  .tender-grid {
    gap: 0px !important;
  }
  .hww-card,
  .vm-card,
  .cap-item,
  .val-item,
  .ben-card,
  .str-item,
  .handle-item,
  .sector-card,
  .supply-item,
  .ch-cell,
  .why-card,
  .hs-step,
  .job-card,
  .form-wrap,
  .contact-form-wrap {
    padding: 25px !important;
  }
  .kp-card {
    padding: 25px 15px !important;
  }
  .str-icon,
  .ch-ic {
    margin: unset !important;
    margin-bottom: 15px !important;
  }
  .W .wp-grid .wp-card,
  .ai-pillar,
  .how-step {
    padding: 15px !important;
  }
  .fm-grid,
  .how-step,
  .W .hs-step {
    margin-bottom: 50px !important;
  }
  .fm-bottom {
    padding: 50px 0px !important;
    padding-bottom: 0px !important;
  }
  .page-hero {
    margin-top: 70px !important;
    padding: 50px 15px !important;
  }
  .cta-band {
    padding: 50px 15px !important;
  }
  .page-hero-inner,
  .cta-band .W {
    padding: 0px !important;
  }
  .ai-body,
  .body-text {
    margin: 0px !important;
    margin-top: 15px !important;
  }
  .ai-pillars,
  .vm-grid,
  .vs-grid,
  .value-grid,
  .ben-grid,
  .handle-grid,
  .stats-strip,
  .tender-grid,
  .of-grid,
  .adv-points,
  .why-grid,
  .hiring-steps {
    margin-top: 50px !important;
  }
  .ai-pillars,
  .why-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-gap: 26px !important;
    background: #fff !important;
  }
  .sector-grid,
  .strength-grid,
  .why-grid,
  .region-grid,
  .supply-grid,
  .channel-grid,
  .hiring-steps {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .ai-pillar,
  .how-step,
  .stats-strip,
  .why-cell,
  .supply-item,
  .why-card,
  .hs-step {
    box-shadow: 0px 0px 5px #00000015 !important;
  }
  .cap-grid,
  .sector-grid,
  .strength-grid,
  .why-grid {
    gap: 16px !important;
    background: unset !important;
  }
  .strength-card,
  .why-card {
    border: unset !important;
  }
  section.about-intro,
  .how-sec,
  .div-sec,
  .kp-sec,
  .phil-sec,
  .intro-sec,
  .section {
    overflow: hidden !important;
  }
  .how-grid {
    background: #fff !important;
  }
  .how-step::after,
  .hs-step::after {
    top: unset !important;
    right: unset !important;
    left: 50% !important;
    bottom: -42px !important;
    transform: translateX(-50%) rotate(90deg) !important;
    font-size: 30px !important;
  }
  .W .value-grid,
  .W .ben-grid,
  .str-grid,
  .handle-grid,
  .supply-grid,
  .channel-grid,
  .hiring-steps,
  .hs-step::after {
    background: unset !important;
  }
  .W .val-item,
  .str-item,
  .ch-cell {
    background: #272727 !important;
  }
  #cgn-fmcg {
    padding: 50px 0px !important;
  }
  .div-grid.rev .div-content {
    order: 2 !important;
  }
  .kp-card,
  .newsletter-band .au.d2.in {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .kp-card .g4x {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .blog-topics .bt-item {
    align-items: center !important;
  }
  .nl-input {
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  .mnav.on a {
    /* font-size: 13px !important;
  font-weight: 600 !important; */
    color: var(--slate-500) !important;
    /* letter-spacing: 0.2px !important;
  transition: color 0.2s !important; */
  }

  .mnav.on a:hover,
  .mnav.on a.active {
    color: var(--brand-orange) !important;
  }

  .products-toolbar {
    flex-direction: row !important;
    align-items: center !important;
  }
  .toolbar-right {
    width: max-content !important;
  }

  .pd-hero {
    padding-top: 0px !important;
  }
  .overlay.open {
    height: calc(100vh - 70px) !important;
    margin-top: 70px !important;
  }

  .vs-grid {
    gap: 16px !important;
  }
  .vs-card {
    width: 100% !important;
  }
  .form-row {
    gap: 0px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .W,
  .nw {
    padding: 0px 25px !important;
  }
  .nlogo img {
    height: 50px !important;
  }
  #nav {
    height: 70px;
  }
  .mnav {
    top: 70px !important;
    padding: 0px 25px !important;
  }
  .hero-slider {
    margin-top: 70px !important;
    height: calc(100vh - 110px) !important;
    min-height: unset !important;
  }
  .slide-content {
    padding: 25px !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
  }

  .slide-title,
  .al.in h2,
  h2.cth-refined,
  .page-title {
    font-size: 50px !important;
    /* font-weight: 700 !important; */
  }
  .sz-content .snum {
    font-size: 16px !important;
  }
  /* h2.cth-refined br {
    display: none !important;
    margin-left: 15px !important;
  } */
  .slide-sub,
  .slide-title,
  .au.in,
  .al.in,
  .ar.in {
    margin-bottom: 15px !important;
  }
  .ui-lead {
    margin: 25px 0px !important;
  }
  .ui-card.card-value.au.d2.in {
    margin-bottom: 25px !important;
  }
  .ui-card {
    border-color: #00000010 !important;
  }
  .sbtn1,
  .sbtn2,
  .btn-glow,
  .btn-orange,
  .btn-slate,
  .cbtn1,
  .cbtn2,
  .ctax .au.d2.in a {
    width: 100% !important;
    text-align: center !important;
  }
  .sec,
  .sband-modern,
  .footer-modern,
  .about-intro,
  .vm-sec,
  .what-sec,
  .cap-sec,
  .how-sec,
  .value-sec,
  .benefits-sec,
  .intro-sec,
  .div-sec,
  .ins,
  .handle-sec,
  .kp-sec,
  .phil-sec,
  .section,
  .ctax,
  .form-sec,
  .newsletter-band {
    padding: 50px 0px !important;
  }
  .ui-container,
  .fm-grid,
  .ai-grid,
  .intro-grid,
  .phil-grid,
  .two-col,
  .adv-grid,
  .form-grid,
  .contact-grid {
    gap: 50px !important;
  }
  .ui-left,
  .how-header,
  .value-header,
  .how-header h2,
  .value-header h2,
  .how-header p,
  .value-header p,
  .ins .W .au.in,
  .ins .W h2,
  .ins .W p,
  .handle-sec .W h2,
  .handle-sec .W p,
  .handle-sec .W .au.in,
  .swsc .W .au.in,
  .swsc .W h2,
  .swsc .W p,
  .tir .W .au.in,
  .tir .W h2,
  .tir .W p,
  .wgi .W .au.in,
  .wgi .W h2,
  .wgi .W p,
  .section .W .au.in,
  .section .W h2,
  .section .W p {
    text-align: left !important;
  }
  .value-header .stag span,
  .ins .W .stag span,
  .handle-sec .W .stag span,
  .phil-sec .W .stag span,
  .swsc .W .stag span,
  .tir .W .stag span,
  .wgi .W .stag span,
  .section .W .stag span {
    margin: 0px !important;
  }
  .W .wp-title-box,
  .W h2.cth-refined,
  .W .wp-desc-box,
  .W .hww-grid .hww-card,
  .W .wp-grid .wp-card,
  .cta-card-refined .cw-item,
  .W .ai-grid .ai-img-wrap,
  .W .cap-grid .cap-item,
  .W .val-item,
  .W .ben-card,
  .cta-btns,
  .W .div-grid,
  .w .div-content,
  .ins .W .str-item,
  .intro-grid .al.in,
  .handle-item,
  .swsc .W .sector-card,
  .W .strength-card,
  .W .why-cell,
  .W .region-card,
  .W .supply-item,
  .W .ch-cell,
  .W .why-card,
  .W .hiring-steps .hs-step:last-child,
  .W .job-card,
  .W .form-grid .al.in {
    margin-bottom: 0px !important;
  }
  .wp-head,
  section#partner,
  .intro-sec {
    padding-bottom: 0px !important;
  }
  /* .div-sec {
    padding-top: 0px !important;
  } */
  .hww-grid,
  .cta-r-refined,
  .how-grid,
  .W .value-grid,
  .div-grid,
  .str-grid,
  .region-grid,
  .supply-grid,
  .channel-grid {
    gap: 26px !important;
  }
  .handle-grid {
    gap: 15px !important;
  }
  .tender-grid {
    gap: 0px !important;
  }
  .hww-card,
  .vm-card,
  .cap-item,
  .val-item,
  .ben-card,
  .str-item,
  .handle-item,
  .sector-card,
  .supply-item,
  .ch-cell,
  .why-card,
  .hs-step,
  .job-card,
  .form-wrap,
  .contact-form-wrap {
    padding: 25px !important;
  }
  .kp-card {
    padding: 25px !important;
  }
  .str-icon,
  .ch-ic {
    margin: unset !important;
    margin-bottom: 15px !important;
  }
  .W .wp-grid .wp-card,
  .ai-pillar,
  .how-step {
    padding: 25px !important;
  }
  .fm-grid,
  .how-step,
  .W .hs-step {
    margin-bottom: 50px !important;
  }
  .fm-bottom {
    padding: 50px 0px !important;
    padding-bottom: 0px !important;
  }
  .page-hero {
    margin-top: 70px !important;
    padding: 50px 25px !important;
  }
  .cta-band {
    padding: 50px 25px !important;
  }
  .page-hero-inner,
  .cta-band .W {
    padding: 0px !important;
  }
  .ai-body,
  .body-text {
    margin: 0px !important;
    margin-top: 15px !important;
  }
  .ai-pillars,
  .vm-grid,
  .vs-grid,
  .value-grid,
  .ben-grid,
  .handle-grid,
  .stats-strip,
  .tender-grid,
  .of-grid,
  .adv-points,
  .why-grid,
  .hiring-steps {
    margin-top: 50px !important;
  }
  .ai-pillars,
  .why-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-gap: 26px !important;
    background: #fff !important;
  }
  .sector-grid,
  .strength-grid,
  .why-grid,
  .region-grid,
  .supply-grid,
  .channel-grid,
  .hiring-steps {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .ai-pillar,
  .how-step,
  .stats-strip,
  .why-cell,
  .supply-item,
  .why-card,
  .hs-step {
    box-shadow: 0px 0px 5px #00000015 !important;
  }
  .cap-grid,
  .sector-grid,
  .strength-grid,
  .why-grid {
    gap: 16px !important;
    background: unset !important;
  }
  .strength-card,
  .why-card {
    border: unset !important;
  }
  section.about-intro,
  .how-sec,
  .div-sec,
  .kp-sec,
  .phil-sec,
  .intro-sec,
  .section {
    overflow: hidden !important;
  }
  .how-grid {
    background: #fff !important;
  }
  .how-step::after,
  .hs-step::after {
    top: unset !important;
    right: unset !important;
    left: 50% !important;
    bottom: -42px !important;
    transform: translateX(-50%) rotate(90deg) !important;
    font-size: 30px !important;
  }
  .W .value-grid,
  .W .ben-grid,
  .str-grid,
  .handle-grid,
  .supply-grid,
  .channel-grid,
  .hiring-steps,
  .hs-step::after {
    background: unset !important;
  }
  .W .val-item,
  .str-item,
  .ch-cell {
    background: #272727 !important;
  }
  #cgn-fmcg {
    padding: 50px 0px !important;
  }
  .div-grid.rev .div-content {
    order: 2 !important;
  }
  .kp-card,
  .newsletter-band .au.d2.in,
  .ui-left {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .kp-card .g4x {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .vs-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
  }
  .vs-card {
    width: calc(50% - 14px) !important;
  }
  .blog-topics .bt-item {
    align-items: center !important;
  }
  .nl-input {
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  .mnav.on a {
    /* font-size: 13px !important;
  font-weight: 600 !important; */
    color: var(--slate-500) !important;
    /* letter-spacing: 0.2px !important;
  transition: color 0.2s !important; */
  }

  .mnav.on a:hover,
  .mnav.on a.active {
    color: var(--brand-orange) !important;
  }

  .products-toolbar {
    flex-direction: row !important;
    align-items: center !important;
  }
  .toolbar-right {
    width: max-content !important;
  }

  .pd-hero {
    padding-top: 0px !important;
  }
  .overlay.open {
    height: calc(100vh - 70px) !important;
    margin-top: 70px !important;
  }

  .sgrid-zigzag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
  }
  .scell-zig {
    width: calc(33.33% - 24px) !important;
  }
  .sz-diamond {
    width: 150px !important;
    height: 150px !important;
  }
  .hww-grid,
  .wp-grid,
  .ai-pillars,
  .why-grid,
  .cap-grid,
  .value-grid,
  .sector-grid,
  .strength-grid,
  .region-grid,
  .supply-grid,
  .channel-grid,
  .job-grid,
  .blog-featured,
  .blog-grid,
  .blog-topics,
  .inquiry-types,
  .form-row,
  .pd-cta {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ai-img,
  .div-img,
  .partner-img,
  .adv-img {
    aspect-ratio: 4/3 !important;
  }

  .str-grid,
  .why-grid,
  .ci-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    flex-wrap: wrap !important;
  }
  .str-item,
  .why-cell,
  .why-card {
    width: calc(50% - 24px) !important;
  }
  .ci-box {
    flex-direction: row !important;
    margin-bottom: 25px !important;
    gap: 12px !important;
  }
  .ci-card {
    width: calc(50% - 6px) !important;
  }
  .wc-d {
    /* min-height: 62.4px !important; */
    font-size: 12px !important;
  }
  .sbtn1,
  .sbtn2 {
    width: 38% !important;
  }
  .how-sec .W p,
  .value-sec .W p,
  .ins .W p,
  .handle-sec .W p,
  .swsc .W p,
  .tir .W p,
  .section .W p {
    margin: 15px 0px !important;
  }
  .cta-inner,
  .nl-inner {
    align-items: start !important;
  }
  .cta-btns,
  .ctax .au.d2.in {
    width: 100% !important;
  }
  .cbtn1,
  .cbtn2,
  .ctax .au.d2.in a {
    width: 38% !important;
  }
  .stats-strip,
  .of-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .of-grid > div {
    border-bottom: 1px solid var(--border);
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}
@media (min-width: 1100px) and (max-width: 1200px) {
  /* Header */
  .nlinks,
  #nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 9px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1250px) {
  /* Header */
  .nlinks,
  #nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 10px !important;
  }
}
@media (min-width: 1250px) and (max-width: 1300px) {
  /* Header */
  .nlinks,
  #nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 11.4px !important;
  }
}
@media (min-width: 1300px) and (max-width: 1350px) {
  /* Header */
  .nlinks,
  #nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 11px !important;
  }
}
@media (min-width: 1350px) and (max-width: 1400px) {
  /* Header */
  .nlinks,
  #nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 12.4px !important;
  }
}
@media (min-width: 1400px) and (max-width: 1500px) {
  v  /* Header */
  .nlinks,#nav .nlinks {
    gap: 26px !important;
  }
  .nlinks a {
    font-size: 14px !important;
  }
}
