/* ------------------------------------------------------------------
   responsive.css — fluid layout + mobile overrides for the Poise theme
   Loaded after the theme stylesheets; only overrides, no theme edits.
   ------------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }
html, body { min-width: 0; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

img, video { max-width: 100%; height: auto; }

/* Make the fixed 1002px frame fluid */
#wrapper { width: auto; max-width: 1002px; padding: 25px 15px; }
ul.menu { width: auto; max-width: 1000px; }
.inner-960, #footer { width: auto; max-width: 960px; }
.inner { padding: 40px 30px 37px; }

/* Header: logo left, text right (the text used to be a PNG) */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-header .logo img { display: block; }
div.description { float: none; width: auto; max-width: 710px; text-align: right; }
div.description h2 { font-family: 'PT Sans Narrow', sans-serif; font-weight: 400; font-size: 28px; line-height: 1.2; color: #3b3a8c; margin: 0 0 6px; }
div.description p { font-size: 12px; line-height: 1.6; margin: 0; }

/* Slider: scale with its container (Nivo 2.7 sets px sizes at load) */
#slider, .nivoSlider img { width: 100%; }
#slider { height: auto !important; aspect-ratio: 940 / 400; background-size: cover !important; background-position: center !important; }
.nivo-slice { width: 100% !important; left: 0 !important; background-size: cover !important; background-position: center !important; }
#preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/loading.gif) #fff no-repeat 50% 50%; z-index: 20; }

/* Team / portfolio grids */
.col-height, ul.portfolio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.col-height::before, .col-height::after, ul.portfolio::before, ul.portfolio::after { display: none; } /* clearfix pseudo-elements would become grid items */
.col-height > .col1-4, ul.portfolio > li { float: none; width: auto; margin-right: 0; }
ul.portfolio li { position: relative; list-style: none; line-height: 1em; margin: 0; }
ul.portfolio li .cover { position: absolute; background: #fff; top: 0; bottom: 0; left: 0; right: 0; display: none; }
.proj-desc { text-align: left; }
.proj-desc p { padding: 0 10px; margin-bottom: 0; }
.proj-img img, .proj-img1 img { display: block; }
.col-height .col1-4 { height: auto !important; }
.services h4 { margin-left: 0; }

/* Contact page */
.contact-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.map-wrap { margin-bottom: 30px; }
.map { display: block; width: 100%; height: 400px; border: 0; }

/* Misc */
h6 { font-size: 13px; color: #777; }
.contact-cols .qr { text-align: center; }
.contact-cols .qr img { display: inline-block; margin-bottom: 15px; }
.tel { white-space: nowrap; }
.footer-wrap { padding: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
    .col-height, ul.portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .one_fourth { width: 48.5%; }
    .one_fourth:nth-child(2n) { margin-right: 0; }
    .one_fourth:nth-child(2n+1) { clear: left; }
    .main-slider .nivo-caption { font-size: 14px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    body { font-size: 13px; line-height: 1.6; }
    #wrapper { padding: 15px 10px; }
    .inner { padding: 20px 15px 25px; }
    ul.menu { margin-bottom: 15px; padding: 4px 0; }
    ul.menu li { margin: 0 2px; }
    ul.menu li a { padding: 0 9px; height: 34px; line-height: 34px; font-size: 15px; }
    .site-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .site-header .logo img { width: 140px; }
    div.description { text-align: left; max-width: none; }
    div.description h2 { font-size: 22px; }
    .divider-text { text-align: left; }
    .divider-text span { padding-left: 0; padding-right: 20px; }
    .col1-3, .one_third, .two_thirds, .one_fourth { float: none; width: auto; margin-right: 0; }
    .one_third, .two_thirds, .one_fourth { margin-bottom: 25px; }
    .one_third img.alignleft { float: none; display: block; margin: 0 0 15px; }
    .bottom-50 { margin-bottom: 30px; }
    .nivo-directionNav { display: none; }
    .contact-cols { grid-template-columns: 1fr; }
    .map { height: 260px; }
    .main-slider .nivo-caption span { font-size: 15px; }
    .tabs ul.tabs-nav li a { padding: 8px 12px; }
    .footer-wrap { padding: 0; }
    .copyrigts .owner { float: none; display: block; text-align: center; }
    .col-height .col1-4 h3.bg-none { font-size: 16px; word-break: break-all; }
}

@media (max-width: 479px) {
    .col-height, ul.portfolio { gap: 12px; }
    ul.menu li a { padding: 0 7px; font-size: 14px; }
}