:root{
      --navy:#062d5c;
      --navy2:#001f49;
      --blue:#0c699c;
      --gold:#f0ba35;
      --gold2:#ffd96e;
      --white:#fff;
      --ink:#082e62;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Montserrat",Arial,sans-serif;
      color:#fff;
      background:#f6f9fc;
    }

    .jpm-header{
      position:relative;
      z-index:1000;
      width:100%;
      overflow:visible;
      box-shadow:0 4px 18px rgba(0,34,77,.12);
    }

    /* =========================
       ROW 1 - TOP CONTACT BAR
       ========================= */
    .topbar{
      position:relative;
      min-height:70px;
      display:flex;
      align-items:center;
      background:
        radial-gradient(circle at 30% 0%, rgba(75,191,226,.28), transparent 34%),
        radial-gradient(circle at 70% 100%, rgba(32,117,178,.30), transparent 34%),
        linear-gradient(100deg,#0c5c83 0%,#0a4775 45%,#062f63 72%,#062454 100%);
      overflow:hidden;
    }

    .topbar::before,
    .topbar::after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
      opacity:.2;
      filter:blur(.2px);
      animation:floatOrb 8s ease-in-out infinite;
    }
    .topbar::before{
      width:160px;height:160px;
      left:32%;top:-125px;
      border:1px solid rgba(255,255,255,.5);
    }
    .topbar::after{
      width:95px;height:95px;
      right:9%;bottom:-70px;
      border:1px solid rgba(255,212,93,.55);
      animation-delay:-3s;
    }

    @keyframes floatOrb{
      0%,100%{transform:translateY(0) scale(1)}
      50%{transform:translateY(10px) scale(1.05)}
    }

    .top-inner{
      position:relative;
      z-index:2;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .top-left,.top-right{
      display:flex;
      align-items:center;
      gap:30px;
      min-width:0;
    }

    .contact-item{
      display:inline-flex;
      align-items:center;
      gap:13px;
      color:#f4fbff;
      font-size:14px;
      font-weight:500;
      white-space:nowrap;
    }

    .contact-item .ico{
      width:33px;height:33px;
      display:grid;
      place-items:center;
      font-size:25px;
    }
    .contact-item.mail .ico,
    .contact-item.phone .ico{color:#ffc746}
    .contact-item.whatsapp .ico{color:#27db61}

    .contact-divider{
      width:1px;height:28px;
      background:rgba(255,255,255,.16);
    }

    .social-label{font-size:14px;font-weight:500;white-space:nowrap;color:#fff}
    .socials{display:flex;gap:14px;align-items:center}
    .social{
      width:39px;height:39px;
      display:grid;place-items:center;
      border-radius:50%;
      color:white;
      text-decoration:none;
      font-size:20px;
      box-shadow:0 4px 10px rgba(0,0,0,.12);
      transition:.25s ease;
    }
    .social:hover{transform:translateY(-3px) scale(1.05);color:white}
    .fb{background:#2e7be8}
    .ig{background:linear-gradient(135deg,#ffbf34,#ff1a6a 48%,#7738d8)}
    .yt{background:#f12626}
    .tw{background:#2da8e0}

    .motto{
      margin-left:90px;
      font-family:"Great Vibes",cursive;
      font-size:18px;
      color:#f8fbff;
      letter-spacing:.4px;
      white-space:nowrap;
      text-shadow:0 0 12px rgba(255,255,255,.15);
    }

    /* =========================
       ROW 2 - BRAND / ACTIONS
       ========================= */
    .brandband{
      position:relative;
 
background: linear-gradient(to bottom,  #e6e5e8 0%,#f2f1f5 16%,#f2f1f5 47%,#f2f1f5 84%,#d8d8d9 100%);  

      overflow:hidden;
    }

    /* decorative sweeping blue rays */
    .brandband::before{
 
      position:absolute;
      left:-7%;
      bottom:-46%;
      width:38%;
      height:135%;
      background:
        linear-gradient(19deg, transparent 0 25%, rgba(45,159,214,.27) 26% 30%, transparent 31% 43%, rgba(94,194,230,.20) 44% 48%, transparent 49%),
        radial-gradient(ellipse at 25% 50%,rgba(255,255,255,.95),transparent 55%);
      transform:rotate(-5deg);
      animation:rayShift 10s ease-in-out infinite alternate;
    }
    @keyframes rayShift{
      from{transform:rotate(-5deg) translateX(0)}
      to{transform:rotate(-3deg) translateX(10px)}
    }

    /* subtle world-map style dots */
    .world-dots{
      position:absolute;
      inset:8px 4% auto auto;
      width:580px;
      height:165px;
      opacity:.17;
      background-image:radial-gradient(circle,#55a9df 1.5px,transparent 1.6px);
      background-size:10px 10px;
      mask-image:linear-gradient(to left,black 45%,transparent 100%);
      -webkit-mask-image:linear-gradient(to left,black 45%,transparent 100%);
      transform:skewX(-6deg);
    }

    .gold-glow{
      position:absolute;
      width:220px;height:90px;
      right:4%;bottom:-28px;
      border-radius:50%;
      background:rgba(255,198,65,.28);
      filter:blur(26px);
      animation:pulseGlow 4s ease-in-out infinite;
    }
    @keyframes pulseGlow{
      50%{transform:scale(1.14);opacity:.65}
    }

    .dove{
      position:absolute;
      right:2.8%;
      top:15px;
      font-size:92px;
      color:#fff;
      transform:rotate(-15deg);
      filter:drop-shadow(0 6px 6px rgba(11,68,110,.14));
      opacity:.95;
      animation:doveFloat 4.5s ease-in-out infinite;
    }
    @keyframes doveFloat{
      0%,100%{transform:translateY(0) rotate(-15deg)}
      50%{transform:translateY(-7px) rotate(-12deg)}
    }

    .brand-inner{
 
      position:relative;
      z-index:3;
      display:grid;
      grid-template-columns:minmax(650px,1.45fr) minmax(720px,1fr);
      align-items:center;
      gap:34px;
      padding-top:16px;
      padding-bottom:16px;
    }

    .brand-left{
      display:flex;
      align-items:center;
      gap:28px;
      min-width:0;
    }

    .logo-shell{
      flex:0 0 135px;
      width:135px;height:135px;
      padding:7px;
      border-radius:50%;
      background:conic-gradient(from 30deg,#c89213,#ffdc70,#b9810d,#ffec9f,#c89213);
      box-shadow:0 0 0 7px rgba(255,255,255,.88),
                 0 10px 30px rgba(3,57,101,.18);
      animation:logoGlow 4s ease-in-out infinite;
    }
    @keyframes logoGlow{
      50%{box-shadow:0 0 0 7px rgba(255,255,255,.95),0 10px 34px rgba(3,57,101,.22),0 0 24px rgba(244,185,54,.32)}
    }

    .logo-shell img{
      width:100%;height:100%;
      object-fit:cover;
      border-radius:50%;
      display:block;
      background:#fff;
    }

    .brand-copy{
      min-width:0;
      flex:1;
      text-align:left;
      padding-right:4px;
    }

    .church-name{
      font-family:"Playfair Display",Georgia,serif;
      font-size:40px;
      line-height:.95;
      letter-spacing:1px;
      font-weight:800;
      color:#082c5c;
      text-transform:uppercase;
      margin:0 0 12px;
      white-space:nowrap;
      text-shadow:0 2px 0 #fff,0 4px 8px rgba(3,42,81,.06);
    }

    .church-subtitle{
      color:#0a3469;
      font-size:22px;
      font-weight:700;
      letter-spacing:10px;
      margin-bottom:14px;
      white-space:nowrap;
    }

    .gold-rule{
      position:relative;
      width:82%;
      height:2px;
      margin:0 0 8px;
      background:linear-gradient(90deg,transparent,#ad7a00 10%,#d5a227 48%,#ad7a00 90%,transparent);
    }
    .gold-rule::after{
      content:"";
      position:absolute;
      width:10px;height:10px;
      left:50%;top:50%;
      transform:translate(-50%,-50%) rotate(45deg);
      background:#f1bc39;
      box-shadow:0 0 0 4px rgba(255,212,84,.16);
    }

    .tagline{
      color:#225288;
      font-style:italic;
      font-size:21px;
      font-weight:500;
      word-spacing:6px;
      white-space:nowrap;
    }
    .tagline span{color:#0b315f;padding:0 8px}

    .brand-actions{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      align-items:center;
      padding-right:32px;
    }

    .action-card{
      min-height:82px;
      border-radius:5px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      text-decoration:none;
      padding:12px 18px;
      border:1px solid rgba(6,43,87,.18);
      box-shadow:0 8px 15px rgba(0,46,82,.18),inset 0 1px 0 rgba(255,255,255,.75);
      transition:.25s ease;
      overflow:hidden;
      position:relative;
    }
    .action-card::after{
      content:"";
      position:absolute;
      inset:-55% auto -55% -45%;
      width:36%;
      transform:rotate(18deg);
      background:rgba(255,255,255,.35);
      transition:.45s ease;
    }
    .action-card:hover{
      transform:translateY(-4px);
      box-shadow:0 12px 23px rgba(0,46,82,.22);
    }
    .action-card:hover::after{left:115%}

    .action-card .icon-wrap{
      width:51px;height:51px;
      flex:0 0 51px;
      display:grid;place-items:center;
      border-radius:50%;
      font-size:29px;
    }
    .action-card .txt{line-height:1.15}
    .action-card strong{
      display:block;
      color:#062b59;
      font-size:19px;
      font-weight:800;
      white-space:nowrap;
    }
    .action-card small{
      display:block;
      color:#233f5a;
      font-size:13px;
      margin-top:4px;
      white-space:nowrap;
    }
    .action-card.donate{
      background:linear-gradient(135deg,#ffe68a,#f1bb32);
    }
    .action-card.donate .icon-wrap{
      background:linear-gradient(145deg,#b97a00,#f6d462);
      color:#fff;
    }
    .action-card.prayer{
      background:linear-gradient(135deg,#c8f4ff,#8fd7f1);
    }
    .action-card.prayer .icon-wrap{
      color:#0a4c7d;
      background:rgba(255,255,255,.3);
    }
    .action-card.join{
      background:linear-gradient(135deg,#f5f7f9,#dce4e8);
    }
    .action-card.join .icon-wrap{
      color:#0b4d7d;
      background:rgba(255,255,255,.36);
    }

    /* =========================
       ROW 3 - NAVIGATION
       ========================= */
    .navband{
      position:relative;
      min-height:68px;
      background:
        linear-gradient(90deg,#042d5d 0%,#073a67 36%,#075883 54%,#062f60 82%,#042656 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .navbar{padding:0}
    .navbar .container-fluid{padding:0}
    .navbar-nav{min-height:68px;align-items:stretch}
    .nav-item{display:flex;align-items:stretch}
    .nav-link{
      color:#fff!important;
      display:flex;
      align-items:center;
      gap:7px;
      padding:0 31px!important;
      font-size:16px;
      font-weight:500;
      border-left:1px solid rgba(255,255,255,.035);
      transition:.22s ease;
    }
    .nav-link:hover{background:rgba(255,255,255,.08)}
    .nav-item.active .nav-link{
      color:#07315e!important;
      background:linear-gradient(#ffe174,#eeb432);
      font-weight:600;
      box-shadow:inset 0 -4px 0 rgba(163,104,0,.18);
    }
    .nav-item.active .nav-link i{font-size:21px}

    .contact-nav .nav-link{padding-inline:38px!important}
    .search-box{
      width:62px;
      min-height:68px;
      display:grid;
      place-items:center;
      color:#fff;
      text-decoration:none;
      font-size:20px;
      background:rgba(21,105,151,.36);
      border-left:1px solid rgba(255,255,255,.08);
    }
    .search-box:hover{background:rgba(30,126,179,.55);color:#fff}

    .navbar-toggler{
      border:0;
      box-shadow:none!important;
      padding:0;
      color:white;
      font-size:25px;
    }

    .mobile-brand{display:none}

    .offcanvas{
      background:linear-gradient(180deg,#052d5d,#06224a);
      color:white;
      width:min(88vw,360px)!important;
    }
    .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12)}
    .offcanvas .nav-link{
      min-height:54px;
      padding:0 18px!important;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .offcanvas .nav-item.active .nav-link{border-radius:8px}
    .offcanvas .dropdown-menu{
      position:static!important;
      transform:none!important;
      width:100%;
      background:#0a396a;
      border:0;
      border-radius:8px;
      padding:6px;
      margin:4px 0 10px;
    }
    .offcanvas .dropdown-item{
      color:white;
      border-radius:6px;
      padding:10px 12px;
    }
    .offcanvas .dropdown-item:hover{background:rgba(255,255,255,.08)}

    /* desktop dropdown */
    @media (min-width:1200px){
      .navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0}
      /* Keep each desktop dropdown directly under its nav item */
      .navbar .nav-item.dropdown{
        position:relative;
      }
      .navbar .nav-item.dropdown > .dropdown-menu{
        top:100% !important;
        left:0 !important;
        right:auto !important;
        margin-top:0 !important;
        transform:none !important;
        border:0;
        border-radius:0 0 10px 10px;
        box-shadow:0 12px 30px rgba(0,34,72,.18);
        background:#fff;
        padding:8px;
        z-index:1100;
      }
      .dropdown-item{
        color:#0b3764;
        border-radius:6px;
        padding:10px 12px;
        font-weight:500;
      }
      .dropdown-item:hover{background:#edf7ff;color:#0a5d91}
    }

    /* =========================
       RESPONSIVE
       ========================= */

    /* BDTM large-screen alignment fix: reserve a clean column for the 3 buttons */
    @media (min-width:1601px){
      .brand-inner{
        grid-template-columns:minmax(0,1.55fr) minmax(650px,.95fr);
        gap:42px;
      }
      .brand-left{min-width:0;}
      .brand-copy{min-width:0;padding-right:0;}
      .church-name{font-size:34px;white-space:nowrap;}
      .church-subtitle{
        font-size:15px;
        letter-spacing:3px;
        line-height:1.35;
        white-space:normal;
        max-width:760px;
        margin-left:0;
        margin-right:0;
      }
      .tagline{font-size:18px;word-spacing:3px;}
      .brand-actions{
        position:relative;
        z-index:5;
        width:100%;
        min-width:0;
        padding-right:20px;
        gap:14px;
      }
      .action-card{padding:12px 10px;}
      .action-card strong{font-size:16px;}
      .action-card small{font-size:11px;}
    }

    @media (max-width:1600px){
      .church-name{font-size:48px}
      .church-subtitle{font-size:14px;letter-spacing:3px;white-space:normal;line-height:1.35}
      .tagline{font-size:18px}
      .brand-inner{grid-template-columns:minmax(620px,1.35fr) minmax(600px,1fr)}
      .logo-shell{width:170px;height:170px;flex-basis:170px}
      .brand-actions{gap:12px;padding-right:18px}
      .action-card{padding:12px 12px}
      .action-card strong{font-size:17px}
      .nav-link{padding:0 21px!important}
      .motto{margin-left:35px}
    }

    @media (max-width:1199.98px){
      .topbar{min-height:64px}
      .top-inner{gap:10px}
      .top-left,.top-right{gap:14px}
      .contact-divider,.motto{display:none}
      .social-label{display:none}

      .brandband,.brand-inner{min-height:auto}
      .brand-inner{
        grid-template-columns:1fr;
        gap:13px;
        padding:18px 20px 20px;
      }
      .brand-left{justify-content:flex-start}
      .logo-shell{width:166px;height:166px;flex-basis:166px}
      .church-name{font-size:42px}
      .church-subtitle{font-size:15px;letter-spacing:6px}
      .tagline{font-size:16px}
      .brand-actions{
        width:min(850px,100%);
        margin:0 auto;
        padding:0;
      }
      .action-card{min-height:70px}
      .dove{font-size:70px;top:10px}
      .world-dots{width:420px}

      .navband{min-height:64px;padding:0 16px}
      .mobile-brand{
        display:flex;
        align-items:center;
        gap:10px;
        color:white;
        font-weight:700;
        font-size:14px;
      }
      .mobile-brand img{
        width:42px;height:42px;border-radius:50%;
        border:2px solid #e7bd50;
      }
      .mobile-tools{
        min-height:64px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
      }
      .mobile-search{
        color:white;text-decoration:none;font-size:20px;
        width:42px;height:42px;display:grid;place-items:center;
        border-radius:8px;background:rgba(255,255,255,.08);
      }
    }

    @media (max-width:767.98px){
      .topbar{padding:9px 0}
      .top-inner{
        flex-direction:column;
        align-items:stretch;
        gap:7px;
      }
      .top-left,.top-right{
        justify-content:space-between;
        width:100%;
      }
      .top-left{gap:8px}
      .top-right{justify-content:flex-end}
      .contact-item{
        font-size:11px;
        gap:7px;
        min-width:0;
      }
      .contact-item.mail{flex:1}
      .contact-item.mail span:last-child{
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .contact-item .ico{
        width:24px;height:24px;font-size:18px;
      }
      /* Keep WhatsApp CTA neat and visible on mobile */
      .contact-item.whatsapp{
        flex:0 0 auto;
        gap:6px;
        padding:5px 9px 5px 6px;
        border-radius:999px;
        background:rgba(37,211,102,.12);
        border:1px solid rgba(61,232,123,.28);
        color:#fff;
        line-height:1;
      }
      .contact-item.whatsapp .ico{
        width:24px;
        height:24px;
        font-size:20px;
        color:#25D366;
      }
      .contact-item.whatsapp span:last-child{
        display:inline-block;
        font-size:10px;
        font-weight:700;
        white-space:nowrap;
      }
      .social-label{display:inline-block;font-size:11px;font-weight:600;white-space:nowrap;margin-right:2px;color:#fff}
      .top-right{justify-content:flex-end;align-items:center;gap:8px;}
      .socials{gap:8px}
      .social{width:31px;height:31px;font-size:15px}

      .brand-inner{padding:13px 12px 15px}
      .brand-left{
        gap:12px;
        align-items:center;
      }
      .logo-shell{
        width:92px;height:92px;flex:0 0 92px;
        padding:4px;
        box-shadow:0 0 0 4px rgba(255,255,255,.9),0 6px 18px rgba(3,57,101,.16);
      }
      .brand-copy{text-align:left}
      .church-name{
        font-size:24px;
        line-height:1.06;
        white-space:normal;
        margin-bottom:6px;
      }
      .church-subtitle{
        font-size:9px;
        letter-spacing:3px;
        margin-bottom:7px;
      }
      .gold-rule{width:100%;margin-bottom:7px}
      .tagline{
        font-size:11px;
        white-space:normal;
        word-spacing:0;
        line-height:1.35;
      }
      .tagline span{padding:0 3px}
      .world-dots{width:260px;height:110px;right:-40px}
      .dove{font-size:46px;right:1%;top:7px;opacity:.72}

      .brand-actions{
        grid-template-columns:repeat(3,1fr);
        gap:6px;
      }
      .action-card{
        min-height:58px;
        border-radius:9px;
        padding:7px 6px;
        gap:6px;
      }
      .action-card .icon-wrap{
        width:30px;height:30px;flex-basis:30px;font-size:17px;
      }
      .action-card strong{font-size:11px}
      .action-card small{font-size:8px;margin-top:2px}
      .navband{padding:0 12px}
      .mobile-brand{font-size:12px}
      .mobile-brand img{width:38px;height:38px}
    }

    @media (max-width:479.98px){
      .top-left{flex-wrap:wrap}
      .contact-item.mail{width:100%;flex-basis:100%}
      .contact-item.phone{flex:1}
      .contact-item.whatsapp{padding:4px 8px 4px 5px}
      .contact-item.whatsapp span:last-child{font-size:9px}
      .brand-left{align-items:flex-start}
      .logo-shell{width:79px;height:79px;flex-basis:79px}
      .church-name{font-size:20px}
      .church-subtitle{font-size:7px;letter-spacing:2px}
      .tagline{font-size:9px}
      .brand-actions{gap:4px}
      .action-card{padding:6px 4px;gap:3px}
      .action-card .icon-wrap{display:none}
      .action-card strong{font-size:11px}
      .action-card small{font-size:7px}
    }
/* =========================================================
   MOBILE OFFCANVAS DROPDOWN ALIGNMENT FIX
   ========================================================= */
@media (max-width:1199.98px){
  #mobileNav .offcanvas-body{
    padding:12px !important;
    overflow-y:auto;
    overflow-x:hidden;
  }

  #mobileNav .navbar-nav{
    width:100%;
    min-height:0;
    align-items:stretch;
    margin:0;
    padding:0;
  }

  #mobileNav .nav-item{
    display:block;
    width:100%;
    margin:0;
  }

  #mobileNav .nav-link{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 14px !important;
    margin:0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
  }

  #mobileNav .dropdown-toggle{
    position:relative;
    padding-right:42px !important;
  }

  #mobileNav .dropdown-toggle::after{
    position:absolute;
    right:15px;
    top:50%;
    margin:0;
    transform:translateY(-50%);
    transition:transform .22s ease;
  }

  #mobileNav .dropdown-toggle.show::after{
    transform:translateY(-50%) rotate(180deg);
  }

  #mobileNav .dropdown-menu{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 0 8px !important;
    padding:5px 0 !important;
    border:0 !important;
    border-radius:0 0 8px 8px;
    background:#0a396a;
    box-shadow:none !important;
  }

  #mobileNav .dropdown-menu.show{
    display:block;
  }

  #mobileNav .dropdown-item{
    width:100%;
    display:block;
    padding:11px 16px 11px 30px !important;
    margin:0;
    color:#fff;
    white-space:normal;
    line-height:1.35;
    text-align:left;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.055);
  }

  #mobileNav .dropdown-item:last-child{
    border-bottom:0;
  }

  #mobileNav .dropdown-item:hover,
  #mobileNav .dropdown-item:focus,
  #mobileNav .dropdown-item.active{
    color:#fff;
    background:rgba(255,255,255,.09);
  }
}

/* =========================================================
   MOBILE NAV - SMOOTH SLOW DROPDOWN
   Bootstrap toggles only the .show class; keep menu rendered
   so height/opacity can animate smoothly.
   ========================================================= */
@media (max-width:1199.98px){
  #mobileNav .dropdown-menu,
  #mobileNav .dropdown-menu:not(.show){
    display:block !important;
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    pointer-events:none;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:translateY(-6px) !important;
    transform-origin:top;
    transition:
      max-height .70s cubic-bezier(.25,.8,.25,1),
      opacity .45s ease,
      transform .60s cubic-bezier(.25,.8,.25,1),
      padding .55s ease,
      margin .55s ease,
      visibility 0s linear .70s;
  }

  #mobileNav .dropdown-menu.show{
    display:block !important;
    max-height:720px;
    opacity:1;
    visibility:visible;
    overflow:hidden;
    pointer-events:auto;
    padding-top:5px !important;
    padding-bottom:5px !important;
    margin-top:2px !important;
    margin-bottom:8px !important;
    transform:translateY(0) !important;
    transition:
      max-height .80s cubic-bezier(.25,.8,.25,1),
      opacity .55s ease .06s,
      transform .70s cubic-bezier(.25,.8,.25,1),
      padding .60s ease,
      margin .60s ease,
      visibility 0s linear 0s;
  }

  #mobileNav .dropdown-toggle::after{
    transition:transform .55s cubic-bezier(.25,.8,.25,1) !important;
  }

  #mobileNav .dropdown-item{
    transition:background-color .25s ease, padding-left .25s ease;
  }

  #mobileNav .dropdown-item:active,
  #mobileNav .dropdown-item:focus{
    padding-left:34px !important;
  }
}