/* Global presentation-safe responsive layer */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, iframe, canvas {
  max-width: 100%;
}
table {
  max-width: 100%;
}
.content-wrapper {
  overflow-x: hidden;
}

/* Laptop / projector (presentation) */
@media (max-width: 1400px) and (min-width: 992px) {
  .logo { width: 120px !important; margin-left: 8px !important; }
  .Threebuttons .nav-link {
    font-size: 13px !important;
    padding: 8px 8px !important;
  }
}

@media (max-width: 1200px) and (min-width: 992px) {
  .logo { width: 110px !important; }
  .Threebuttons .nav-link {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
}

/* Tablet + phone shared */
@media (max-width: 991.98px) {
  .content-wrapper { margin-top: 70px; }

  .Header_Top_Heading {
    font-size: 24px !important;
    padding: 24px 12px !important;
    line-height: 1.3 !important;
  }

  .EmployTestContainer,
  .jobcontainerNew {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .search-input { width: 100% !important; max-width: 100%; }
  .search-container { padding: 12px !important; }

  .advantagesection {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .advantagesection .adsection,
  .advantagesection .col-sm-2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 10px !important;
    text-align: center;
  }
  .circletext {
    font-size: 13px !important;
    width: auto !important;
    line-height: 1.35 !important;
    padding: 8px 6px 0 !important;
  }
  .circle, .adImage {
    margin: 0 auto;
  }

  .imageone .imagefirst,
  .imageone .imageThird,
  .imageone .imagesecond {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    overflow: hidden;
  }
  .imageone img {
    width: 100% !important;
    height: auto !important;
  }
  .learn-more-second,
  .learn-more-third,
  .imageone .a-button--primary {
    width: auto !important;
    min-width: 120px;
    font-size: 13px !important;
    padding: 10px 16px !important;
    left: 50% !important;
    transform: translateX(-50%);
  }

  .homepage-hero__heading {
    font-size: 28px !important;
    margin-top: 24px !important;
    padding: 16px 16px 0 !important;
    line-height: 1.25 !important;
  }
  .homepage-hero__description {
    font-size: 14px !important;
    padding: 8px 16px 16px !important;
    line-height: 1.5 !important;
  }
  .homepage-hero-cards__content {
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 12px 16px !important;
  }
  .homepage-hero-cards__card,
  .homepage-hero-cards__card.new-line {
    max-width: 100% !important;
    width: 100% !important;
    margin: 6px 0 !important;
  }
  .homepage-hero-cards__card .homepage-hero-cards__card-link {
    font-size: 14px !important;
    height: auto !important;
    padding: 12px !important;
  }
  .a-button--primary {
    font-size: 14px !important;
    padding: 10px 18px !important;
  }

  #roles-container {
    display: block !important;
  }
  #roles-container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .new-Container-emp {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .skills-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 0 12px 0 !important;
  }
  #roles-container .skills-card .role-image,
  .skills-card img.role-image {
    height: 160px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .skills-card-content {
    height: auto !important;
    padding: 10px 8px 12px !important;
  }
  .skills-card-title {
    height: auto !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 8px 0 6px !important;
  }
  .skills-card-description {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .skills-card .details {
    position: static !important;
    padding: 0 !important;
  }
  .skills-card-rating {
    display: flex !important;
    position: static !important;
    font-size: 13px !important;
  }
  .skill-card-rating--inside,
  .skills-card-details {
    font-size: 13px !important;
  }

  .counselling-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin-bottom: 16px;
  }
  .counselling-title { font-size: 18px !important; }
  .counselling-description { font-size: 14px !important; }
  .counselling-read-more { font-size: 14px !important; }

  /* Do not let global modal-body:contents break dialogs */
  .modal .modal-body {
    display: block !important;
  }
  .auth-container {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  .login-container,
  .modal-SignUp,
  #loginModel .modal-body > div,
  #registerModel .modal-body > div {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
  }
  .offcanvas { max-width: 86% !important; }

  #footerContainer .row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .footerBottomClass {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
  }
  .firstcontainer,
  .secondcontainer,
  .Thirdcontainer,
  #footerContainer [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 16px !important;
    border: none !important;
    float: none !important;
  }
  .firstcontainer {
    padding-left: 16px !important;
  }
  .aboutmiddle,
  .impofooter,
  .Footercontact,
  .aboutaddress {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .textunderline { margin-bottom: 8px !important; }
  .searchfooter,
  #footerContainer .searchfooter,
  .form.searchfooter {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    height: auto !important;
    width: 100% !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }
  #txtEmail_footer { width: 100% !important; max-width: 100% !important; }
  #btn_subscribefooter {
    margin-left: 0 !important;
    width: 100% !important;
    display: block !important;
  }
}

@media (max-width: 575.98px) {
  .advantagesection .adsection,
  .advantagesection .col-sm-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .homepage-hero__heading { font-size: 22px !important; }
  .ncvet-title { font-size: 22px !important; }
  #cleveratti-clients h1 { font-size: 26px !important; }
}

/* NCVET / products / partners */
@media (max-width: 991.98px) {
  .ncvet-section { padding: 48px 12px !important; }
  .ncvet-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  .ncvet-subtitle { font-size: 14px !important; padding: 0 8px; }
  .stat-highlight-card { padding: 16px !important; }
  .sector-group-card { margin-bottom: 12px; }

  #product-slider .products-container {
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }
  #product-slider .our-products h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  #product-slider .our-products p { font-size: 14px !important; }
  #product-slider .carousel-item h3 { font-size: 18px !important; }
  #product-slider .carousel-item ul li { font-size: 14px !important; }
  #product-slider .carousel-inner { min-height: 0 !important; height: auto !important; }
  #product-slider .carousel-indicators [data-bs-target] {
    width: 36px !important;
    height: 8px !important;
  }
  #product-slider .products-container .right-container {
    margin-top: 24px !important;
  }
  #product-slider .form-content h4 { font-size: 20px !important; }

  #cleveratti-clients {
    padding: 32px 12px 48px !important;
  }
  #cleveratti-clients h1 {
    font-size: 28px !important;
    padding-bottom: 24px !important;
    line-height: 1.2 !important;
  }
  #cleveratti-clients .client-logo {
    height: 110px !important;
    margin: 0 6px 8px !important;
  }
}

/* Sample questions / gallery / product banners */
@media (max-width: 767.98px) {
  .sq-banner { padding: 72px 16px 28px !important; }
  .sq-banner h1 { font-size: 22px !important; }
  .sq-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .sq-container { width: 100% !important; max-width: 100% !important; }
  .sq-table {
    display: table !important;
    width: 100% !important;
    table-layout: auto;
  }
  .sq-table thead { display: table-header-group; }
  .sq-table tbody { display: table-row-group; }
  .sq-table tr { display: table-row; }
  .sq-table th, .sq-table td {
    display: table-cell;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  #pdfModal .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
  .pdf-viewer-container { max-height: 60vh !important; }

  #gallery-hero { padding: 100px 16px 48px !important; }
  .gallery-hero-title { font-size: 32px !important; }
  .gallery-stats-inner { flex-wrap: wrap; }
  .gallery-stat-item { flex: 1 1 50%; border-right: none !important; }

  .assess-platform-bg,
  .learning-platform-bg,
  .elearn-platform-bg,
  .career-platform-bg {
    height: auto !important;
    min-height: 220px;
  }
  .assess-platform-bg h1,
  .learning-platform-bg h1,
  .elearn-platform-bg h1,
  .career-platform-bg h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    padding: 90px 16px 32px !important;
  }

  [id^="feature-"] .container,
  [id^="learning-feature-"] .container {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  [id^="feature-"] .ai-image img,
  [id^="learning-feature-"] img,
  .ai-image img,
  .ol-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [id^="feature-"] .ai-content,
  [id^="learning-feature-"] .ai-content {
    padding-top: 8px !important;
  }
  [id^="feature-"] .ai-content h1,
  [id^="learning-feature-"] h1,
  .about-assessment-platform h1,
  #career-tool .about-tool h1,
  #learn-page-about h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .about-assessment-platform,
  #career-tool,
  #learn-page-about {
    padding: 28px 12px 40px !important;
  }
  .about-assessment-platform p,
  #career-tool .about-tool p,
  #learn-page-about p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 575.98px) {
  .gallery-stat-item { flex: 1 1 100%; }
}

/* Curation / counselling inner pages / about overlay */
@media (max-width: 991.98px) {
  .zoomed-image,
  .zoomed-image1 {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    display: block;
  }

  .container_new_study,
  .container_new {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .abouttext,
  .aboutsmall {
    left: 50% !important;
    width: 90% !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
  .abouttext { font-size: 28px !important; top: 42% !important; }
  .aboutsmall { font-size: 15px !important; top: 58% !important; }
  .our_about_text,
  .our_about_text p {
    text-align: left !important;
  }

  .gallery-orb {
    max-width: 70vw;
    max-height: 70vw;
  }
}