/* ==========================================================================
   UM Indonesia Perpustakaan Portal - Modern redesign v2 (2026-11-04)
   Full visual overhaul: edge-to-edge sections, new navbar, new hero,
   modern card grid with labels, consistent with umindonesia.ac.id brand
   (navy #0055B1 family + orange #FF8C01 accent), fully responsive.
   Loaded last on purpose so it wins the cascade over the legacy stylesheets.
   ========================================================================== */

:root{
    --umid-navy: #0055B1;
    --umid-navy-dark: #00306b;
    --umid-navy-mid: #0068d6;
    --umid-orange: #FF8C01;
    --umid-bg: #f4f7fb;
    --umid-card: #ffffff;
    --umid-text: #1c2733;
    --umid-muted: #64748b;
    --umid-radius: 16px;
    --umid-maxw: 1240px;
}

*{ box-sizing: border-box; }

html, body{
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{
    background: var(--umid-bg) !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    color: var(--umid-text);
}
::selection{ background: var(--umid-orange); color:#fff; }

h1,h2,h3,h4,h5,.panel-title{
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#e6ebf1; }
::-webkit-scrollbar-thumb{ background:var(--umid-navy); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--umid-orange); }

a{ color: var(--umid-navy); }

/* hide the old solid-color brand strip, the new navbar replaces its job */
.system{ display:none !important; }

/* ==========================================================================
   Sticky top navbar (new)
   ========================================================================== */
.umid-nav{
    position: sticky; top: 0; z-index: 999;
    background: linear-gradient(90deg, var(--umid-navy-dark) 0%, var(--umid-navy) 55%, var(--umid-navy-mid) 100%);
    box-shadow: 0 4px 20px rgba(0,30,70,.18);
}
.umid-nav-inner{
    max-width: var(--umid-maxw); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
}
.umid-nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.umid-nav-brand img{ height: 60px; width:auto; display:block; }
.umid-nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.umid-nav-links a{
    color:#e3edf9 !important; text-decoration:none !important; font-size:13.5px; font-weight:600;
    padding:9px 14px; border-radius:30px; transition:.2s; display:inline-block; white-space:nowrap;
}
.umid-nav-links a:hover, .umid-nav-links a.is-active{ background:rgba(255,255,255,.14); color:#fff !important; }
.umid-nav-links a.umid-nav-cta{ background:var(--umid-orange); color:#fff !important; }
.umid-nav-links a.umid-nav-cta:hover{ background:#e07e00; }
.umid-nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px; }

/* dropdown submenus (Tentang / Layanan) - moved here from the old homepage
   "menu atas" card row, same pattern as UMS Library's navbar dropdowns */
.umid-nav-dropdown{ position:relative; }
.umid-nav-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
.umid-nav-dropdown-menu{
    display:none; position:absolute; top:100%; left:0; min-width:230px;
    background:#fff; border-radius:12px; box-shadow:0 16px 36px rgba(0,20,60,.22);
    padding:8px; margin:8px 0 0; list-style:none; z-index:1000;
}
.umid-nav-dropdown.is-open .umid-nav-dropdown-menu{ display:block; }
.umid-nav-dropdown-menu li{ display:block; }
.umid-nav-dropdown-menu a{
    display:block !important; padding:10px 14px !important; border-radius:8px;
    color: var(--umid-navy-dark) !important; font-size:13px; font-weight:600;
    white-space:nowrap; background:none !important;
}
.umid-nav-dropdown-menu a:hover{ background:#f0f5fb !important; }

@media (max-width: 991px){
    .umid-nav-dropdown-menu{
        display:block; position:static; box-shadow:none; background:rgba(255,255,255,.06);
        margin:2px 0 6px 14px; padding:0; border-radius:8px;
    }
    .umid-nav-dropdown-menu a{ color:#dbe8f8 !important; padding:8px 14px !important; font-size:13px; }
    .umid-nav-dropdown-menu a:hover{ background:rgba(255,255,255,.1) !important; }
}
@media (max-width: 991px){
    .umid-nav-links{
        position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
        background: var(--umid-navy-dark); padding:10px 16px 16px; gap:2px;
        max-height:0; overflow:hidden; transition:max-height .3s ease;
    }
    .umid-nav-links.is-open{ max-height:420px; }
    .umid-nav-links a{ padding:12px 14px; border-radius:10px; }
    .umid-nav-toggle{ display:inline-block; }
    .umid-nav{ position: sticky; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.umid-hero{
    position:relative;
    margin-left:calc(-50vw + 50% - 15px); margin-right:calc(-50vw + 50% + 15px); width:auto;
    background: linear-gradient(155deg, var(--umid-navy-dark) 0%, var(--umid-navy) 55%, var(--umid-navy-mid) 100%);
    padding: 64px 20px 80px;
    text-align: center;
    overflow: hidden;
}
.umid-hero .hero-blob-1{ position:absolute; top:-90px; left:-60px; width:340px; height:340px; border-radius:50%; background:var(--umid-orange); opacity:.18; filter:blur(70px); pointer-events:none; }
.umid-hero .hero-blob-2{ position:absolute; bottom:-100px; right:-70px; width:380px; height:380px; border-radius:50%; background:#4dc4ff; opacity:.16; filter:blur(80px); pointer-events:none; }
.umid-hero .hero-pattern{ position:absolute; inset:0; opacity:.1; background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px); background-size:26px 26px; pointer-events:none; }
.umid-hero .hero-geo{ position:absolute; z-index:0; border-radius:6px; pointer-events:none; opacity:.85; }
.umid-hero .hero-geo-1{ top:18px; left:6%; width:34px; height:34px; background:var(--umid-orange); transform:rotate(8deg); }
.umid-hero .hero-geo-2{ top:54px; left:11%; width:16px; height:16px; background:#4dc4ff; transform:rotate(-10deg); }
.umid-hero .hero-geo-3{ bottom:24px; right:7%; width:30px; height:30px; background:#4dc4ff; transform:rotate(-14deg); }
.umid-hero .hero-geo-4{ bottom:60px; right:13%; width:16px; height:16px; background:var(--umid-orange); transform:rotate(12deg); }
@media (max-width:700px){ .umid-hero .hero-geo{ display:none; } }
.umid-hero-inner{ position:relative; z-index:1; max-width: 760px; margin: 0 auto; }
.umid-hero img.umid-hero-logo{
    height: 130px; width:auto; display:block; margin: 0 auto 20px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
}
.umid-hero .welcome{
    margin: 0 !important;
    font-size: 30px !important;
    line-height:1.25;
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.umid-hero-subtitle{
    color: #ffd9ad !important;
    font-weight: 600;
    font-size: 15.5px;
    margin: 8px 0 0 !important;
    letter-spacing: .3px;
}
@media (max-width:600px){
    .umid-hero{ padding:40px 16px 56px; }
    .umid-hero .welcome{ font-size:22px !important; }
    .umid-hero img.umid-hero-logo{ height:96px; }
}

/* catalog search + quick chips (kept, lightly refreshed) */
.umid-catalog-cta{
    position:relative;
    left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
    background:#fff;
    padding:30px 20px 26px;
    text-align:center;
    margin-top:-40px;
}
.umid-cc-inner{ max-width:760px; margin:0 auto; position:relative; z-index:2; }
.umid-cc-search{
    display:flex; gap:10px; background:#fff; border-radius:50px;
    box-shadow:0 16px 40px rgba(0,30,80,.16);
    padding:6px 6px 6px 22px;
    border:1px solid #E3EAF3;
}
.umid-cc-input{ flex:1; border:none; outline:none; font-size:15px; background:transparent; }
.umid-cc-btn{
    background:linear-gradient(120deg,var(--umid-navy),var(--umid-orange));
    color:#fff; border:none; border-radius:40px; padding:12px 26px;
    font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
.umid-cc-btn:hover{ filter:brightness(1.05); }
.umid-cc-links{ margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.umid-cc-chip{
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; border:1px solid #DCE6F2; color:var(--umid-navy);
    border-radius:30px; padding:8px 18px; font-size:13px; font-weight:700;
    text-decoration:none; transition:all .2s;
    box-shadow:0 3px 10px rgba(15,40,80,.05);
}
.umid-cc-chip:hover{ background:var(--umid-navy); color:#fff; border-color:var(--umid-navy); transform:translateY(-2px); }

.umid-partner-strip{
    position:relative;
    left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
    background:#fbfdff; border-bottom:1px solid #EEF2F7;
    padding:16px 20px 22px;
}
.umid-partner-inner{
    max-width: var(--umid-maxw); margin:0 auto; display:flex; gap:26px; justify-content:center;
    flex-wrap:wrap; align-items:center;
}
.umid-partner-inner a{
    color:#7A8AA0; font-size:12.5px; font-weight:700; letter-spacing:.3px;
    text-decoration:none; text-transform:uppercase;
}
.umid-partner-inner a:hover{ color:var(--umid-orange); }
@media(max-width:600px){
    .umid-cc-search{ flex-direction:column; border-radius:16px; padding:14px; }
    .umid-cc-btn{ width:100%; }
}

/* ==========================================================================
   Sections - edge-to-edge bands with centered inner content
   ========================================================================== */
nav#main-nav{ display:block; }
nav#main-nav > .container,
.tinggi > .container{
    max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important;
}

.panel.panel-primary{
    background: var(--umid-card) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e9edf3 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: hidden;
}
.panel.panel-primary .panel-heading{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: var(--umid-maxw);
    margin: 0 auto;
}
.panel.panel-primary .panel-body{
    max-width: var(--umid-maxw);
    margin: 0 auto;
    padding: 0 20px 36px !important;
}
.panel.panel-primary .panel-heading .panel-title,
.panel.panel-primary .panel-heading h2,
.panel.panel-primary .panel-heading h3{
    color: var(--umid-navy-dark) !important;
    font-weight: 800 !important;
    font-size: 21px;
    margin: 0;
    letter-spacing: .2px;
    text-align: left !important;
    padding: 30px 20px 18px;
    display:flex; align-items:center; gap:10px;
}
.panel.panel-primary .panel-heading .panel-title::before,
.panel.panel-primary .panel-heading h2::before,
.panel.panel-primary .panel-heading h3::before{
    content:''; display:inline-block; width:6px; height:22px; border-radius:4px;
    background: var(--umid-orange); flex-shrink:0;
}
.panel.panel-primary .panel-heading center{ display:block; }

/* "Berita & Pengumuman" heading already has its own center/h3, align left like others */
.panel.panel-primary .panel-heading center h3{ text-align:left; }

/* ==========================================================================
   Icon / logo grid cards - used across every resource section
   ========================================================================== */
.panel-body{ overflow-x: hidden; }
/* Deliberately NOT touching .col-lg-2's display/float - this markup mixes
   plain <div class="icon"> and <div class="icon"><div class="desc"></div></div>
   variants across sections; switching the grid wrapper to inline-block/flex
   made a few sections (ones with the extra empty .desc div) stretch to huge
   heights. Keeping .col-lg-2 on Bootstrap's own float:left (its original,
   working behavior) and only re-skinning .icon itself avoids that entirely. */
.icon{
    float: left;
    padding: 18px 12px !important;
    margin: 10px;
    width: 168px;
    background: var(--umid-card);
    border: 1px solid #e9edf3;
    border-top: 3px solid var(--umid-orange);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(15,40,80,.06);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icon:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0,85,177,.18);
    border-color: var(--umid-navy);
}
.icon img{
    height: 64px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    transition: transform .3s ease !important;
}
.icon:hover img{ transform: scale(1.08) !important; }
.icon a{
    text-decoration: none !important;
    color: var(--umid-text);
    font-size: 12px;
    font-weight: 600;
    display: block;
}
/* .desc is empty leftover markup in some sections - force it to take no space */
.icon .desc{ display:none; }
/* caption pulled from the existing title="" attribute - no HTML changes needed */
.icon a[title]::after{
    content: attr(title);
    display:block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--umid-navy-dark);
    line-height: 1.3;
    margin-top: 8px;
}

/* ---- "menu atas" quick-links table (Fasilitas / Tentang Kami / ...) ---- */
.panel-body table{
    border-collapse: separate;
    border-spacing: 14px;
    margin: 0 auto;
}
.panel-body table td{
    background: var(--umid-card);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15,40,80,.06);
    border: 1px solid #e9edf3;
    padding: 18px 10px !important;
    transition: transform .25s ease, box-shadow .25s ease;
    vertical-align: top !important;
}
.panel-body table td:hover{ transform: translateY(-5px); box-shadow: 0 14px 26px rgba(0,85,177,.16); }
.panel-body table td a{ text-decoration: none !important; color: var(--umid-text) !important; font-size: 12.5px; font-weight: 700; }
.panel-body table td img{
    background: linear-gradient(145deg, #eaf2ff, #dceaff);
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 8px;
}

/* ---- announcement ticker ---- */
.umid-ticker{ max-width: var(--umid-maxw); margin: 0 auto 20px; }

/* ---- Berita & Pengumuman cards ---- */
.panel-body .row{ max-width:none; }

/* ---- unified database tabs (replaces the long stack of separate
   "directory" panels: E-Books/E-Journal/E-Jurnal Nasional/E-Prosiding/
   MoU/E-Resources Lokal/Internasional) ---- */
.umid-tabnav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.umid-tab-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:#f4f7fb; border:1px solid #e3eaf3; color:var(--umid-navy-dark);
    border-radius:30px; padding:10px 18px; font-size:13px; font-weight:700;
    cursor:pointer; transition:.2s; font-family:inherit;
}
.umid-tab-btn:hover{ background:#e8f0fb; }
.umid-tab-btn.is-active{
    background: linear-gradient(120deg,var(--umid-navy),var(--umid-navy-mid));
    color:#fff; border-color:var(--umid-navy);
    box-shadow:0 8px 18px rgba(0,85,177,.28);
}
.umid-tabpane{ display:none; }
.umid-tabpane.is-active{
    display:block; animation: umidFadeIn .3s ease;
    /* contains the floated .icon cards inside - without this the pane's
       height collapses to 0 (floats don't count toward a block's height
       on their own), so whatever comes after (the footer) renders
       starting at that collapsed point, overlapping the still-floating
       cards instead of appearing below them. */
    overflow:hidden;
}
@keyframes umidFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@media (max-width:600px){
    .umid-tabnav{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
    .umid-tab-btn{ white-space:nowrap; }
}

/* ---- modern service-icon grid (replaces the old mismatched screenshot
   banners in "Portal Perpustakaan UM Indonesia") ---- */
.umid-service-grid{
    /* flexbox, not CSS grid: grid's auto-fill tracks stay reserved even
       when a trailing row has fewer items than columns, which left a big
       empty gap next to the last card whenever the count didn't divide
       evenly (e.g. 16 items @ 7/row = a lonely last card + 6 empty slots).
       Flexbox just lets the last row be short, no phantom cells. */
    display:flex; flex-wrap:wrap; gap:16px; margin:0 0 10px;
}
.umid-service-card{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    flex:1 1 150px; max-width:200px;
    background:var(--umid-card); border:1px solid #e9edf3; border-radius:16px;
    padding:22px 12px; text-decoration:none !important; color:var(--umid-text);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.umid-service-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0,85,177,.18);
    border-color: var(--umid-navy);
}
.umid-service-icon{
    width:56px; height:56px; border-radius:50%;
    background: linear-gradient(145deg,#eaf2ff,#dceaff);
    color: var(--umid-navy); font-size:22px;
    display:flex; align-items:center; justify-content:center;
    transition: background .25s ease, color .25s ease;
}
.umid-service-card:hover .umid-service-icon{
    background: linear-gradient(120deg,var(--umid-navy),var(--umid-navy-mid)); color:#fff;
}
.umid-service-label{ font-size:12.5px; font-weight:700; line-height:1.3; color:var(--umid-navy-dark); }

/* ---- popup modals ---- */
.window{
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
    border-top: 6px solid var(--umid-orange) !important;
}
.window h2, .window h4{ color: var(--umid-navy) !important; }
.window a{ color: var(--umid-navy); font-weight: 600; }
.window hr{ border-color: var(--umid-orange) !important; opacity: .5; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px){
    .panel.panel-primary .panel-heading .panel-title,
    .panel.panel-primary .panel-heading h2,
    .panel.panel-primary .panel-heading h3{ font-size: 18px; padding:24px 16px 14px; }
    .panel.panel-primary .panel-body{ padding: 0 16px 28px !important; }
}
@media (max-width: 768px){
    .icon{ width: 100%; }
    .panel-body .col-lg-2{ width: 130px; margin:0 8px 16px 0; }
}
@media (max-width: 900px){
    .panel-body table, .panel-body table tbody, .panel-body table tr{ display: block !important; width: 100% !important; }
    .panel-body table td{ display: inline-block !important; width: 30% !important; margin: 6px 1.5% !important; box-sizing: border-box !important; vertical-align: top !important; }
}
@media (max-width: 600px){
    .panel-body table td{ width: 44% !important; }
    .panel-body .col-lg-2{ width: 46%; margin:0 2% 14px; }
}
@media (max-width: 420px){
    .panel-body table td{ width: 100% !important; margin: 6px 0 !important; }
    .panel-body .col-lg-2{ width: 100%; margin:0 0 14px; }
}
@media (min-width: 1400px){
    :root{ --umid-maxw: 1360px; }
}

/* ---- footer (unchanged from existing good design, see index.php inline <style>) ---- */
.footer{ display:none; } /* legacy class superseded by .umi-footer */
html,body{overflow-x:hidden;}
.umi-footer{position:relative;overflow:hidden;margin-left:calc(-50vw + 50% - 15px);margin-right:calc(-50vw + 50% + 15px);width:auto;background:linear-gradient(155deg,#00306b 0%,#0055b1 55%,#0068d6 100%);padding-top:40px;}
.umi-footer .footer-wave{position:absolute;top:0;left:0;width:100%;height:70px;display:block;z-index:1;}
.umi-footer .footer-blob-1{position:absolute;top:-80px;left:-60px;width:340px;height:340px;border-radius:50%;background:#ff8c01;opacity:.16;filter:blur(70px);z-index:0;}
.umi-footer .footer-blob-2{position:absolute;bottom:60px;right:-80px;width:380px;height:380px;border-radius:50%;background:#4dc4ff;opacity:.14;filter:blur(80px);z-index:0;}
.umi-footer .footer-pattern{position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);background-size:26px 26px;pointer-events:none;z-index:0;}
.umi-footer .footer-skyline{position:absolute;left:0;bottom:64px;width:100%;height:90px;z-index:0;pointer-events:none;}
.umi-footer .footer-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:10px 40px 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:24px;box-sizing:border-box;align-items:start;}
.umi-footer .footer-inner::before,.umi-footer .footer-inner::after{display:none !important;content:none !important;}
.umi-footer .ft-logo-block{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px 22px 18px 80px;backdrop-filter:blur(4px);}
.umi-footer .ft-col-heading{color:#ffb454;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 12px;position:relative;padding-bottom:8px;}
.umi-footer .ft-col-heading::after{content:'';position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:#ff8c01;}
.umi-footer .ft-logo-block img{max-width:120px;height:auto;margin-bottom:14px;display:block;}
.umi-footer .ft-logo-block .ft-uni-name{color:#fff;font-size:17px;font-weight:800;line-height:1.35;margin-bottom:6px;}
.umi-footer .ft-logo-block .ft-tagline{color:#bcd4ef;font-size:13px;font-style:italic;margin-bottom:20px;}
.umi-footer .ft-contact-row{display:flex;align-items:center;margin-bottom:12px;color:#e3edf9;font-size:14.5px;}
.umi-footer .ft-contact-row i{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;margin-right:12px;color:#ffb454;font-size:14px;}
.umi-footer ul.ft-links{list-style:none;padding:0;margin:0;}
.umi-footer ul.ft-links li{margin-bottom:9px;}
.umi-footer ul.ft-links a{color:#dbe8f8 !important;text-decoration:none !important;font-size:14.5px;transition:.25s;display:inline-flex;align-items:center;gap:8px;}
.umi-footer ul.ft-links a:hover{color:#ff8c01 !important;transform:translateX(4px);}
.umi-footer ul.ft-links a::before{content:'';width:5px;height:5px;border-radius:50%;background:#ff8c01;flex-shrink:0;transition:.25s;}
.umi-footer ul.ft-links a:hover::before{background:#fff;}
.umi-footer .ft-social-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.umi-footer .ft-social-row .ft-social-icon{width:32px;height:32px;border-radius:50%;background:#ffffff;color:#0055b1 !important;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none !important;transition:.25s;box-shadow:0 4px 14px rgba(0,0,0,.2);}
.umi-footer .ft-social-row .ft-social-icon:hover{background:#ff8c01;color:#fff !important;transform:translateY(-3px) rotate(-6deg);}
.umi-footer .ft-social-row span{color:#dbe8f8;font-size:14px;}
.umi-footer .footer-bottom-bar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.15);padding:14px 40px;text-align:center;color:#bcd4ef;font-size:12.5px;}
@media(max-width:991px){
	.umi-footer .footer-inner{grid-template-columns:1fr 1fr;padding:20px 30px 20px;}
	.umi-footer .footer-skyline{display:none;}
}
@media(max-width:576px){
	.umi-footer .footer-inner{grid-template-columns:1fr;padding:16px 24px 16px;}
}