/* ========================= HEADER TWEAKS (unchanged) ========================= */ .fewclients p { text-align: right !important; white-space: nowrap !important; text-wrap: nowrap; !important;} .ravenheronew img { max-width: 150px !important; height: auto !important;} .headergroup { padding-left: 10% !important; } .work-item .work-text-col-group { padding-top: -1vw !important; padding-left: 3vw !important; padding-right: 3vw !important; } @media (max-width: 1200px) { .ravenheronew img { max-width: 80px !important; height: auto !important; margin-top: 2vw !important; } } @media (max-width: 768px) { .few-clients{ padding-top: 6vh !important; padding-right: 0 !important; margin-right: 0 !important; align-items: left !important; text-align: left !important;} .headergroup { padding-top: 5vh !important; padding-left: 5vh !important; padding-right: 5vh !important; padding-bottom: 5vh !important; } .help-icon img { max-width: 40px !important; height: auto !important; margin-top: 5px !important;} } /* Keep THESE broad because this is what actually works on your build */ .work-item .work-img-col { order: 1 !important; } .work-item .work-text-col { order: 2 !important; } .work-item .work-text-col { margin-top: -20px !important; } .work-item p, .work-item h3, .work-item h2 { text-align: left !important; } } /* ========================= WORK ITEMS ========================= */ /* TABLET ONLY: keep default sizing, just CENTER the image block */ @media (min-width: 768px) and (max-width: 1200px) { .work-item .selectedwork-hero, .work-item .selectedwork-hero figure { margin-left: auto !important; margin-right: auto !important; } .work-item .selectedwork-hero img { display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: 80% !important; /* tiny safety */ height: auto !important; } } /* MOBILE ONLY: full-width (viewport) layout + stacking */ @media (max-width: 600px) { .work-item .wp-block-columns { flex-wrap: wrap !important; } .work-item .wp-block-columns > .wp-block-column { flex: 0 0 100% !important; width: 80% !important; min-width: 0 !important; } .work-item { margin-left: -12vw !important; margin-right: -12vw !important; padding-left: 6vw !important; padding-right: 6vw !important; box-sizing: border-box !important; overflow-x: clip; /* optional safety (can remove if you want) */ } .ravenheronew img { max-width: 100px !important; height: auto !important;} } /* ========================================= HELP COLUMNS (help-columns) - Tablet: 2x2 grid - Mobile: stacked (WordPress setting) - Accordion titles centered + consistent ========================================= */ /* --- TABLET (2 x 2 grid) --- */ @media (max-width: 1200px) { .wp-block-columns.help-columns { flex-wrap: wrap !important; gap: 16px !important; margin-left: 0 !important; margin-right: 0 !important; } .wp-block-columns.help-columns > .wp-block-column { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; } } /* --- MOBILE (icon sizing + nudge) --- */ @media (max-width: 767px) { /* If your icon images have class "help-icon" (either on figure or img) */ .help-columns .help-icon img, .help-columns img.help-icon { width: clamp(56px, 18vw, 80px) !important; height: auto !important; max-width: none !important; } /* nudge the icon upward a bit */ .help-columns .help-icon, .help-columns img.help-icon { margin-top: -20px !important; /* tweak: -6px to -16px */ margin-bottom: -6px !important; /* keeps spacing nice */ } } /* optional: little “+ / –” indicator */ .help-columns .help-acc__title::after { content: "+"; float: right; opacity: 0.7; } .help-columns .help-acc[open] .help-acc__title::after { content: "–"; } /* ========================= HELP COLUMNS — mobile width (2/3 screen) ========================= */ @media (max-width: 767px){ /* Each column/card becomes narrower + centered */ .help-columns > .wp-block-column{ width: min(66vw, 420px) !important; /* ~2/3 of screen, capped */ flex: 0 0 auto !important; margin-left: auto !important; margin-right: auto !important; } /* If your theme forces 100% width somewhere, this helps */ .help-columns{ justify-content: center !important; } /* Make sure the clickable “button” and the dropdown content follow the new card width (no overflow) */ .help-columns details.help-acc, .help-columns details.help-acc > .help-acc__content, .help-columns details.help-acc > summary{ max-width: 100% !important; line-height: 1.2 !important; } } @media (max-width:1200px) {.help-item-header {margin-top: 5px !important; }} /* ========================= METASLIDER #683 – force real height on desktop ========================= */ @media (min-width: 1024px) { #metaslider_container_683, #metaslider_container_683 .metaslider, #metaslider_container_683 .flexslider, #metaslider_container_683 .flex-viewport, #metaslider_container_683 .slides { height: 1000px !important; max-height: 1000px !important; } /* Keep images inside the 500px frame */ #metaslider_container_683 .slides img { height: 1000px !important; width: 100% !important; object-fit: contain !important; /* use "cover" if you prefer cropping */ } } /* Mobile: don’t force a hard height */ @media (max-width: 1023px) { #metaslider_container_683, #metaslider_container_683 .flexslider, #metaslider_container_683 .flex-viewport, #metaslider_container_683 .slides { height: auto !important; max-height: none !important; } #metaslider_container_683 .slides img { height: auto !important; max-height: 70vh !important; width: 100% !important; object-fit: contain !important; } } /* HELP ACCORDION (plugin-free) */ .help-columns .help-acc { border: 0; margin: 0; padding: 0; } /* clickable title pill */ .help-columns .help-acc__title { list-style: none; /* removes default marker in some browsers */ cursor: pointer; user-select: none; box-shadow: -1px 2px #033d4f; display: block; text-align: center; margin-top: 10px; padding: 12px 5px; border: 2px solid #f8f1e4; border-radius: 10px; /* your colors */ background: rgba(255,255,255,0.12); } .help-acc__title { font-weight: 400; } /* remove the default disclosure marker */ .help-columns .help-acc__title::-webkit-details-marker { display: none; } .help-columns .help-acc__title::marker { content: ""; } /* body text */ .help-columns .help-acc__body { text-align: center; padding: 12px 14px; border: none; border-radius: 10px; background: rgba(255,255,255,0.08); }