/* Responsive layout and keyboard controls. */
body, html { padding: 0; }
body { font-family: "Poppins", sans-serif; }
main { display: block; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #007c80; outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10000; background: white; color: #007c80; padding: 1rem; }
.skip-link:focus { top: 1rem; }
.menu-toggle { display: none; }
.mecs-button { display: inline-block; box-sizing: border-box; width: 14rem; max-width: 100%; padding: 1rem 2rem; margin-top: 1rem; border-radius: 10px; background: #007c80; color: white; font-size: 1rem; text-align: center; }
.mecs-button:hover, .mecs-button:focus { color: white; background: #00686c; }
.carousel-toggle { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2; width: auto; margin: 0; padding: .55rem .8rem; background: white; color: #00686c; font-size: .8rem; border-radius: 6px; }
.homeCarousel .carousel-indicators .circle { flex: 0 0 1rem; }
.homePageCoreValues .values { flex-wrap: wrap; align-items: start; }
.homePageCoreValues .values .value { box-sizing: border-box; flex: 1 1 180px; min-width: 0; }
.homePageCoreValues .values .value img { width: 100%; max-width: 160px; height: auto; }
.homePageSectors .sectors { align-items: start; gap: 2rem; }
.homePageSectors .sectors .sector { width: calc((100% - 4rem) / 3); margin: 0; }
.homePageSectors .sectors .sector img { height: auto; }
@media (min-width: 1001px) and (max-width: 1200px) {
  .headerInfo { margin-left: 2rem; margin-right: 2rem; }
  .headerInfo .header-nav nav ul { padding: 0; }
  .headerInfo .header-nav nav ul li { margin: .5rem; }
  .headerInfo .header-nav nav ul li a { font-size: 1rem; }
  .ourTeam .experiancedStaff .ourteam-content, .ourTeam .wellTrainedWorkers .ourteam-content { flex-direction: column; align-items: start; }
  .ourTeam .experiancedStaff img, .ourTeam .wellTrainedWorkers img { width: 100%; max-width: 600px; height: auto; margin: 0; }
}
/* Keep the restored square announcement fully visible on phones and short screens. */
.depicter-6-display, #depicter-6 { --mecs-popup-size: min(600px, calc(100vw - 30px), calc(100svh - 100px)); }
#depicter-6 { width: var(--mecs-popup-size) !important; max-width: var(--mecs-popup-size) !important; height: var(--mecs-popup-size) !important; }
.depicter-6-display .depicter-content-wrap, .depicter-6-display .depicter-display-animation-wrap { width: var(--mecs-popup-size) !important; max-width: var(--mecs-popup-size) !important; }
#depicter-6 .depicter-layer-frame { transform: none !important; }
#depicter-6 .depicter-view, #depicter-6 .depicter-section, #depicter-6 .depicter-layers-wrapper, #depicter-6 .depicter-layer-frame, #depicter-6 picture { width: var(--mecs-popup-size) !important; height: var(--mecs-popup-size) !important; }
#depicter-6 picture img { width: 100% !important; height: 100% !important; object-fit: contain; }
.depicter-6-display .mecs-announcement-close { position: absolute; top: 12px; right: 15px; z-index: 1001; pointer-events: auto; width: auto; margin: 0; padding: .7rem 1rem; background: white; color: #00686c; border: 2px solid #00686c; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.depicter-6-display:not(.depicter-status-open) .mecs-announcement-close { display: none; }
.depicter-6-display.depicter-status-before-close { display: none; }
@media (prefers-reduced-motion: reduce) { .homeCarousel .carouselSlide, button, .service { transition: none !important; } }
@media (max-width: 1000px) {
  h1, .welcome h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
  h3 { font-size: clamp(1.25rem, 4vw, 1.65rem); }
  p, .ourstory .mainText p { font-size: 1rem; line-height: 1.7; }
  header, header.absolute-header, header.absolute-header:hover { position: relative; width: 100%; background: white; background-image: none; }
  .headerInfo { margin: 0 1.25rem; padding: .75rem 0; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  header .headerInfo .headerLogo1, header.absolute-header .headerInfo .headerLogo1, header.absolute-header:hover .headerInfo .headerLogo1 { display: none; }
  header .headerInfo .headerLogo2, header.absolute-header .headerInfo .headerLogo2, header.absolute-header:hover .headerInfo .headerLogo2 { display: block; }
  .headerInfo .headerLogo2 a { display: block; padding: 0; }
  .headerInfo .headerLogo2 a img { display: block; width: 10rem; max-width: 100%; height: auto; }
  .menu-ready .menu-toggle { display: inline-flex; align-items: center; gap: .5rem; width: auto; padding: .65rem .8rem; margin: 0; color: white; background: #007c80; font-size: .9rem; border-radius: 6px; }
  .menu-toggle-icon { color: white; font-size: 1.2rem; line-height: 1; }
  .menu-toggle span { color: inherit; }
  .header-nav { flex-basis: 100%; width: 100%; }
  .menu-ready .header-nav:not(.is-open) { display: none; }
  .headerInfo .header-nav nav ul { margin: .5rem 0 0; padding: .5rem 0; align-items: stretch; border-top: 1px solid #ddd; }
  .headerInfo .header-nav nav ul li { margin: 0; }
  .headerInfo .header-nav nav ul li a, header.absolute-header .headerInfo .header-nav nav ul li a { display: block; padding: .75rem .5rem; font-size: 1rem; text-align: left; color: #143338; }
  .homeCarousel { height: calc(100svh - 105px); min-height: 580px; max-height: 820px; }
  .homeCarousel .carouselSlide img { width: 100%; height: 100%; object-position: center; }
  .homeCarousel .carouselSlide .textbox { box-sizing: border-box; left: 1.25rem; right: 1.25rem; bottom: 5rem; width: auto; max-width: 40rem; padding: 1.25rem; background: rgba(255,255,255,.88); }
  .homeCarousel .carouselSlide .textbox h2 { margin-top: 0; font-size: clamp(1.5rem, 5vw, 2rem); }
  .homeCarousel .carouselSlide .textbox button, .homeCarousel .mecs-button { max-width: 100%; padding: .65rem 1rem; }
  .homeCarousel .carousel-indicators { width: 100%; bottom: 1rem; padding-right: 7rem; box-sizing: border-box; }
  .infobanner, .titleWithText, .homePageServiceBanner, .homePageCoreValues, .homePageSectors, .ProductBanner, .productAndServiceCard, .authorizedDistributors .info, .ourTeam, .contactUsDiv .infoBanner, .contactUsDiv .contactUsTitle, .contactUsDiv .map, .subpage .titleWithText, .productsContainer .productsInfo, .productsContainer .whyChoose .content, .productsContainer .partner, .ourstory .mainText, .SourcingProduct { margin-left: 1.25rem; margin-right: 1.25rem; }
  .infobanner, .homePageServiceBanner, .ProductBanner { margin-top: 2.5rem; margin-bottom: 2.5rem; }
  .homePageServiceBanner .services, .ProductBanner .services { height: auto; overflow: visible; gap: 1.25rem; align-items: stretch; }
  .homePageServiceBanner .services a, .ProductBanner .services a { width: 100%; max-width: 100%; }
  .homePageServiceBanner .services a img, .ProductBanner .services a img { height: 320px; min-height: 0; }
  .homePageServiceBanner .services a .text, .ProductBanner .services a .text { background: rgba(0,85,89,.86); }
  .homePageServiceBanner .services a .text p, .ProductBanner .services a .text p { font-size: 1rem; }
  .homePageCoreValues .values { align-items: stretch; gap: 1rem; }
  .homePageCoreValues .values .value { box-sizing: border-box; flex: 1 1 42%; min-width: 0; padding: .5rem; }
  .homePageCoreValues .values .value img { width: 100%; height: auto; margin: .5rem 0; }
  .homePageSectors { margin-bottom: 3rem; }
  .homePageSectors .sectors { gap: 1rem; }
  .homePageSectors .sectors .sector { width: calc(50% - .5rem); margin: 0; }
  .homePageSectors .sectors .sector img { height: auto; margin: 0; }
  .homePageSectors .sector h4, .homePageCoreValues .value h4 { font-size: clamp(.85rem, 3.5vw, 1.15rem); overflow-wrap: anywhere; }
  .newsAndUpdates { flex-direction: column; height: auto; margin-bottom: 3rem; }
  .newsAndUpdates img { width: 100%; height: 300px; }
  .newsAndUpdates .text { width: 100%; padding: 1.5rem 1.25rem; box-sizing: border-box; }
  .newsAndUpdates .text .news { width: 100%; }
  .newsAndUpdates .text .news h2 { color: #00595d; }
  .productAndServiceCard { height: auto; flex-direction: column; margin-top: 2rem; margin-bottom: 2rem; }
  .productAndServiceCard .img img { width: 100%; height: auto; max-height: 420px; }
  .authorizedDistributors { margin: 3rem 0; padding: 1.5rem 0; }
  .authorizedDistributors .info .logoContainer { gap: 1rem; }
  .authorizedDistributors .info .logoContainer .companyLogo { width: calc(50% - .5rem); }
  .homepagebanner, .ourstory .homepagebanner { height: auto; overflow: visible; margin-bottom: 2.5rem; }
  .homepagebanner img, .ourstory .homepagebanner img { width: 100%; height: 320px; }
  .homepagebanner .textbox, .ourstory .homepagebanner .textbox { position: relative; left: auto; bottom: auto; width: auto; margin: -3rem 1.25rem 0; padding: 1.25rem; box-sizing: border-box; }
  .aboutUsBanner { height: 430px; margin-bottom: 2.5rem; }
  .aboutUsBanner img { width: 100%; height: 100%; }
  .aboutUsBanner .info { left: 1.25rem; right: 1.25rem; bottom: 2rem; width: auto; }
  .aboutUsBanner .info h1, .aboutUsBanner .info h3 { width: 100%; text-shadow: 0 1px 5px #000; }
  .ourVision, .ourVision .text { height: auto; }
  .ourVision { margin-top: 2.5rem; padding: 2rem 0; }
  .ourVision .text { width: auto; margin: 0 1.25rem; }
  .ourMission { height: auto; min-height: 400px; padding: 2rem 1.25rem; box-sizing: border-box; }
  .ourMission img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ourMission .text { position: relative; width: auto; height: auto; padding: 0; margin: 0; }
  .ourMission .text h2 { margin: 0 0 1.25rem; }
  .bossImg { flex-direction: column; height: auto; margin: 2.5rem 0; }
  .bossImg img { width: 100%; height: 340px; object-position: center; }
  .bossImg .text { width: 100%; height: auto; padding: 2rem 1.25rem; box-sizing: border-box; }
  .bossImg .text h2 { width: 100%; font-size: 1.5rem; }
  .ourTeam .experiancedStaff .ourteam-content, .ourTeam .wellTrainedWorkers .ourteam-content { flex-direction: column; align-items: start; }
  .ourTeam .experiancedStaff img, .ourTeam .wellTrainedWorkers img { width: 100%; height: auto; margin: 0; }
  .ourTeam .experiancedStaff li, .ourTeam .wellTrainedWorkers li { font-size: 1rem; }
  .contactUsDiv .map { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .contactUsDiv .map p { display: block; margin: 0; }
  .contactUsDiv .map iframe { width: 100%; height: 350px; }
  .contactUsEndText, .productsContainer .contactUs { margin: 2.5rem 0; padding: 1.25rem; text-align: left; }
  .contactUsEndText h2, .productsContainer .contactUs h3 { margin: 0; font-size: 1.4rem; }
  .subpage, .ourstory { margin-bottom: 3rem; }
  .faq { margin: 2rem 1.25rem; }
  .faq .faqContainer { width: 100%; box-sizing: border-box; padding: 1.25rem; }
  .mecsProducts, .productsContainer .productsInfo .product { height: auto; }
  .productsContainer .productsInfo .product { flex-direction: column; align-items: stretch; gap: 1.5rem; margin: 2.5rem 0; }
  .productsContainer .productsInfo .product img { width: 100%; height: auto; max-height: 400px; object-fit: contain; }
  .productsContainer .productsInfo .product .productText { width: 100%; height: auto; padding: 0; }
  .productsContainer .whyChoose .content p { font-size: 1rem; }
  .SourcingProduct ul { padding: 0; gap: 1rem; }
  .SourcingProduct ul li { width: calc(50% - .5rem); margin: 0; }
  .SourcingProduct ul li img { width: 100%; max-width: 100%; height: auto; }
  footer { width: 100%; display: block; margin: 3rem 0 0; }
  footer .menu-container { box-sizing: border-box; width: auto; margin: 0 1.25rem; gap: 2rem; align-items: stretch; }
  footer .menu-container .logo { margin: 0; height: 100px; }
  footer .menu-container .logo a { width: 220px; height: 100px; font-size: 0; }
  footer .menu-container .logo a::before { width: 220px; height: 100px; top: 0; transform: none; background-image: url("https://mecslaos.com/wp-content/uploads/2024/07/image-68.png"); }
  footer .menu-container .links { flex-direction: column; gap: 2rem; }
  footer .menu-container .links .quickAndSocial, footer .menu-container .links .contact { margin: 0; }
  footer .menu-container .links .quickAndSocial h3, footer .menu-container .links .contact h3 { font-size: 1.35rem; }
  footer .menu-container .links .quickAndSocial a, footer .menu-container .links .contact a { font-size: 1rem; overflow-wrap: anywhere; }
  footer .menu-container .links .quickAndSocial .socials { margin: 1.25rem 0 0; }
  footer .menu-container .links .quickAndSocial .socials ul li a, footer .menu-container .links .quickAndSocial .socials ul li a::before { width: 2.75rem; height: 2.75rem; }
  footer .rights { margin: 2.5rem 1.25rem 1.25rem; }
  footer .rights h5 { font-size: .8rem; text-align: center; }
}