/* Responsive fixes — 2026-10 */

/* ---------- Header ---------- */
/* phones: header-top has no visible content (all children d-none), drop the empty strip */
@media (max-width: 767px) {
    .header-layout1 .header-top { display: none; }
}
/* tablets: compact contact line so the phone number doesn't wrap */
@media (min-width: 768px) and (max-width: 991px) {
    .header-layout1 .header-top .info-card-wrap { gap: 18px; margin-top: 10px; margin-bottom: 8px; justify-content: center; }
    .header-layout1 .header-top .info-card .box-title { font-size: 14px; white-space: nowrap; }
    .header-layout1 .header-top .info-card:first-child .box-title { white-space: normal; }
}
/* desktop: larger logo, logo + contacts stay on one row */
@media (min-width: 992px) {
    .header-layout1 .header-top .dt-logo img { max-height: 60px; }
    .header-layout1 .header-top .header-logo { padding-top: 15px; padding-bottom: 15px; }
    .header-layout1 .header-top > .container > .row { flex-wrap: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .header-layout1 .header-top .info-card-wrap { gap: 22px; }
    .header-layout1 .header-top .info-card { border: 0; padding-left: 0; }
    .header-layout1 .header-top .info-card .box-title { font-size: 15px; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-layout1 .header-top .header-notice { display: none; }
    .header-layout1 .header-top .row > .align-self-start { align-self: center !important; }
    .header-layout1 .header-top .info-card-wrap { margin-top: 0; }
    .header-layout1 .header-top .info-card:first-child { display: none; }
}
/* mobile sticky bar logo */
@media (max-width: 991px) {
    .header-layout1 .menu-area .dt-logo img { max-height: 46px; }
}

/* ---------- Home: first section sits under the header (ScrollSmoother puts content at top:0) ---------- */
#smooth-content > section.space-extra-bottom:first-child > .container {
    padding-top: calc(var(--dt-hdr, 0px) + 30px) !important;
}
#smooth-content > section.space-extra-bottom:first-child { padding-bottom: 30px; }
@media (max-width: 575px) {
    #smooth-content > section.space-extra-bottom:first-child .sec-title { font-size: 28px; line-height: 1.25; }
}
@media (min-width: 992px) {
    #smooth-content > section.space-extra-bottom:first-child .sec-title { font-size: 44px; line-height: 1.2; }
}
/* hero: top padding was meant for an overlay header, here it is just an empty dark band */
#smooth-content > section.space-extra-bottom:first-child + .hero-1 { padding-top: 0; }

/* ---------- Sections ---------- */
@media (max-width: 575px) {
    :root { --section-space: 60px; --section-space-mobile: 60px; }
    .title-area { margin-bottom: 24px; }
}

/* ---------- Product cards: 2 per row on phones ---------- */
@media (max-width: 575px) {
    .row:has(> div > .th-product) { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
    .row > .col-sm-6:has(> .th-product) { flex: 0 0 auto; width: 50%; }
    .th-product { padding: 8px; border-radius: 14px; height: 100%; }
    .th-product .product-img { margin-bottom: 10px; border-radius: 12px; }
    .th-product .product-img img { aspect-ratio: 1 / 1; object-fit: cover; }
    .th-product .product-tag { font-size: 11px; line-height: 20px; padding: 0 8px; min-width: 0; top: 6px; left: 6px; }
    .th-product .actions { display: none; }
    .th-product .product-title { font-size: 14px; line-height: 1.3; margin: 0 0 4px; }
    .th-product .price { font-size: 13px; margin-bottom: 2px; }
}

@media (min-width: 576px) and (max-width: 991px) {
    .th-product .product-img img { aspect-ratio: 1 / 1; object-fit: cover; }
}

/* ---------- Direction cards / about image ---------- */
@media (max-width: 991px) {
    .donation-card .box-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    #about-sec img.w-100.rounded { max-height: 380px; object-fit: cover; }
}

/* ---------- Blog cards ---------- */
@media (min-width: 576px) and (max-width: 991px) {
    .row > .col-lg-6:has(> .blog-card) { flex: 0 0 auto; width: 50%; }
}
@media (max-width: 991px) {
    .blog-card .blog-img { margin-bottom: 14px; }
    .blog-card .blog-img img { aspect-ratio: 16 / 10; object-fit: cover; }
    .blog-card .box-title { font-size: 18px; }
}

/* ---------- Breadcrumb: busy background behind the title ---------- */
@media (max-width: 767px) {
    .breadcumb-wrapper:after { background: rgba(11, 32, 28, .55); mix-blend-mode: normal; }
    .breadcumb-wrapper .breadcumb-content { position: relative; z-index: 3; }
}

/* ---------- Misc ---------- */
@media (hover: none) {
    #magic-cursor { display: none !important; }
}
.page-content img, .seo-notes img { max-width: 100%; height: auto; }