/* ==========================================================================
   SKCO custom overrides
   ========================================================================== */

/* Hide mobile hamburger toggle on desktop (992px+) */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }
}

/* ==========================================================================
   SKCO real logo — wide two-line wordmark (~4.5:1), height-driven
   ========================================================================== */
header a.logo img { max-height: 40px; width: auto; }
.footer-logo { max-height: 50px; width: auto; }
@media (max-width: 575px) {
    header a.logo img { max-height: 34px; }
}

/* ==========================================================================
   SKCO Brand Logo Grid
   Used on: our-brands.html, index.html, about.html
   ========================================================================== */

.skco-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    width: 100%;
}

/* Tablet */
@media (max-width: 1199px) {
    .skco-brand-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}

/* Small tablet */
@media (max-width: 991px) {
    .skco-brand-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

/* Large phone */
@media (max-width: 767px) {
    .skco-brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Small phone */
@media (max-width: 479px) {
    .skco-brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Individual brand tile */
.skco-brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.skco-brand-tile:hover {
    transform: translateY(-4px);
    text-decoration: none;
}

/* Logo container — uniform aspect ratio, centered logo */
.skco-brand-logo-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.skco-brand-tile:hover .skco-brand-logo-wrap {
    border-color: #d1d1d1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.skco-brand-logo-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Force consistent visual weight */
    display: block;
}

/* Brand name caption below tile */
.skco-brand-name {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #232323;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
}

.skco-brand-category {
    margin-top: 3px;
    font-size: 10.5px;
    color: #888;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* Smaller text on phones */
@media (max-width: 767px) {
    .skco-brand-name { font-size: 11px; }
    .skco-brand-category { font-size: 9.5px; }
    .skco-brand-logo-wrap { padding: 12px; }
}

/* ==========================================================================
   "Why partner with SKCO" — large circular process images (homepage)
   Namespaced: these classes are used only in that one section.
   ========================================================================== */
.skco-process-figure {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto 30px;
    padding: 8px;                       /* the white ring gap around the photo */
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px #e6e6e6, 0 12px 28px rgba(0, 0, 0, 0.12);
}

.skco-process-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Dark tint so the number stays legible over any photo */
.skco-process-figure::after {
    content: "";
    position: absolute;
    top: 8px; right: 8px; bottom: 8px; left: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
}

/* Variant with no number overlaid — drop the tint so the photo reads clearly */
.skco-process-plain::after { display: none; }

.skco-process-num {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    font-weight: 300;
    line-height: 1;
    color: #ffffff;
}

/* 992-1199px: still 4 across, but columns get tighter */
@media (max-width: 1199px) {
    .skco-process-figure { width: 172px; height: 172px; }
    .skco-process-num { font-size: 50px; }
}
/* Below 992px the cards drop to 2 across (col-sm-6), so there is room again */
@media (max-width: 991px) {
    .skco-process-figure { width: 190px; height: 190px; }
    .skco-process-num { font-size: 58px; }
}

/* ==========================================================================
   Compact logo strip (homepage version — no captions, just logos)
   ========================================================================== */
.skco-brand-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 1199px) { .skco-brand-strip { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
@media (max-width: 991px)  { .skco-brand-strip { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 767px)  { .skco-brand-strip { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 479px)  { .skco-brand-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.skco-brand-strip-item {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    transition: border-color 0.25s ease, transform 0.25s ease;
    filter: grayscale(0.15);
}

.skco-brand-strip-item:hover {
    border-color: #c8c8c8;
    transform: translateY(-2px);
    filter: grayscale(0);
}

.skco-brand-strip-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Filter tabs for brand grid (replaces Pofo's portfolio-filter)
   ========================================================================== */
.skco-filter-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 50px;
    padding: 0;
    list-style: none;
}

.skco-filter-tab {
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #555;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s ease;
}

.skco-filter-tab:hover {
    color: #232323;
    border-color: #c0c0c0;
}

.skco-filter-tab.active {
    color: #ffffff;
    background: #232323;
    border-color: #232323;
}

/* Hide tiles not matching active filter */
.skco-brand-tile.is-hidden {
    display: none;
}

/* ==========================================================================
   Navbar — About Us dropdown polish
   ========================================================================== */

@media (min-width: 992px) {
    nav.navbar .navbar-nav > li.dropdown {
        position: relative;
    }
    /* Show dropdown on hover */
    nav.navbar .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
    }
    /* Position dropdown directly under About Us */
    nav.navbar .navbar-nav > li.dropdown > .dropdown-menu {
        margin-top: 0;
        top: 100%;
        left: 0 !important;
        right: auto !important;
        min-width: 200px;
        padding-top: 10px;
    }
    /* invisible hover bridge so the menu stays open while moving the cursor into it */
    nav.navbar .navbar-nav > li.dropdown:hover::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
    }
    /* Brighten chevron on hover */
    nav.navbar .navbar-nav > li.dropdown:hover > a > i {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   Hide Revolution slider nav chrome that references broken placeholder thumbs
   (the stray box top-left). Slider still auto-rotates.
   ========================================================================== */
.tp-bannertimer,
.tparrows,
.tp-arr-imgholder,
.tp-bullets { display: none !important; }

/* ===================== Our Journey — animated timeline ===================== */
.skco-timeline{position:relative;max-width:940px;margin:0 auto;padding:6px 0;}
.skco-timeline::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:linear-gradient(#e7e7e7,#e0e0e0);transform:translateX(-50%);}
.skco-tl-item{position:relative;width:50%;padding:0 42px 34px;box-sizing:border-box;}
.skco-tl-item:nth-child(odd){left:0;text-align:right;}
.skco-tl-item:nth-child(even){left:50%;text-align:left;}
.skco-tl-card{display:inline-block;text-align:left;max-width:330px;background:#fff;border:1px solid #ededed;border-radius:8px;padding:16px 20px;box-shadow:0 8px 26px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease;}
.skco-tl-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.10);}
.skco-tl-year{font-weight:700;font-size:22px;letter-spacing:.5px;color:#c9302a;line-height:1;margin-bottom:7px;}
.skco-tl-text{font-size:13.5px;color:#5a5a5a;line-height:1.55;margin:0;}
.skco-tl-dot{position:absolute;top:5px;width:15px;height:15px;border-radius:50%;background:#c9302a;border:3px solid #fff;box-shadow:0 0 0 2px #c9302a;}
.skco-timeline .skco-tl-item:nth-child(odd) .skco-tl-dot{right:-7.5px;}
.skco-timeline .skco-tl-item:nth-child(even) .skco-tl-dot{left:-7.5px;}
@media (max-width:767px){
  .skco-timeline{max-width:100%;}
  .skco-timeline::before{left:16px;}
  .skco-tl-item,.skco-tl-item:nth-child(odd),.skco-tl-item:nth-child(even){width:100%;left:0;text-align:left;padding:0 0 26px 46px;}
  .skco-tl-item:nth-child(odd) .skco-tl-dot,.skco-tl-item:nth-child(even) .skco-tl-dot{left:9.5px;right:auto;}
  .skco-tl-card{max-width:100%;}
}

/* remove Pofo deep-pink hover box on counter tiles */
.counter-feature-box-1,
.counter-feature-box-1:hover{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
.counter-feature-box-1:hover .counter-box{ background:#fff !important; }

/* ===== Homepage hero: single slide — hide slider navigation ===== */
#rev_slider_1078_1_wrapper .tp-bullets,
#rev_slider_1078_1_wrapper .tp-thumbs,
#rev_slider_1078_1_wrapper .tparrows { display: none !important; }


/* SKCO brand red accent */
.skco-red{ color:#c9302a !important; }

/* Keep all centered content optically centered regardless of the OS scrollbar,
   and keep page width consistent whether or not a page actually needs to scroll.
   "both-edges" previously reserved a phantom gutter on the left that never gets
   painted (the real scrollbar only ever sits on the right), showing as a visible
   white sliver down the left edge of every page. Single-edge "stable" still
   prevents the content-shift the comment above describes, without that gutter. */
html { scrollbar-gutter: stable; }

/* Aspire section video: clean contained portrait reel (matches the About image card). */
.skco-aspire-vid{ display:block; margin:0 auto; width:auto; max-width:100%; max-height:620px; border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,0.14); background:#eee; }
@media (max-width:991px){ .skco-aspire-vid{ max-height:520px; } }

/* Hero "Explore Brands" button: lock a non-zero font-size so Revolution Slider
   can't collapse it to 0 (which appeared as a small white box). */
.tp-caption.skco-hero-cta{ font-size:14px !important; line-height:1.4 !important; }

/* Larger main navigation + slightly bigger logo */
.dropdown-menu > li > a{ font-size:14px !important; }
/* Cap logo HEIGHT only. Do NOT force width: Pofo collapses the inactive logo to
   width:0 so only one of the two stacked logos takes layout width. Forcing width
   here makes the hidden logo occupy space too, doubling the logo column and
   pushing the menu onto a second row. */
header a.logo img{ height:55px !important; max-height:66px !important; }
@media (max-width:991px){ header a.logo img{ height:52px !important; max-height:52px !important; } }
/* Desktop top nav: slightly larger than stock, still compact enough to stay one row */
@media (min-width:992px){
  header nav .navbar-nav > li > a{ font-size:14px !important; margin:0 16px !important; }
}


/* Body text +1px */
body{ font-size:15px; }
/* Header: breathing room from the very top */
.navbar-top{ padding-top:12px; }
/* Larger footer text */
.footer-widget-area p, .footer-widget-area li a, .footer-widget-area .text-small{ font-size:15px !important; line-height:1.75 !important; }
.footer-widget-area .widget-title{ font-size:14px !important; }
.footer-bottom .text-small, .footer-bottom div{ font-size:13px !important; }


/* Brand consistency: Pofo deep-pink -> SKCO brand red, site-wide */
.text-deep-pink{ color:#c9302a !important; }
.bg-deep-pink{ background-color:#c9302a !important; }
.btn-deep-pink, .btn-deep-pink:hover, .btn-deep-pink:focus, .btn-deep-pink:active{ background-color:#c9302a !important; border-color:#c9302a !important; }


/* Infrastructure "Built for Scale" cards — uniform image height so the three titles line up */
.image-hover-style-1{ aspect-ratio:3 / 2; }
.image-hover-style-1 > img{ width:100% !important; height:100% !important; object-fit:cover; object-position:center; }


/* ============================================================
   Distribution network — channels grid (distribution page)
   7 colour-coded cards in a responsive Bootstrap grid.
   ============================================================ */
.skco-petal{ position:relative; height:100%; background:#fff; border:1px solid #ededed; border-left:4px solid #ccc; border-radius:8px;
  padding:22px; box-shadow:0 6px 18px rgba(0,0,0,.05); display:flex; gap:14px; align-items:flex-start;
  transition:transform .25s ease, box-shadow .25s ease; }
.skco-petal:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.09); }
.skco-petal .sp-num{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.skco-petal h6{ margin:0 0 6px; font-weight:600; color:#232323; line-height:1.3; min-height:2.6em; }
.skco-petal p{ margin:0; font-size:13.5px; color:#727272; line-height:1.6; min-height:4.8em; }
/* channel colours */
.sp-1 .sp-num{ background:#c9302a; } .sp-1{ border-left-color:#c9302a; }
.sp-2 .sp-num{ background:#f5a623; } .sp-2{ border-left-color:#f5a623; }
.sp-3 .sp-num{ background:#7cb342; } .sp-3{ border-left-color:#7cb342; }
.sp-4 .sp-num{ background:#9c27b0; } .sp-4{ border-left-color:#9c27b0; }
.sp-5 .sp-num{ background:#e91e8c; } .sp-5{ border-left-color:#e91e8c; }
.sp-6 .sp-num{ background:#009688; } .sp-6{ border-left-color:#009688; }
.sp-7 .sp-num{ background:#1e88e5; } .sp-7{ border-left-color:#1e88e5; }


/* Contact form select styled to match the text inputs */
#skco-contact-form select.medium-input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23999999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:11px 7px;
  padding-right:42px; cursor:pointer;
}


/* Use SKCO brand red as the theme base colour (fixes pink link hover) */
:root{ --base-color:#c9302a; }

/* slimmer header */
header .navbar, header nav.navbar{ padding-top:6px !important; padding-bottom:6px !important; }

/**********custom-css(7-8-2026)************/
/*.skco-marketing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skco-marketing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.text-skco-red {
    color: #c8102e;
}
.skco-marketing-card i {
    margin-top: 3px; /* optical alignment with heading baseline */
/*}
.skco-client-logo img {
    max-height: 50px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.skco-client-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.welcome-slider .skco-fixed-slider {
    height: 500px;
}
@media (min-width: 768px) {
    .welcome-slider .skco-fixed-slider {
        height: 620px;
    }
}
body.welcome-page {
    min-height: auto !important;
    height: auto !important;
}
html.welcome-page-html {
    min-height: auto !important;
}*/