/* =====================================================================
   TAMQ — Business Setup Services
   Brand override layer for the Atroly template.
   Only colours, brand assets and a few helpers are changed here so the
   original template CSS / JS keep working untouched.
   Brand palette taken from the visiting card:
     Maroon   #8B1C24   (primary / accent)
     Charcoal #23272A   (dark sections, footer)
     Cream    #FBF3E8   (light backgrounds, hero)
     Gold     #C9A14A   (secondary accent)
   ===================================================================== */

:root {
    /* Primary accent -> Maroon */
    --base-h: 355;
    --base-s: 66%;
    --base-l: 33%;

    /* Secondary accent -> warm Gold */
    --base-two-h: 41;
    --base-two-s: 52%;
    --base-two-l: 54%;
    --base-two-ho: 46%;

    /* Dark sections / footer -> Charcoal */
    --base-three-h: 210;
    --base-three-s: 9%;
    --base-three-l: 15%;

    /* Hero + light section background -> Cream */
    --hero-bg: 37, 55%, 95%;
    --bg-four-h: 37;
    --bg-four-s: 55%;
    --bg-four-l: 96%;

    /* Footer background -> Charcoal */
    --footer-bg: 210, 9%, 13%;

    /* Misc accents tied to brand */
    --star-color: 41, 52%, 54%;
}

/* Cream page sections that the template painted light-blue */
.bg--hero,
.hero--three {
    background-color: hsl(var(--bg-four-h) var(--bg-four-s) var(--bg-four-l));
}

/* Brand logo — ALWAYS preserve the intrinsic aspect ratio, never stretch or
   deform on any device. Sizing is driven by max-height; width scales
   proportionally because width/height are auto. !important overrides the
   template's width:100%/height:100% and fixed-width mobile rules. */
.header-wrapper .logo-wrapper img,
.offcanvas-header .logo-wrapper img,
.footer-logo--wrap .footer-item--logo a img,
.footer-item--logo img {
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    max-width: 100%;
    display: block;
}

/* Header logo */
.header-wrapper .logo-wrapper img { max-height: 54px; max-width: 200px; }

/* Mobile off-canvas menu logo */
.offcanvas-header .logo-wrapper img { max-height: 46px; max-width: 175px; }

/* Footer logo (light variant on dark) */
.footer-logo--wrap .footer-item--logo a img,
.footer-item--logo img { max-height: 70px; max-width: 210px; margin: 0 auto; }

/* Responsive: keep the same 2:1 ratio, just smaller, on tablet & phone */
@media (max-width: 991px){
    .header-wrapper .logo-wrapper img { max-height: 48px; max-width: 180px; }
}
@media (max-width: 575px){
    .header-wrapper .logo-wrapper img { max-height: 42px; max-width: 160px; }
}
@media (max-width: 424px){
    .header-wrapper .logo-wrapper img { max-height: 38px; max-width: 140px; }
}

/* Page banner (inner pages) ------------------------------------------------ */
.page-banner {
    background: linear-gradient(rgba(35,39,42,.82), rgba(35,39,42,.88)),
                hsl(var(--base-h) var(--base-s) var(--base-l));
    padding: 185px 0 95px;
    position: relative;
    overflow: hidden;
}
.page-banner .banner-title {
    color: #fff;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 12px;
}
.page-banner .breadcrumb-nav {
    color: #e9d9c6;
    font-size: 16px;
}
.page-banner .breadcrumb-nav a { color: #fff; }
.page-banner .breadcrumb-nav a:hover { color: hsl(var(--base-h) var(--base-s) var(--base-l)); }
.page-banner .breadcrumb-nav .sep { margin: 0 10px; opacity: .6; }

/* Service / value cards ---------------------------------------------------- */
.tamq-service-card {
    background: #fff;
    border: 1px solid rgba(35,39,42,.08);
    border-radius: 14px;
    padding: 34px 30px;
    height: 100%;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}
.tamq-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(139,28,36,.12);
    border-color: rgba(139,28,36,.25);
}
.tamq-service-card .icon--wrap {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: hsl(var(--base-h) var(--base-s) var(--base-l) / .08);
    color: hsl(var(--base-h) var(--base-s) var(--base-l));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
    transition: all .35s ease;
}
.tamq-service-card:hover .icon--wrap {
    background: hsl(var(--base-h) var(--base-s) var(--base-l));
    color: #fff;
}
.tamq-service-card h3 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 12px;
}
.tamq-service-card p { font-size: 15.5px; margin-bottom: 0; color: #5b6066; }

/* Vision / Mission boxes --------------------------------------------------- */
.vm-card {
    background: #fff;
    border-radius: 16px;
    padding: 44px 40px;
    height: 100%;
    border: 1px solid rgba(35,39,42,.08);
    transition: all .35s ease;
}
.vm-card:hover { box-shadow: 0 18px 44px rgba(35,39,42,.10); transform: translateY(-4px); }
.vm-card .vm-icon {
    width: 76px; height: 76px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    font-size: 34px; color:#fff; margin-bottom: 26px;
    background: hsl(var(--base-h) var(--base-s) var(--base-l));
}
.vm-card.gold .vm-icon { background: hsl(var(--base-h) var(--base-s) var(--base-l)); }
.vm-card h3 { font-size: 26px; font-weight: 500; margin-bottom: 16px; }

/* Contact info tiles ------------------------------------------------------- */
.contact-tile {
    background:#fff; border:1px solid rgba(35,39,42,.08); border-radius:14px;
    padding: 30px 26px; height:100%; text-align:center; transition: all .35s ease;
}
.contact-tile:hover { box-shadow: 0 16px 38px rgba(35,39,42,.1); transform: translateY(-4px); }
.contact-tile .c-icon {
    width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center; font-size:24px;
    background: hsl(var(--base-h) var(--base-s) var(--base-l) / .10);
    color: hsl(var(--base-h) var(--base-s) var(--base-l));
}
.contact-tile h4 { font-size:18px; font-weight:500; margin-bottom:8px; }
.contact-tile a, .contact-tile p { color:#5b6066; font-size:15.5px; margin:0; }
.contact-tile a:hover { color: hsl(var(--base-h) var(--base-s) var(--base-l)); }

/* Contact form ------------------------------------------------------------- */
.tamq-form .form--control,
.tamq-form textarea.form--control {
    width:100%; border:1px solid rgba(35,39,42,.14); border-radius:10px;
    padding: 14px 18px; margin-bottom: 18px; font-size:15.5px; background:#fff;
    transition: border-color .25s ease;
}
.tamq-form .form--control:focus {
    outline:none; border-color: hsl(var(--base-h) var(--base-s) var(--base-l));
}
.tamq-form textarea.form--control { min-height: 150px; resize: vertical; }
.form-note { font-size: 14px; margin-top: 12px; }
.form-note.ok { color: #1c7c43; }
.form-note.err { color: #b3261e; }

/* Simple feature list with check icons ------------------------------------- */
.tamq-check-list { list-style:none; padding-left:0; margin:0; }
.tamq-check-list li {
    position:relative; padding-left: 34px; margin-bottom: 14px; font-size:16px; color:#3b4046;
}
.tamq-check-list li i {
    position:absolute; left:0; top:3px;
    color: hsl(var(--base-h) var(--base-s) var(--base-l));
    font-size:18px;
}

/* Stat counters ------------------------------------------------------------ */
.tamq-stat { text-align:center; }
.tamq-stat .num { font-size: 46px; font-weight:600; color: hsl(var(--base-h) var(--base-s) var(--base-l)); line-height:1; }
.tamq-stat.on-dark .num { color: hsl(var(--base-h) var(--base-s) var(--base-l)); }
.tamq-stat .label { font-size:16px; margin-top:10px; }
.tamq-stat.on-dark .label { color:#e7e7e7; }

/* Our Clients -------------------------------------------------------------- */
.tamq-clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
}
.tamq-client-logo {
    flex: 1 1 calc(50% - 24px);
    max-width: calc(50% - 24px);
    background: #fff;
    border: 1px solid rgba(35,39,42,.08);
    border-radius: 14px;
    height: 130px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
    transition: all .35s ease;
}
.tamq-client-logo:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(139,28,36,.12);
    border-color: rgba(139,28,36,.25);
}
.tamq-client-logo img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
    transition: all .35s ease;
}
.tamq-client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
@media (min-width: 576px) {
    .tamq-client-logo { flex: 1 1 calc(33.333% - 24px); max-width: calc(33.333% - 24px); }
}
@media (min-width: 768px) {
    .tamq-client-logo { flex: 1 1 calc(20% - 20px); max-width: calc(20% - 20px); height: 140px; }
}

/* =========================  WhatsApp floating button  ===================== */
.wa-float {
    position: fixed;
    left: 26px;
    bottom: 26px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(37,211,102,.45);
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
}
.wa-float:hover { transform: scale(1.08); color:#fff; box-shadow: 0 10px 30px rgba(37,211,102,.6); }
.wa-float::before {
    content:""; position:absolute; inset:0; border-radius:50%;
    background:#25D366; opacity:.55; z-index:-1;
    animation: wa-pulse 2s infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity:.55; }
    70%  { transform: scale(1.6); opacity:0; }
    100% { transform: scale(1.6); opacity:0; }
}
.wa-float .wa-tip {
    position:absolute; left:74px; white-space:nowrap;
    background:#23272A; color:#fff; font-size:13px; padding:8px 14px;
    border-radius:8px; opacity:0; pointer-events:none; transform: translateX(-8px);
    transition: all .25s ease;
}
.wa-float:hover .wa-tip { opacity:1; transform: translateX(0); }
@media (max-width: 575px){
    .wa-float { width:54px; height:54px; font-size:28px; left:18px; bottom:18px; }
    .wa-float .wa-tip { display:none; }
}

/* small responsive tweaks */
@media (max-width: 767px){
    .page-banner .banner-title { font-size: 34px; }
    .page-banner { padding: 140px 0 60px; }
}