/*
		Welcome to Custom CSS!

		To learn how this works, see https://wp.me/PEmnE-Bt
		*/
		img.site-logo.attachment-maisha-logo {
			max-width: 100px;
		}

		.page .cd-fixed-bg-one {
			display: none;
		}

		.page-template-default .default-page .site-content {
			padding-top: 0;
		}

		.wp-block-button__link {
			background-color: #3397D6;
		}

		.footer {
			background-color: #007DCC;
		}

		.footer a {
			color: white;
		}

		.social-navigation {
			background-color: #007DCC;
		}

		.page-template-default {
			padding-bottom: 0px;
		}

		.copyright {
			border-top-width: 0px;
		}

		.one-widget {
			width: 150px;
		}

		.wp-block-table td {
			font-size: 14px;
		}

		.footer input.search-field {
			background: white;
			border: 1px solid #000;
		}

		.footer a,
		.footer .widget {
			color: white;
		}

		.wp-block-table {
			margin: 0 0 1em;
			overflow-x: auto;
			font-size: 75%;
		}

		div {
			word-wrap: normal !important;
			-moz-hyphens: none !important;
			-ms-hyphens: none !important;
			-webkit-hyphens: none !important;
			hyphens: none !important;
		}

		/* Remove the divider lines in footer widget links */
		.site-footer a,
		.site-footer li,
		.site-footer .widget a {
			border: none !important;
			text-decoration: none !important;
			box-shadow: none !important;
		}

		/* =========================================================
			 CONTACT PAGE STYLES (cards + map + form)
			 ========================================================= */

		/* Map wrapper */
		.contact-map-wrap {
			border-radius: 16px;
			overflow: hidden;
			box-shadow:
				0 12px 30px rgba(0, 0, 0, 0.06),
				0 4px 12px rgba(0, 0, 0, 0.04);
		}

		.contact-map-wrap .wp-block-jetpack-map {
			border: 1px solid #e5e7eb;
			border-radius: 16px;
			overflow: hidden;
		}

		/* Cards (info + form) */
		.contact-card {
			background: #ffffff;
			border: 1px solid #f0f0f0;
			border-radius: 16px;
			padding: 26px;
			box-shadow:
				0 10px 25px rgba(0, 0, 0, 0.05),
				0 4px 10px rgba(0, 0, 0, 0.03);
			width: 100%;
		}

		/* Bottom layout */
		.contact-bottom {
			display: flex;
			align-items: stretch;
			gap: 32px;
		}

		.contact-bottom > .wp-block-column {
			display: flex;
		}

		/* Make cards fill equal height */
		.contact-card {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		/* Remove the gray background inside Jetpack form */
		.contact-form .wp-block-jetpack-contact-form {
			background: transparent !important;
			padding: 0 !important;
			border: 0 !important;
			box-shadow: none !important;
		}

		/* Inputs – clean */
		.wp-block-jetpack-contact-form input,
		.wp-block-jetpack-contact-form textarea {
			border: 1px solid #e5e5e5;
			border-radius: 10px;
			padding: 12px 14px !important;
			background: #ffffff;
		}

		.wp-block-jetpack-contact-form textarea {
			min-height: 160px;
		}

		/* Input focus */
		.wp-block-jetpack-contact-form input:focus,
		.wp-block-jetpack-contact-form textarea:focus {
			outline: none;
			border-color: #cfcfcf;
			box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
		}

		/* Button */
		.wp-block-jetpack-contact-form button,
		.wp-block-jetpack-contact-form input[type="submit"] {
			background: #2f3437;
			color: #ffffff;
			border-radius: 10px !important;
			padding: 12px 28px !important;
			border: none !important;
		}

		.wp-block-jetpack-contact-form button:hover,
		.wp-block-jetpack-contact-form input[type="submit"]:hover {
			background: #1f2427;
		}

		/* Mobile stacking */
		@media (max-width: 900px) {
			.contact-bottom {
				flex-direction: column;
				gap: 18px;
			}
			.contact-map-wrap,
			.contact-map-wrap .wp-block-jetpack-map {
				border-radius: 14px;
			}
		}

		/* =========================================================
			 HOMEPAGE ONLY (Page ID: 11900) — bottom space fixes
			 NOTE: This is scoped so it won't affect other pages.
			 ========================================================= */

		body.page-id-11900 .site-content,
		body.page-id-11900 .content-area,
		body.page-id-11900 .site-main,
		body.page-id-11900 .entry-content {
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;
		}

		/* Remove bottom margin from the last block */
		body.page-id-11900 .site-main > *:last-child,
		body.page-id-11900 .entry-content > *:last-child {
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;
		}

		/* If the last block is an empty paragraph or spacer */
		body.page-id-11900 .entry-content p:empty {
			display: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}

		body.page-id-11900 .site-main > .wp-block-spacer:last-child,
		body.page-id-11900 .entry-content > .wp-block-spacer:last-child {
			display: none !important;
			height: 0 !important;
			margin: 0 !important;
			padding: 0 !important;
		}

		/* Footer snug (homepage only) */
		body.page-id-11900 .site-footer,
		body.page-id-11900 footer {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
		}

		/* Kill potential pseudo-elements adding space */
		body.page-id-11900::after,
		body.page-id-11900 .site::after,
		body.page-id-11900 .site-content::after,
		body.page-id-11900 .entry-content::after {
			content: none !important;
			display: none !important;
			height: 0 !important;
		}

		/* =========================================
			 REMOVE GAP ONLY ON HOMEPAGE
			 ========================================= */

		/* Remove bottom padding of page content (homepage only) */
		.home .wp-site-blocks {
				padding-bottom: 0 !important;
				margin-bottom: 0 !important;
		}

		/* Make sure last hero has no space */
		.home .wp-block-coblocks-hero {
				margin-bottom: 0 !important;
				padding-bottom: 0 !important;
		}

		/* Prevent footer from being pushed down */
		.home footer {
				margin-top: 0 !important;
		}

/* =========================================================
   RESPONSIVE / MOBILE ADD-ONS (append-only)
   Works for iPhone + Android + Tablets
   ========================================================= */

/* 0) General mobile safety */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make media scale properly */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Avoid iOS zoom on form fields */
input, textarea, select {
  font-size: 16px;
}

/* Tables: allow horizontal scroll without breaking layout */
.wp-block-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 1) Header / Logo scaling */
@media (max-width: 768px) {
  img.site-logo.attachment-maisha-logo {
    max-width: 80px;
  }
}

/* 2) Footer widgets: prevent weird wrapping / too tight spacing */
@media (max-width: 768px) {
  .one-widget {
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer,
  .site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer a,
  .footer .widget {
    word-break: break-word;
  }
}

/* 3) Buttons: tap-friendly sizing (phone friendly) */
@media (max-width: 768px) {
  .wp-block-button__link,
  .wp-block-jetpack-contact-form button,
  .wp-block-jetpack-contact-form input[type="submit"] {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px !important;
    border-radius: 12px !important;
  }
}
/* FIX: Allow HERO buttons to align properly (override width:100%) */
@media (max-width: 768px) {
  body.home .wp-block-cover .wp-block-button__link {
    width: auto !important;
    display: inline-block !important;
  }
}


/* 4) Contact page: improve stacking & spacing on small phones */
@media (max-width: 480px) {
  .contact-card {
    padding: 18px;
    border-radius: 14px;
  }

  .contact-bottom {
    gap: 14px;
  }

  .wp-block-jetpack-contact-form textarea {
    min-height: 140px;
  }
}

/* 5) WordPress Columns (common issue): force stack on mobile */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* 6) Fix common “side scrolling” culprits (long words/urls) */
@media (max-width: 768px) {
  .entry-content * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 7) Homepage gap rules stay as-is; ensure no extra bottom space on mobile */
@media (max-width: 768px) {
  body.page-id-11900 .site-content,
  body.page-id-11900 .content-area,
  body.page-id-11900 .site-main,
  body.page-id-11900 .entry-content,
  .home .wp-site-blocks,
  .home .wp-block-coblocks-hero,
  .home footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ===============================
   MOBILE: "Zoom out" HERO image
   (targets only this CoBlocks hero)
   =============================== */
@media (max-width: 768px) {
  .coblocks-hero-37224033544 .wp-block-coblocks-hero__inner {
    background-size: contain !important;  /* shows more image = zoom out */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;   /* prevents ugly blank edges */
    min-height: 520px !important;        /* adjust if needed */
  }

  /* Optional: make text fit nicer on small screens */
  .coblocks-hero-37224033544 .wp-block-coblocks-hero__content {
    max-width: 90% !important;
  }
}

/* HOMEPAGE: remove ONLY the very last spacer (usually the unwanted one) */
body.page-id-11900 .entry-content > .wp-block-spacer:last-child {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

body.home article {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Some themes add clearfix spacing inside entry-content */
body.home .entry-content::after {
  content: none !important;
  display: none !important;
}

/* Remove any bottom spacing from main content wrappers */
body.home .site-content,
body.home #primary,
body.home main,
body.home .content-area {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure hero doesn't add extra spacing */
body.home .wp-block-coblocks-hero {
  margin-bottom: 0 !important;
}

/* HOMEPAGE ONLY - keep your intended section gaps */
body.home .home-gap-before-categories,
body.home .home-partners-gap,
body.home .home-section-gap,
body.home .home-cover-spacer {
  display: block !important;
}

/* Make categories list clean (no bullets) */
body.home .home-categories-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px 0;
}
body.home .home-categories-list li {
  margin: 6px 0;
}

/* ✅ Remove the UNWANTED gap right before the footer (common culprit: last spacer in content) */
body.home main .entry-content > .wp-block-spacer:last-child {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Also remove default article bottom spacing on homepage only */
body.home article {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* HERO TEXT ALIGNMENT FIX */
.wp-block-cover .wp-block-column {
  padding-right: 2vw; /* keeps text aligned with content below */
  box-sizing: border-box;
}

/* Limit paragraph width so it doesn't float */
.wp-block-cover p {
  max-width: 520px;
  margin-left: auto;
}

/* RIGHT MARGIN FOR HERO TEXT */
.wp-block-cover__inner-container {
  padding-right: 5vw;
}

/* FORCE WHITE TEXT ON BUTTONS */
.wp-block-button__link {
  color: #ffffff !important;
}

/* Ensure hover stays white */
.wp-block-button__link:hover {
  color: #ffffff !important;
}

/* Make the right column stretch so flex-end can reach the edge */
.wp-block-cover .wp-block-columns {
  width: 100%;
}

.wp-block-cover .wp-block-column:last-child {
  flex-basis: 100% !important;
}

/* Push button to the far right */
.wp-block-cover .wp-block-buttons {
  justify-content: flex-end !important;
  width: 100%;
  padding-right: 6vw;   /* ito yung “safe margin” */
  box-sizing: border-box;
}

/* Make buttons ALL CAPS and BOLD */
.wp-block-button__link {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px; /* optional, mas malinis tingnan */
}

/* =========================================
   FINAL FIX: Align CATEGORIES with LOGOS
   (homepage only, no side effects)
   ========================================= */

/* Lock the categories hero content to the same content line as logos */
body.home .coblocks-hero-37224033544 .wp-block-coblocks-hero__content {
  max-width: 1200px;          /* same visual width as logos section */
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(60px, 8vw, 140px);  /* pulls it inward */
  padding-right: 20px;
  box-sizing: border-box;
}

/* =========================================================
   FINAL HOMEPAGE HERO FIX
   - Align Categories with Logos
   - Match text balance with About Us
   - Fix oversized button
   ========================================================= */

/* Align Categories container with site content / logos */
body.home .coblocks-hero-37224033544 .wp-block-coblocks-hero__content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(60px, 8vw, 140px);
  padding-right: 20px;
  box-sizing: border-box;

  /* readability on image */
  background: rgba(255, 255, 255, 0.85);
  padding-top: 24px;
  padding-bottom: 24px;
  border-radius: 12px;
}

/* MATCH text size & width with About Us (top hero) */
body.home .coblocks-hero-37224033544 h2,
body.home .coblocks-hero-37224033544 p,
body.home .coblocks-hero-37224033544 li {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2933; /* darker text for light image */
}

/* Categories heading */
body.home .coblocks-hero-37224033544 h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Categories list spacing */
body.home .coblocks-hero-37224033544 li {
  font-weight: 500;
  margin-bottom: 8px;
}

/* Balance VIEW OUR PRODUCTS button (not overpowering) */
body.home .coblocks-hero-37224033544 .wp-block-button__link {
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Mobile safety */
@media (max-width: 768px) {
  body.home .coblocks-hero-37224033544 .wp-block-coblocks-hero__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* REMOVE white background from Categories box */
body.home .coblocks-hero-37224033544 .wp-block-coblocks-hero__content {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================
   HOMEPAGE – CATEGORIES READABILITY FIX
   ========================================================= */

/* Bigger & clearer heading */
body.home .coblocks-hero-37224033544 h2 {
  font-size: 28px;        /* bigger than before */
  font-weight: 600;
  margin-bottom: 16px;
  color: #1f2933;
}

/* Categories list – readable + bullets */
body.home .home-categories-list {
  list-style: disc;              /* bullet points */
  padding-left: 20px;            /* space for bullets */
  margin-bottom: 20px;
}

body.home .home-categories-list li {
  font-size: 17px;               /* slightly larger */
  line-height: 1.7;
  font-weight: 500;
  color: #1f2933;
  margin-bottom: 6px;
}

/* Keep button balanced (not overpowering text) */
body.home .coblocks-hero-37224033544 .wp-block-button__link {
  font-size: 14px;
  padding: 10px 22px;
}

/* FIX: remove the EXTRA circle (pseudo-element), keep the real radio */
.wp-block-jetpack-contact-form .wp-block-jetpack-options label::before,
.wp-block-jetpack-contact-form .wp-block-jetpack-options label::after,
.wp-block-jetpack-contact-form .wp-block-jetpack-options .wp-block-jetpack-option__label::before,
.wp-block-jetpack-contact-form .wp-block-jetpack-options .wp-block-jetpack-option__label::after {
  content: none !important;
  display: none !important;
}

/* Make sure real radio shows */
.wp-block-jetpack-contact-form .wp-block-jetpack-options input[type="radio"]{
  appearance: auto !important;
  -webkit-appearance: radio !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  opacity: 1 !important;
  margin-right: 10px;
}

/* Align nicely */
.wp-block-jetpack-contact-form .wp-block-jetpack-options label{
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

/* ALIGN radio + text directly under "Time" label */
.contact-card.contact-form .wp-block-jetpack-field-radio{
  padding-left: 0 !important;
}

/* Remove default list indent */
.contact-card.contact-form .wp-block-jetpack-options{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Each option aligned cleanly */
.contact-card.contact-form .wp-block-jetpack-options li{
  list-style: none !important;
  margin: 6px 0 !important;
  padding-left: 0 !important;
}

/* Radio + text in one straight line */
.contact-card.contact-form .wp-block-jetpack-options label{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure radio itself is not offset */
.contact-card.contact-form .wp-block-jetpack-options input[type="radio"]{
  margin: 0 !important;
}

/* FIXED SOCIAL SIDEBAR */
.social-navigation {
  position: fixed !important;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  background-color: #0075BA;
  border-radius: 18px;
  padding: 12px 10px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  width: auto;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Links / icons */
.social-navigation a {
  color: #ffffff !important;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

/* Hover */
.social-navigation a:hover {
  background: rgba(255,255,255,0.2);
}

/* FORCE PERFECT CENTERING INSIDE THE PILL */
.social-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* RESET UL */
.social-navigation ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* RESET LI */
.social-navigation li {
  margin: 0 !important;
  padding: 0 !important;
}

/* CENTER EACH ICON */
.social-navigation a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px;
  height: 36px;
  line-height: 1 !important;
}

/* FORCE Categories text to match "Founded 2002 / 23 Years" scale */
body.home .coblocks-hero-37224033544 h2{
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

body.home .coblocks-hero-37224033544 li{
  font-size: 22px !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
}

body.home .coblocks-hero-37224033544 p{
  font-size: 20px !important;
  line-height: 1.7 !important;
}

/* ================================
   HERO TEXT + BUTTON FINAL FIX
   ================================ */

/* Make VIEW OUR PRODUCTS same size as ABOUT US */
body.home .coblocks-hero-37224033544 .wp-block-button__link {
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}


/* Vertically center hero text */
.wp-block-cover__inner-container {
  display: flex !important;
  align-items: center !important;
}

/* Reduce spacing between category items */
body.home .home-categories-list {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

body.home .home-categories-list li {
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

/* Force single line for long category (desktop only) */
@media (min-width: 1024px) {
  body.home .home-categories-list li {
    white-space: nowrap;
  }
}

/* FORCE BIGGER VIEW OUR PRODUCTS BUTTON */
body.home .coblocks-hero-37224033544 .wp-block-button__link {
  font-size: 17px !important;
  padding: 14px 34px !important;
  min-height: 52px !important;

  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}

/* Sa first cover lang (usually top hero) */
body.home .wp-block-cover:first-of-type .wp-block-button__link {
  font-size: 18px !important;
  padding: 14px 34px !important;
  min-height: 52px !important;

  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}

/* =========================================================
   HOMEPAGE TOP HERO (1st COVER) — ABOUT US button right aligned
   NO OVERLAP FIX (sfafe + scoped)
   ========================================================= */

/* Positioning context */
body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container{
  position: relative !important;
  padding-bottom: 90px !important; /* reserve space so text won't hit the button */
}

/* Lock the button */
body.home .wp-block-cover:first-of-type .wp-block-button{
  position: absolute !important;
  right: 7vw !important;      /* adjust: 7vw–9vw */
  bottom: 41px !important;      /* lifts button up away from bottom */
  margin: 0 !important;
  z-index: 5 !important;
}

/* Keep button inline-flex, no weird sizing */
body.home .wp-block-cover:first-of-type .wp-block-button__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   BUTTON COLOR FIX
   APPLY TO ALL PAGES EXCEPT HOMEPAGE
   ========================================================= */

/* Force BLUE buttons everywhere EXCEPT HOME */
body:not(.home) .wp-block-button__link,
body:not(.home) .wp-element-button,
body:not(.home) a.button,
body:not(.home) button.button,
body:not(.home) input[type="submit"],
body:not(.home) button[type="submit"] {
  background-color: #3397D6 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Hover state */
body:not(.home) .wp-block-button__link:hover,
body:not(.home) .wp-element-button:hover,
body:not(.home) a.button:hover,
body:not(.home) button.button:hover,
body:not(.home) input[type="submit"]:hover,
body:not(.home) button[type="submit"]:hover {
  background-color: #2b86c5 !important;
  color: #ffffff !important;
}

/* =========================================================
   GLOBAL BUTTON COLOR
   Color ONLY — no sizing, no position, no layout changes
   ========================================================= */

/* Core Gutenberg buttons */
.wp-block-button__link,
.wp-element-button {
  background-color: #0075BA !important;
  color: #ffffff !important;
}

/* Forms (Jetpack, contact, submit, download) */
button,
input[type="submit"],
input[type="button"] {
  background-color: #0075BA !important;
  color: #ffffff !important;
}

/* Links styled as buttons (downloads, Woo, plugins) */
a.button,
button.button {
  background-color: #0075BA !important;
  color: #ffffff !important;
}

/* Sidebar buttons */
.sidebar a.button,
.sidebar button,
.sidebar input[type="submit"] {
  background-color: #0075BA !important;
  color: #ffffff !important;
}

/* Hover — subtle darken, still safe */
.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
a.button:hover {
  background-color: #0064a3 !important;
  color: #ffffff !important;
}

/* Make phone country code button transparent (PH +63) */
.wp-block-jetpack-contact-form button,
.wp-block-jetpack-contact-form .phone-country-code,
.wp-block-jetpack-contact-form .country-selector,
.wp-block-jetpack-contact-form .iti__selected-flag {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #000 !important; /* number stays readable */
}

/* Optional: remove hover background */
.wp-block-jetpack-contact-form .iti__selected-flag:hover {
  background: transparent !important;
}

/* =========================================
   SOCIAL SIDEBAR — LIMIT HEIGHT TO CONTENT
   (prevents long vertical sidebar on small screens)
   ========================================= */

.social-navigation {
  top: auto !important;
  bottom: 20px !important;
  transform: none !important;

  height: auto !important;
  max-height: none !important;

  align-items: center !important;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   FINAL RESPONSIVE FIX (paste at VERY BOTTOM)
   Goal: stop “zoomed in” look on phones, keep desktop same
   ========================================================= */

/* 1) Mobile typography + button sizing (Homepage heroes) */
@media (max-width: 480px) {

  /* Categories hero (CoBlocks) – reduce forced desktop sizes */
  body.home .coblocks-hero-37224033544 h2{
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  body.home .coblocks-hero-37224033544 p,
  body.home .coblocks-hero-37224033544 li{
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Buttons – remove “giant button” effect on phones */
  body.home .coblocks-hero-37224033544 .wp-block-button__link,
  body.home .wp-block-cover:first-of-type .wp-block-button__link{
    font-size: 14px !important;
    padding: 10px 18px !important;
    min-height: 44px !important;
  }

  /* If the Categories hero feels too tall on mobile */
  .coblocks-hero-37224033544 .wp-block-coblocks-hero__inner{
    min-height: 360px !important; /* was 520px */
    background-size: cover !important; /* prevents “weird zoom-out gaps” */
    background-position: center !important;
  }

  /* Prevent forced right padding / “pushed” layout on small screens */
  .wp-block-cover__inner-container{
    padding-right: 0 !important;
  }

  /* Avoid hero button being too far right / off layout */
  .wp-block-cover .wp-block-buttons{
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }

  /* Fix long words/links causing layout to feel “zoomed” */
  .entry-content, .entry-content *{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* 2) Tablet range clean-up (so it doesn’t look oversized at 768px) */
@media (max-width: 768px) {

  /* Keep logo reasonable */
  img.site-logo.attachment-maisha-logo{
    max-width: 85px !important;
  }

  /* Do NOT force full width buttons globally; only where needed */
  .wp-block-button__link{
    width: auto !important;
  }

  /* Contact page layout stays stacked properly */
  .contact-bottom{
    flex-direction: column !important;
    gap: 18px !important;
  }
}

/* =========================================================
   FINAL MOBILE FIX (PASTE AT VERY BOTTOM)
   Fix: phone looks "zoomed in", hero/button too big, overflow issues
   ========================================================= */

/* 1) Fix wrapping/overflow on small screens (your div{word-wrap:normal} breaks mobile) */
@media (max-width: 768px){
  .entry-content, .entry-content *{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Undo the global "no wrap" behavior on mobile */
  div{
    word-wrap: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }
}

/* 2) Fix homepage HERO scaling + remove forced desktop sizing on phones */
@media (max-width: 768px){

  /* Reduce Categories hero text sizes */
  body.home .coblocks-hero-37224033544 h2{
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  body.home .coblocks-hero-37224033544 p,
  body.home .coblocks-hero-37224033544 li{
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Ensure Categories list wraps properly */
  body.home .home-categories-list li{
    white-space: normal !important;
  }

  /* Make hero image behave normally on mobile (no weird zoom feel) */
  .coblocks-hero-37224033544 .wp-block-coblocks-hero__inner{
    min-height: 380px !important;          /* your 520px is too tall */
    background-size: cover !important;     /* contain causes odd “zoom out” gaps */
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Buttons: stop oversized padding and prevent layout push */
  body.home .coblocks-hero-37224033544 .wp-block-button__link{
    font-size: 14px !important;
    padding: 10px 18px !important;
    min-height: 44px !important;
    width: auto !important;
  }

  /* IMPORTANT: Your first cover button is positioned absolute on desktop.
     On mobile, that often causes weird scaling/overlap. Reset it. */
  body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container{
    position: static !important;
    padding-bottom: 24px !important;
    display: block !important; /* undo flex center that can stretch things */
  }

  body.home .wp-block-cover:first-of-type .wp-block-button{
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    z-index: auto !important;
  }

  /* Don’t force huge right paddings on mobile */
  .wp-block-cover__inner-container{
    padding-right: 0 !important;
  }
  .wp-block-cover .wp-block-buttons{
    justify-content: flex-start !important;
    padding-right: 0 !important;
  }
}



/* 3) Extra small phones (tighten a bit more) */
@media (max-width: 480px){
  body.home .coblocks-hero-37224033544 h2{ font-size: 22px !important; }
  body.home .coblocks-hero-37224033544 p,
  body.home .coblocks-hero-37224033544 li{ font-size: 15px !important; }

  .coblocks-hero-37224033544 .wp-block-coblocks-hero__inner{
    min-height: 340px !important;
  }
}