/* Theme Name: Ulatus Translation Blog Theme URI: https://www.ulatus.com/translation-blog/ Author: Ranjeet Bhonsle Description: Ulatus—a market leader in professional language translation services—combines industry expertise with innovative technology to help you communicate effortlessly. Version: 1.0 */
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     color: #111827;
     background: #fff;
     -webkit-font-smoothing: antialiased;
}
 a {
     text-decoration: none;
     color: inherit;
}
 img {
     display: block;
     max-width: 100%;
}
 button {
     cursor: pointer;
     font-family: inherit;
}
 :root {
     --blue: #0066FF;
     --blue-dark: #004ECC;
     --blue-light:#EBF3FF;
     --navy: #0A1628;
     --text: #111827;
     --text-2: #4B5563;
     --text-3: #9CA3AF;
     --border: #E5E7EB;
     --bg-soft: #F9FAFB;
     --nav-h: 64px;
}
 .container {
     max-width: 1330px;
     margin: 0 auto;
     padding: 0 32px;
     width: 100%;
}
 .single-post .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 32px;
     width: 100%;
}
/* ── NAV ─────────────────────────────────── */
 .nav {
     position: sticky;
     top: 0;
     z-index: 200;
     height: var(--nav-h);
     background: #fff;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     padding: 10px 0;
     height: auto;
}
 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
}
 .nav-logo {
     font-size: 18px;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -.5px;
     display: flex;
     align-items: center;
     gap: 6px;
}
 .nav-logo-mark {
     width: 28px;
     height: 28px;
     background: var(--blue);
     border-radius: 6px;
     display: grid;
     place-items: center;
}
 .nav-logo-mark svg {
     fill: none;
     stroke: #fff;
     stroke-width: 1.8;
     stroke-linecap: round;
}
 .nav-links {
     display: flex;
     gap: 24px;
     list-style: none;
}
 .nav-links a {
     font-size: 13.5px;
     font-weight: 500;
     color: var(--text-2);
     transition: color .15s;
}
 .nav-links a:hover {
     color: var(--text);
}
 .nav-cta {
     background: #029dcd;
     color: #fff;
     border: none;
     padding: 9px 20px;
     border-radius: 6px;
     font-size: 13.5px;
     font-weight: 600;
     transition: background .15s;
     box-shadow: 0 4px 0 #0281a8;
}
 .nav-cta:hover {
     background: #0281a8;
}
/* ── PAGE HEADER ─────────────────────────── */
 .page-header {
     padding: 44px 0 0;
     background: #fff;
}
 .page-header-inner {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--border);
}
 .page-header h1 {
     font-size: 28px;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -.6px;
     margin-bottom: 6px;
}
 .page-header p {
     font-size: 14px;
     color: var(--text-3);
}
 .header-search {
     display: flex;
     align-items: center;
     border: 1.5px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
     background: #fff;
}
 .header-search input {
     border: none;
     outline: none;
     padding: 9px 14px;
     font-size: 13.5px;
     font-family: inherit;
     color: var(--text);
     width: 220px;
     background: transparent;
}
 .header-search input::placeholder {
     color: var(--text-3);
}
 .header-search button {
     border: none;
     background: var(--bg-soft);
     padding: 9px 14px;
     color: var(--text-2);
     border-left: 1.5px solid var(--border);
     transition: background .15s;
}
 .header-search button:hover {
     background: #f0f2f5;
}
/* ── CATEGORY FILTER TABS ────────────────── */
 .cat-filter {
     position: sticky;
     top: var(--nav-h);
     z-index: 100;
     background: #fff;
     border-bottom: 1px solid var(--border);
}
 .cat-filter-inner {
     display: flex;
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
}
 .cat-filter-inner::-webkit-scrollbar {
     display: none;
}
 .cat-tab {
     flex-shrink: 0;
     padding: 14px 18px;
     font-size: 13.5px;
     font-weight: 500;
     color: var(--text-3);
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
     cursor: pointer;
     white-space: nowrap;
     transition: color .15s, border-color .15s;
     margin-bottom: -1px;
}
 .cat-tab:hover {
     color: var(--text-2);
}
 .cat-tab.active {
     color: var(--text);
     font-weight: 600;
     border-bottom-color: var(--blue);
}
/* ── FEATURED ARTICLE ────────────────────── */
 .featured-wrap {
     padding: 40px 0 0;
}
 .featured-card {
     display: grid;
     grid-template-columns: 1fr 1fr;
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
     background: #fff;
     transition: box-shadow .2s;
}
 .featured-card:hover {
     box-shadow: 0 8px 40px rgba(0,0,0,0.09);
}
 .feat-vis {
     background: linear-gradient(145deg, #0A1628 0%, #0D2D6B 55%, #0066FF 100%);
     position: relative;
     overflow: hidden;
     min-height: 360px;
     order: 2;
}
 .feat-vis::before {
     content: '';
     position: absolute;
     width: 340px;
     height: 340px;
     border-radius: 50%;
     border: 60px solid rgba(255,255,255,.06);
     right: -80px;
     top: -80px;
}
 .feat-vis::after {
     content: '';
     position: absolute;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     border: 36px solid rgba(255,255,255,.07);
     left: -50px;
     bottom: -50px;
}
 .feat-vis-center {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .feat-vis-center img{
     height: 100%;
     width: 100%;
     object-fit:cover;
}
 .feat-vis-center svg {
     opacity: .1;
}
 .feat-body {
     padding: 48px 44px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     order: 1;
}
 .feat-body h2 {
     font-size: 26px;
     font-weight: 800;
     color: var(--text);
     line-height: 1.3;
     letter-spacing: -.5px;
     margin-bottom: 14px;
}
 .feat-body .excerpt {
     font-size: 16px;
     color: #374151;
     line-height: 1.75;
     margin-bottom: 24px;
}
 .feat-meta {
     font-size: 12.5px;
     color: var(--text-3);
     display: flex;
     gap: 10px;
     margin-bottom: 26px;
}
 .btn-read {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     align-self: flex-start;
     background:#029dcd;
     color: #fff;
     padding: 11px 22px;
     border-radius: 7px;
     font-size: 13.5px;
     font-weight: 600;
     border: none;
     transition: background .15s;
     box-shadow: 0 4px 0 #0281a8;
}
 .btn-read:hover {
     background:#0281a8;
}
 .btn-read svg {
     transition: transform .15s;
}
 .btn-read:hover svg {
     transform: translateX(3px);
}
/* ── ARTICLES GRID ───────────────────────── */
 .home .articles-wrap {
     padding: 95px 0 20px;
}
 .articles-wrap {
     padding: 30px 0 20px;
}
 .art-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 64px 64px;
}
 .sec-hd h2{
     margin-bottom: 30px;
}
/* ── ARTICLE ITEM (FRAMELESS) ────────────── */
 .art-item {
     display: flex;
     flex-direction: column;
}
 .art-item-vis {
     height: 196px;
     border-radius: 10px;
     overflow: hidden;
     margin-bottom: 16px;
     position: relative;
     transition: box-shadow .2s, transform .2s;
}
 .art-item:hover .art-item-vis {
     box-shadow: 0 6px 28px rgba(0,0,0,0.13);
     transform: translateY(-2px);
}
 .art-item h3 {
     font-size: 20px;
     font-weight: 700;
     color: var(--text);
     line-height: 1.45;
     letter-spacing: -.2px;
     margin-bottom: 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: color .15s;
}
 .art-item:hover h3 {
     color: var(--blue);
}
 .art-excerpt {
     font-size: 16px;
     color: #374151;
     line-height: 1.6;
     margin-bottom: 12px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     flex: 1;
}
 .art-meta {
     font-size: 12px;
     color: var(--text-3);
     display: flex;
     align-items: center;
     gap: 8px;
}
 .art-meta .sep {
     color: var(--border);
}
 .art-rt {
     display: flex;
     align-items: center;
     gap: 4px;
}
 .art-rt svg {
     flex-shrink: 0;
}
/* Empty state */
 .empty-state {
     display: none;
     grid-column: 1 / -1;
     padding: 64px 0;
     text-align: center;
}
 .empty-state.visible {
     display: block;
}
 .empty-state p {
     font-size: 15px;
     color: var(--text-3);
}
/* ── ILLUSTRATION BACKGROUNDS ────────────── */
 .ci {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
}
 .ci::before, .ci::after {
     content: '';
     position: absolute;
     border-radius: 50%;
}
 .ci::before {
     width: 170px;
     height: 170px;
     right: -44px;
     bottom: -44px;
}
 .ci::after {
     width: 80px;
     height: 80px;
     left: -16px;
     top: -16px;
}
 .ci-icon {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ci-icon svg {
     opacity: .18;
}
 .ci-icon img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .ci-1 {
     background: linear-gradient(145deg,#EBF5FF,#C7DEFF);
}
 .ci-1::before {
     border:32px solid rgba(0,102,255,.10);
}
 .ci-1::after {
     border:18px solid rgba(0,102,255,.08);
}
 .ci-2 {
    /* background: linear-gradient(145deg,#0A1628,#0D2D6B);
     */
}
 .ci-2::before {
     border:32px solid rgba(255,255,255,.07);
}
 .ci-2::after {
     border:18px solid rgba(255,255,255,.06);
}
 .ci-3 {
     background: linear-gradient(145deg,#EEF2FF,#C7D2FE);
}
 .ci-3::before {
     border:32px solid rgba(99,102,241,.12);
}
 .ci-3::after {
     border:18px solid rgba(99,102,241,.09);
}
 .ci-4 {
     background: linear-gradient(145deg,#F0F9FF,#BAE6FD);
}
 .ci-4::before {
     border:32px solid rgba(14,165,233,.12);
}
 .ci-4::after {
     border:18px solid rgba(14,165,233,.09);
}
 .ci-5 {
     background: linear-gradient(145deg,#1E3A8A,#1D4ED8);
}
 .ci-5::before {
     border:32px solid rgba(255,255,255,.08);
}
 .ci-5::after {
     border:18px solid rgba(255,255,255,.06);
}
 .ci-6 {
     background: linear-gradient(145deg,#0369A1,#0EA5E9);
}
 .ci-6::before {
     border:32px solid rgba(255,255,255,.10);
}
 .ci-6::after {
     border:18px solid rgba(255,255,255,.08);
}
 .ci-7 {
     background: linear-gradient(145deg,#DBEAFE,#93C5FD);
}
 .ci-7::before {
     border:32px solid rgba(37,99,235,.10);
}
 .ci-7::after {
     border:18px solid rgba(37,99,235,.07);
}
 .ci-8 {
     background: linear-gradient(145deg,#312E81,#4338CA);
}
 .ci-8::before {
     border:32px solid rgba(255,255,255,.08);
}
 .ci-8::after {
     border:18px solid rgba(255,255,255,.06);
}
 .ci-9 {
     background: linear-gradient(145deg,#E0F2FE,#7DD3FC);
}
 .ci-9::before {
     border:32px solid rgba(2,132,199,.12);
}
 .ci-9::after {
     border:18px solid rgba(2,132,199,.09);
}
 .ci-10 {
     background: linear-gradient(145deg,#1E40AF,#3B82F6);
}
 .ci-10::before {
     border:32px solid rgba(255,255,255,.09);
}
 .ci-10::after {
     border:18px solid rgba(255,255,255,.07);
}
 .ci-11 {
     background: linear-gradient(145deg,#F5F3FF,#DDD6FE);
}
 .ci-11::before {
     border:32px solid rgba(124,58,237,.10);
}
 .ci-11::after {
     border:18px solid rgba(124,58,237,.07);
}
 .ci-12 {
     background: linear-gradient(145deg,#0C4A6E,#0369A1);
}
 .ci-12::before {
     border:32px solid rgba(255,255,255,.08);
}
 .ci-12::after {
     border:18px solid rgba(255,255,255,.06);
}
/* ── CATEGORY TAGS ───────────────────────── */
 .topic-tag {
     display: inline-block;
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .09em;
     text-transform: uppercase;
     padding: 4px 11px;
     border-radius: 100px;
     margin-bottom: 10px;
     width: max-content;
}
 .tag-book {
     background:#EBF3FF;
     color:#0052CC;
}
 .tag-machine {
     background:#EEF2FF;
     color:#1E40AF;
}
 .tag-medical {
     background:#FEF2F2;
     color:#B91C1C;
}
 .tag-document {
     background:#FFF7ED;
     color:#92400E;
}
 .tag-business {
     background:#F0FDF4;
     color:#166534;
}
 .tag-legal {
     background:#FDF2F8;
     color:#9D174D;
}
 .tag-elearning {
     background:#FFF7ED;
     color:#C2410C;
}
 .tag-interpretation{
     background:#FAF5FF;
     color:#7E22CE;
}
 .tag-game {
     background:#F0FDF4;
     color:#065F46;
}
 .tag-app {
     background:#FEF2F2;
     color:#B91C1C;
}
 .tag-government {
     background:#F0FDF4;
     color:#14532D;
}
 .tag-website {
     background:#EBF3FF;
     color:#1D4ED8;
}
 .tag-translation {
     background:#F9FAFB;
     color:#374151;
}
 .tag-marketing {
     background:#FAF5FF;
     color:#6B21A8;
}
/* ── NEWSLETTER ──────────────────────────── */
 .nl-section {
     background: var(--blue);
     padding: 56px 0;
     background: linear-gradient(to left, #0063bd, #24b8e4);
}
 .nl-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 48px;
}
 .nl-text h2 {
     font-size: 24px;
     font-weight: 800;
     color: #fff;
     letter-spacing: -.4px;
     margin-bottom: 8px;
}
 .nl-text p {
     font-size: 14px;
     color: rgba(255,255,255,.7);
}
 .nl-form {
     display: flex;
     flex-shrink: 0;
     min-width: 380px;
     background: rgba(255,255,255,.12);
     border: 1.5px solid rgba(255,255,255,.2);
     border-radius: 8px;
}
 .nl-form input {
     flex: 1;
     background: transparent;
     border: none;
     outline: none;
     padding: 13px 18px;
     font-size: 13.5px;
     font-family: inherit;
     color: #fff;
}
 .nl-form input::placeholder {
     color: rgba(255,255,255,.5);
}
 .nl-form input[type="submit"] {
     background: #fff;
     color: var(--blue);
     border: none;
     padding: 14px;
     font-size: 13.5px;
     font-weight: 700;
     font-family: inherit;
     white-space: nowrap;
     transition: background .15s;
     cursor: pointer;
}
 .wpcf7-not-valid-tip{
     position: absolute;
     bottom: -35px;
}
 .wpcf7-spinner {
     display: none !important;
}
 .nl-form input[type="submit"]:hover {
     background: #f0f4ff;
}
/* ── PAGINATION ──────────────────────────── */
 .pag-wrap {
     padding: 48px 0 64px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
}
 .pag-btn {
     width: 38px;
     height: 38px;
     border-radius: 7px;
     border: 1.5px solid var(--border);
     background: #fff;
     font-size: 13.5px;
     font-weight: 500;
     color: var(--text-2);
     display: grid;
     place-items: center;
     cursor: pointer;
     transition: all .15s;
}
 .pag-btn:hover {
     border-color: var(--text-2);
     color: var(--text);
}
 .pag-btn.active {
     background: var(--blue);
     border-color: var(--blue);
     color: #fff;
}
 .pag-dots {
     color: var(--text-3);
     padding: 0 4px;
}
/* ── FOOTER ──────────────────────────────── */
 footer {
     background: var(--navy);
     padding: 56px 0 28px;
}
 .ft-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
     padding-bottom: 44px;
     border-bottom: 1px solid rgba(255,255,255,.07);
}
 .ft-logo {
     font-size: 18px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 12px;
     letter-spacing: -.4px;
}
 .ft-logo span {
     color: var(--blue);
}
 .ft-desc {
     font-size: 13.5px;
     color: #6B88A8;
     line-height: 1.7;
     max-width: 260px;
}
 .ft-col h4 {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: #fff;
     margin-bottom: 16px;
}
 .ft-col ul {
     list-style: none;
}
 .ft-col li {
     margin-bottom: 10px;
}
 .ft-col a {
     font-size: 13.5px;
     color: #6B88A8;
     transition: color .15s;
}
 .ft-col a:hover {
     color: #fff;
}
 .ft-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 24px;
     font-size: 12.5px;
     color: #6B88A8;
}
/* ── HAMBURGER ───────────────────────────── */
 .nav-hamburger {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 36px;
     height: 36px;
     gap: 5px;
     border: none;
     background: none;
     padding: 4px;
     cursor: pointer;
     flex-shrink: 0;
}
 .nav-hamburger span {
     display: block;
     width: 22px;
     height: 2px;
     background: var(--text);
     border-radius: 2px;
     transition: transform .2s, opacity .2s;
}
 .nav-hamburger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
}
 .nav-hamburger.open span:nth-child(2) {
     opacity: 0;
}
 .nav-hamburger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
}
/* ── RESPONSIVE ─────────────────────────── */
 @media (max-width: 1024px) {
     .art-grid {
         grid-template-columns: repeat(2, 1fr);
    }
     .ft-grid {
         grid-template-columns: 1fr 1fr;
         gap: 32px;
    }
}
 @media (max-width: 768px) {
     .container {
         padding: 0 20px;
    }
    /* Nav */
     .nav-hamburger {
         display: flex;
    }
     .nav-cta {
         display: none;
    }
     .nav-links {
         display: none;
         position: fixed;
         top: var(--nav-h);
         left: 0;
         right: 0;
         background: #fff;
         flex-direction: column;
         padding: 8px 20px 20px;
         gap: 0;
         border-bottom: 1px solid var(--border);
         box-shadow: 0 4px 20px rgba(0,0,0,.08);
         z-index: 150;
    }
     .nav-links.open {
         display: flex;
    }
     .nav-links li {
         padding: 12px 0;
         border-bottom: 1px solid var(--border);
    }
     .nav-links li:last-child {
         border-bottom: none;
    }
     .nav-links a {
         font-size: 15px;
         color: var(--text);
    }
    /* Page header */
     .page-header {
         padding: 28px 0 0;
    }
     .page-header-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 16px;
         padding-bottom: 20px;
    }
     .page-header h1 {
         font-size: 22px;
    }
     .header-search {
         width: 100%;
    }
     .header-search input {
         width: 100%;
         flex: 1;
    }
    /* Featured */
     .featured-wrap {
         padding: 24px 0 0;
    }
     .featured-card {
         grid-template-columns: 1fr;
    }
     .feat-vis {
         min-height: 200px;
         order: 1;
    }
     .feat-body {
         padding: 28px 24px;
         order: 2;
    }
     .feat-body h2 {
         font-size: 20px;
    }
     .feat-body .excerpt {
         font-size: 14px;
    }
    /* Articles grid */
     .articles-wrap {
         padding: 24px 0 48px;
    }
     .art-grid {
         grid-template-columns: 1fr;
         gap: 28px;
    }
    /* Newsletter */
     .nl-section {
         padding: 40px 0;
    }
     .nl-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 24px;
    }
     .nl-text h2 {
         font-size: 20px;
    }
     .nl-form {
         min-width: 0;
         width: 100%;
         flex-direction: column;
         border-radius: 8px;
         overflow: visible;
         background: none;
         border: none;
         gap: 10px;
    }
     .nl-form input {
         flex: none;
         width: 100%;
         background: rgba(255,255,255,.12);
         border: 1.5px solid rgba(255,255,255,.2);
         border-radius: 8px;
         padding: 13px 18px;
         font-size: 14px;
         color: #fff;
    }
     .nl-form button {
         width: 100%;
         padding: 13px 18px;
         border-radius: 8px;
         font-size: 14px;
         border: none;
    }
    /* Pagination */
     .pag-wrap {
         padding: 32px 0 48px;
         flex-wrap: wrap;
    }
    /* Footer */
     .ft-grid {
         grid-template-columns: 1fr 1fr;
         gap: 28px;
    }
     .ft-bottom {
         flex-direction: column;
         gap: 8px;
         text-align: center;
    }
}
 @media (max-width: 480px) {
     .art-grid {
         grid-template-columns: 1fr;
    }
     .ft-grid {
         grid-template-columns: 1fr;
    }
     .feat-body h2 {
         font-size: 18px;
    }
     .page-header h1 {
         font-size: 20px;
    }
}
 .nav-logo img{
     width: 100%;
     height: auto;
}
 .nav-links > li {
     position: relative;
     padding-bottom: 20px;
}
/* Dropdown */
 .nav-links .sub-menu {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 220px;
     background: #fff;
     list-style: none;
     padding: 0;
     margin: 0;
     display: none;
     box-shadow: 0 2px 10px rgba(0,0,0,.15);
     z-index: 999;
     width: 350px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s ease;
     transition-delay: 0.2s;
     /* background-color: #A6D4E9; */
     border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.08), 0 0 25px rgba(0, 0, 0, 0.30);

}


  /* Top Arrow */
 .nav-links .sub-menu::before{
    content: "";
    position: absolute;
    top: -10px;
    left: 50px; /* Adjust arrow position */
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.05);
}

 .nav-links .sub-menu li a {
     display: block;
     padding: 12px 15px;
     color: #333;
     text-decoration: none;
}
 .nav-links .sub-menu li a::before {
     content: "\f105";
    /* fa-angle-right */
     font-family: "FontAwesome";
     margin-right: 8px;
     color:#999999;
}
 .nav-links .sub-menu li:hover{
     
     border-radius: 10px;
}
/* Show Dropdown */
 .nav-links li:hover > .sub-menu {
     display: block;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}
/* Second Level Dropdown */
 .nav-links .sub-menu .sub-menu {
     left: 100%;
     top: 0;
}
 .menu-item-has-children > a::after {
     content: "\f107";
     font-size: 12px;
     margin-left: 6px;
     font: normal 14px / 1 FontAwesome;
}
/* Single page */
/* ─── ARTICLE HEADER ──────────────────────────── */
 .art-hdr {
     padding: 44px 0 0;
     background: #fff;
}
 .breadcrumb {
     display: flex;
     align-items: center;
     gap: 25px;
     font-size: 12px;
     color: var(--text-3);
     margin-bottom: 22px;
}
 .breadcrumb li:first-child::marker {
     content: '';
}
 .breadcrumb a {
     color: var(--text-2);
     transition: color .15s;
}
 .breadcrumb a:hover {
     color: var(--blue);
}
 .bc-sep {
     font-size: 11px;
}
 .topic-tag {
     display: inline-block;
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     padding: 4px 11px;
     border-radius: 100px;
     background: #EBF3FF;
     color: #0052CC;
     margin-bottom: 16px;
}
 .art-hdr h1 {
     font-size: 36px;
     font-weight: 800;
     color: var(--text);
     line-height: 1.22;
     letter-spacing: -0.8px;
     max-width: 760px;
     margin-bottom: 20px;
}
 .art-meta {
     display: flex;
     align-items: center;
     gap: 18px;
     padding-bottom: 32px;
     border-bottom: 1px solid var(--border);
     font-size: 13px;
     color: var(--text-3);
     flex-wrap: wrap;
}
 .meta-item {
     display: flex;
     align-items: center;
     gap: 6px;
}
 .meta-item svg {
     flex-shrink: 0;
}
 .meta-divider {
     width: 1px;
     height: 14px;
     background: var(--border);
}
/* ─── ARTICLE IMAGE ───────────────────────────── */
 .art-img-wrap {
     background: #fff;
     padding: 28px 0 0;
}
 .art-img-container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 32px;
}
 .art-img-block {
     height: 400px;
     border-radius: 14px;
     overflow: hidden;
     position: relative;
     background: linear-gradient(145deg, #0A1628 0%, #0D2D6B 55%, #0066FF 100%);
}
 .art-img-center {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .art-img-center img{
     height: 100%;
     object-fit: cover;
}
 .art-img-center svg {
     opacity: 0.1;
}
/* ─── SUBSCRIBE BOX ───────────────────────────── */
 .sub-box {
     background: linear-gradient(to left, #0063bd, #24b8e4);
     border: none;
     border-radius: 12px;
     padding: 22px;
     margin-bottom: 16px;
     position: relative;
     overflow: hidden;
}
 .sub-box::before {
     content: '';
     position: absolute;
     width: 130px;
     height: 130px;
     border-radius: 50%;
     border: 24px solid rgba(255,255,255,0.08);
     right: -30px;
     top: -30px;
}
 .sub-lbl {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
     margin-bottom: 6px;
     position: relative;
}
 .sub-box h4 {
     font-size: 13.5px;
     font-weight: 700;
     color: #fff;
     line-height: 1.45;
     margin-bottom: 16px;
     position: relative;
}
 .sub-input {
     width: 100%;
     border: 1.5px solid rgba(255,255,255,0.25);
     border-radius: 7px;
     padding: 9px 12px;
     font-size: 13px;
     font-family: inherit;
     color: #fff;
     background: rgba(255,255,255,0.12);
     outline: none;
     transition: border-color .15s;
     margin-bottom: 10px;
     display: block;
     position: relative;
}
 .sub-input::placeholder {
     color: rgba(255,255,255,0.5);
}
 .sub-input:focus {
     border-color: rgba(255,255,255,0.5);
}
 .sub-box input[type="submit"] {
     width: 100%;
     background: #fff;
     color: var(--blue);
     border: none;
     padding: 10px;
     border-radius: 7px;
     font-size: 13px;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     transition: background .15s;
     position: relative;
}
 .sub-box .wpcf7-spinner{
     display: block !important;
}
 .sub-btn:hover {
     background: #f0f4ff;
}
 #wpcf7-f2857-o1 .wpcf7-response-output{
     margin: 0 0 10px 0;
     font-size: 12px;
}
/* ─── RECOMMENDED BLOGS ────────────────────────── */
 .rec-box {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 16px;
}
 .rec-lbl {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 14px;
}
 .rec-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
}
 .rec-item {
     display: flex;
     gap: 11px;
     align-items: flex-start;
     text-decoration: none;
     color: inherit;
}
 .rec-vis {
     width: 60px;
     height: 48px;
     border-radius: 7px;
     overflow: hidden;
     flex-shrink: 0;
     position: relative;
}
 .rec-vis img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .rv-a {
     background: linear-gradient(145deg,#EBF5FF,#C7DEFF);
}
 .rv-a::before {
     border: 12px solid rgba(0,102,255,.12);
}
 .rv-b {
     background: linear-gradient(145deg,#0C4A6E,#0369A1);
}
 .rv-b::before {
     border: 12px solid rgba(255,255,255,.10);
}
 .rv-c {
     background: linear-gradient(145deg,#DBEAFE,#93C5FD);
}
 .rv-c::before {
     border: 12px solid rgba(37,99,235,.12);
}
 .rec-body {
     flex: 1;
     min-width: 0;
}
 .rec-body h4 {
     font-size: 12.5px;
     font-weight: 600;
     color: var(--text);
     line-height: 1.5;
     margin-bottom: 5px;
     transition: color .15s;
}
 .rec-item:hover .rec-body h4 {
     color: var(--blue);
}
 .rec-meta {
     font-size: 11px;
     color: var(--text-3);
}
/* ─── ARTICLE LAYOUT ──────────────────────────── */
 .art-layout {
     max-width: 1100px;
     margin: 0 auto;
     padding: 56px 32px 80px;
     display: grid;
     grid-template-columns: 1fr 260px;
     gap: 64px;
     align-items: flex-start;
}
/* ─── ARTICLE CONTENT ─────────────────────────── */
 .art-content {
     min-width: 0;
}
/* Typography */
 .art-content p {
     font-size: 16.5px;
     line-height: 1.85;
     color: #374151;
     margin-bottom: 22px;
}
 .art-content h2 {
     font-size: 22px;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -0.4px;
     margin: 48px 0 16px;
     padding-top: 4px;
}
 .art-content h3 {
     font-size: 18px;
     font-weight: 700;
     color: var(--text);
     margin: 32px 0 12px;
}
 .art-content ul, .art-content ol {
     padding-left: 22px;
     margin-bottom: 22px;
}
 .art-content li {
     font-size: 16.5px;
     line-height: 1.8;
     color: #374151;
     margin-bottom: 8px;
}
 .art-content strong {
     color: var(--text);
     font-weight: 700;
}
 .art-content a {
     color: var(--blue);
}
 .art-content a:hover {
     text-decoration: underline;
}
/* Data stat row */
 .stat-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin: 32px 0;
}
 .stat-box {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 20px;
     text-align: center;
}
 .stat-val {
     font-size: 30px;
     font-weight: 800;
     color: var(--blue);
     letter-spacing: -1px;
}
 .stat-lbl {
     font-size: 12.5px;
     color: var(--text-2);
     margin-top: 4px;
     line-height: 1.4;
}
/* Key Takeaways box */
 .key-takeaways {
     background: var(--blue-light);
     border: 1px solid #C7DEFF;
     border-left: 3px solid var(--blue);
     border-radius: 0 10px 10px 0;
     padding: 24px 28px;
     margin: 0 0 36px;
}
 .kt-header {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 16px;
}
 .kt-header-icon {
     width: 20px;
     height: 20px;
     background: var(--blue);
     border-radius: 4px;
     display: grid;
     place-items: center;
     flex-shrink: 0;
}
 .kt-header-icon svg {
     fill: none;
     stroke: #fff;
     stroke-width: 1.8;
     stroke-linecap: round;
}
 .kt-label {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--blue);
}
 .kt-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .kt-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14px;
     color: #1A3461;
     line-height: 1.55;
}
 .kt-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blue);
     flex-shrink: 0;
     margin-top: 6px;
}
/* Callout */
 .callout {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-left: 3px solid var(--border);
     border-radius: 0 10px 10px 0;
     padding: 20px 24px;
     margin: 28px 0;
}
 .callout-lbl {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 8px;
}
 .callout p {
     font-size: 14px;
     color: var(--text-2);
     margin: 0;
     line-height: 1.7;
}
/* Pull quote */
 .pullquote {
     margin: 40px 0;
     padding: 0 0 0 28px;
     border-left: 3px solid var(--border);
}
 .pullquote p {
     font-size: 20px;
     font-weight: 700;
     color: var(--text);
     line-height: 1.5;
     font-style: italic;
     margin: 0;
}
 .pullquote cite {
     display: block;
     font-size: 12.5px;
     color: var(--text-3);
     margin-top: 10px;
     font-style: normal;
     font-weight: 500;
}
/* Inline CTA */
 .inline-cta {
     background: var(--blue);
     border-radius: 12px;
     padding: 28px 32px;
     margin: 44px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
}
 .icta-text h3 {
     font-size: 17px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 5px;
}
 .icta-text p {
     font-size: 13.5px;
     color: rgba(255,255,255,0.72);
     margin: 0;
}
 .icta-btn {
     flex-shrink: 0;
     background: #fff;
     color: var(--blue);
     padding: 11px 22px;
     border-radius: 7px;
     font-size: 13.5px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     white-space: nowrap;
     transition: background .15s;
}
 .icta-btn:hover {
     background: #f0f4ff;
}
/* Tags */
 .tag-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 40px;
     padding-top: 32px;
     border-top: 1px solid var(--border);
}
 .tag-chip {
     font-size: 12px;
     font-weight: 500;
     color: var(--text-2);
     background: var(--bg-soft);
     border: 1px solid var(--border);
     padding: 5px 13px;
     border-radius: 100px;
}
/* ─── STICKY SIDEBAR ──────────────────────────── */
 .art-sidebar {
     position: sticky;
     top: calc(var(--nav-h) + 28px);
}
 .toc-box {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 15px;
     margin-bottom: 16px;
}
 .toc-lbl {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 14px;
}
 .toc-list {
     list-style: none;
}
 .toc-list li {
     margin-bottom: 2px;
}
 .toc-list a {
     display: block;
     font-size: 13px;
     font-weight: 500;
     color: var(--text-2);
     padding: 6px 10px;
     border-radius: 6px;
     border-left: 2px solid transparent;
     line-height: 1.4;
     transition: all .15s;
}
 .toc-list a:hover, .toc-list a.active {
     color: var(--blue);
     background: var(--blue-light);
     border-left-color: var(--blue);
}
 .share-box {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 16px;
}
 .share-lbl {
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 12px;
}
 .share-btns {
     display: flex;
     gap: 8px;
}
 .share-btn {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     border: 1.5px solid var(--border);
     background: #fff;
     display: grid;
     place-items: center;
     cursor: pointer;
     color: var(--text-2);
     transition: all .15s;
}
 .share-btn:hover {
     border-color: var(--blue);
     color: var(--blue);
     background: var(--blue-light);
}
 .share-btn svg {
     display: block;
}
 .cta-box {
     background: var(--navy);
     border-radius: 12px;
     padding: 22px;
}
 .cta-box h4 {
     font-size: 15px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 8px;
     line-height: 1.4;
}
 .cta-box p {
     font-size: 13px;
     color: #6B88A8;
     margin-bottom: 16px;
     line-height: 1.6;
}
 .cta-box-btn {
     display: block;
     width: 100%;
     text-align: center;
     background: var(--blue);
     color: #fff;
     padding: 11px;
     border-radius: 7px;
     font-size: 13.5px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     transition: background .15s;
}
 .cta-box-btn:hover {
     background: var(--blue-dark);
}
/* ─── RELATED POSTS ───────────────────────────── */
 .related-section {
     padding: 56px 0;
     background: var(--bg-soft);
     border-top: 1px solid var(--border);
}
 .rel-inner {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 32px;
}
 .rel-hdr {
     margin-bottom: 24px;
}
 .rel-hdr h2 {
     font-size: 18px;
     font-weight: 700;
     color: var(--text);
     letter-spacing: -0.3px;
}
 .rel-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
}
 .rel-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     transition: box-shadow .2s, transform .2s;
}
 .rel-card:hover {
     box-shadow: 0 4px 24px rgba(0,0,0,0.09);
     transform: translateY(-2px);
}
 .rel-vis {
     height: 160px;
     position: relative;
     overflow: hidden;
}
 .rel-vis::before, .rel-vis::after {
     content: '';
     position: absolute;
     border-radius: 50%;
}
 .rel-vis::before {
     width: 130px;
     height: 130px;
     right: -30px;
     bottom: -30px;
}
 .rel-vis::after {
     width: 70px;
     height: 70px;
     left: -14px;
     top: -14px;
}
 .rel-vis img{
     height:100%;
     width: 100%;
     object-fit: cover;
}
 .rv-1 {
     background: linear-gradient(145deg, #EBF5FF 0%, #C7DEFF 100%);
}
 .rv-1::before {
     border: 26px solid rgba(0,102,255,.10);
}
 .rv-1::after {
     border: 14px solid rgba(0,102,255,.08);
}
 .rv-2 {
     background: linear-gradient(145deg, #F0F9FF 0%, #BAE6FD 100%);
}
 .rv-2::before {
     border: 26px solid rgba(14,165,233,.12);
}
 .rv-2::after {
     border: 14px solid rgba(14,165,233,.09);
}
 .rv-3 {
     background: linear-gradient(145deg, #FAF5FF 0%, #DDD6FE 100%);
}
 .rv-3::before {
     border: 26px solid rgba(124,58,237,.10);
}
 .rv-3::after {
     border: 14px solid rgba(124,58,237,.07);
}
 .rel-body {
     padding: 18px;
}
 .rel-body .topic-tag {
     margin-bottom: 10px;
     font-size: 10px;
}
 .rel-body h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--text);
     line-height: 1.4;
     margin-bottom: 10px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
 .rel-body .rel-meta {
     font-size: 12px;
     color: var(--text-3);
}
/* ─── BOTTOM NEWSLETTER ───────────────────────── */
 .bottom-nl {
     background: var(--blue);
     padding: 64px 0;
}
 .bnl-inner {
     max-width: 560px;
     margin: 0 auto;
     text-align: center;
     padding: 0 32px;
}
 .bnl-inner h2 {
     font-size: 26px;
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.5px;
     margin-bottom: 10px;
}
 .bnl-inner p {
     font-size: 14px;
     color: rgba(255,255,255,.70);
     margin-bottom: 28px;
}
 .bnl-form {
     display: flex;
     background: rgba(255,255,255,.12);
     border: 1.5px solid rgba(255,255,255,.22);
     border-radius: 8px;
     overflow: hidden;
     max-width: 420px;
     margin: 0 auto;
}
 .bnl-form input {
     flex: 1;
     background: transparent;
     border: none;
     outline: none;
     padding: 13px 18px;
     font-size: 13.5px;
     font-family: inherit;
     color: #fff;
}
 .bnl-form input::placeholder {
     color: rgba(255,255,255,.5);
}
 .bnl-form button {
     background: #fff;
     color: var(--blue);
     border: none;
     padding: 0 22px;
     font-size: 13.5px;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     white-space: nowrap;
}
 .bnl-form button:hover {
     background: #f0f4ff;
}
/* ─── RESPONSIVE ──────────────────────────────── */
 @media (max-width: 1024px) {
     .art-layout {
         grid-template-columns: 1fr;
         gap: 0;
         padding: 40px 32px 64px;
    }
     .art-sidebar {
         position: static;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
         margin-top: 48px;
    }
     .toc-box, .sub-box, .rec-box, .share-box, .cta-box {
         margin-bottom: 0;
    }
     .rel-grid {
         grid-template-columns: repeat(2, 1fr);
    }
     .ft-grid {
         grid-template-columns: 1fr 1fr;
         gap: 32px;
    }
}
 @media (max-width: 768px) {
     .container {
         padding: 0 20px;
    }
     .art-img-container {
         padding: 0 20px;
    }
     .rel-inner {
         padding: 0 20px;
    }
     .bnl-inner {
         padding: 0 20px;
    }
    /* Nav */
     .nav-hamburger {
         display: flex;
    }
     .nav-cta {
         display: none;
    }
     .btn-back {
         display: none;
    }
     .nav-links {
         display: none;
         position: fixed;
         top: var(--nav-h);
         left: 0;
         right: 0;
         background: #fff;
         flex-direction: column;
         padding: 8px 20px 20px;
         gap: 0;
         border-bottom: 1px solid var(--border);
         box-shadow: 0 4px 20px rgba(0,0,0,.08);
         z-index: 150;
    }
     .nav-links.open {
         display: flex;
    }
     .nav-links li {
         padding: 12px 0;
         border-bottom: 1px solid var(--border);
    }
     .nav-links li:last-child {
         border-bottom: none;
    }
     .nav-links a {
         font-size: 15px;
         color: var(--text);
    }
    /* Article header */
     .art-hdr {
         padding: 28px 0 0;
    }
     .art-hdr h1 {
         font-size: 26px;
         letter-spacing: -0.5px;
    }
     .art-meta {
         gap: 10px;
    }
     .meta-divider {
         display: none;
    }
    /* Hero image */
     .art-img-block {
         height: 220px;
         border-radius: 10px;
    }
    /* Article layout — single column */
     .art-layout {
         grid-template-columns: 1fr;
         padding: 28px 20px 48px;
    }
     .art-sidebar {
         position: static;
         display: block;
         margin-top: 40px;
    }
     .toc-box, .sub-box, .rec-box, .share-box {
         margin-bottom: 16px;
    }
     .cta-box {
         margin-bottom: 0;
    }
    /* Stats */
     .stat-row {
         grid-template-columns: 1fr;
         gap: 12px;
    }
    /* Inline CTA */
     .inline-cta {
         flex-direction: column;
         align-items: stretch;
         padding: 22px 20px;
    }
     .icta-btn {
         width: 100%;
         text-align: center;
         padding: 12px;
    }
    /* Related */
     .rel-grid {
         grid-template-columns: 1fr;
         gap: 14px;
    }
     .related-section {
         padding: 40px 0;
    }
    /* Bottom newsletter */
     .bottom-nl {
         padding: 48px 0;
    }
     .bnl-inner h2 {
         font-size: 22px;
    }
     .bnl-form {
         flex-direction: column;
         max-width: 100%;
         border-radius: 8px;
         overflow: visible;
         background: none;
         border: none;
         gap: 10px;
    }
     .bnl-form input {
         flex: none;
         width: 100%;
         background: rgba(255,255,255,.12);
         border: 1.5px solid rgba(255,255,255,.2);
         border-radius: 8px;
         padding: 13px 18px;
         font-size: 14px;
    }
     .bnl-form button {
         width: 100%;
         padding: 13px 18px;
         border-radius: 8px;
         font-size: 14px;
         border: none;
    }
}
 @media (max-width: 480px) {
     .art-hdr h1 {
         font-size: 22px;
    }
     .art-img-block {
         height: 180px;
    }
     .stat-val {
         font-size: 26px;
    }
     .pullquote p {
         font-size: 17px;
    }
     .ft-grid {
         grid-template-columns: 1fr;
    }
     .art-sidebar {
         grid-template-columns: 1fr;
    }
}
 .fa-check{
     color: #32CD32 !important;
}
 .copyBtn{
     border: 1.5px solid #32CD32;
}
 .tags{
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
}
/* ─── PROGRESS BAR ────────────────────────────── */
 .progress {
     position: fixed;
     top: 78px;
     left: 0;
     height: 2px;
     background: var(--blue);
     z-index: 300;
     width: 0%;
     transition: width .1s linear;
}
 div#ez-toc-container ul li, div#ez-toc-container ul li a{
     font-size: 14px !important;
     font-weight: normal !important;
     color:#4B5563 !important;
     padding: 6px 5px;
     border-radius: 6px;
}
 #ez-toc-container ul{
     overflow: auto !important;
     height: 600px;
}
 div#ez-toc-container ul li a:hover , div#ez-toc-container ul li.active a{
     background-color: #EBF3FF;
     border-left: 3px solid #0066FF;
}
 div#ez-toc-container{
     padding: 0 0 0 0 !important;
}
 .art-content #ez-toc-container{
     display: none;
}
 .ez-toc-link.active {
     color: #0073aa;
     font-weight: 700;
}
 .ez-toc-list li:has(.active) {
     border-left: 3px solid #0073aa;
     padding-left: 8px;
}
 .download_resource_box input[type=text], .download_resource_box input[type=email] {
     width: 100%;
     display: inline;
     margin: 10px 15px 10px 0px;
     border: 1px solid #ddd;
     font-size: .9em;
     color: #111;
     background: #fafafa;
     border-radius: 3px;
     -webkit-appearance: none;
     padding: 10px;
}
 .download_resource_box input[type=submit] {
     background: #029dcd;
     color: #fff;
     border: none;
     padding: 9px 20px;
     border-radius: 6px;
     font-size: 13.5px;
     font-weight: 600;
     transition: background .15s;
     box-shadow: 0 4px 0 #0281a8;
     cursor: pointer;
}
 .download_resource_box input[type=submit]:hover {
     background: #0281a8;
}
 .download_resource_box{
     background-color: #A6D4E9;
     padding: 40px;
     border-radius: 10px;
}
 .resources-img img {
     height: auto;
     width: 100%;
}
 @media screen and (min-width: 992px) {
     .mega-menu .sub-menu{
         display: grid !important;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 6px;
         position: absreolute;
         top: 100%;
         left: -10px;
        /* transform: translateX(-50%);
         */
         width: 720px;
         padding: 20px;
         opacity: 0;
         visibility: hidden;
         /* background-color: #A6D4E9; */
         transition: visibility 0.25s ease !important;
         border-radius: 10px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.08), 0 0 25px rgba(0, 0, 0, 0.30);


    }

   
}

 /* Top Arrow */
.mega-menu ul.sub-menu::before{
    content: "";
    position: absolute;
    top: -10px;
    left: 50px; /* Adjust arrow position */
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.05);
}


 .mega-menu .sub-menu li {
     text-align: left;
}
 .mega-menu .sub-menu li a {
     display: block;
     padding: 10px;
     text-decoration: none;
}
 .key-takeaways ul {
     overflow: hidden;
     max-height: 45px;
    /* Height of first li */
     transition: max-height 0.4s ease;
     margin: 0;
     padding-left: 20px;
}
 .key-takeaways.expanded ul {
     max-height: 500px;
    /* Adjust if needed */
}
 .show-more-btn {
     background: #029dcd;
     color: #fff;
     border: none;
     padding: 9px 20px;
     border-radius: 6px;
     font-size: 13.5px;
     font-weight: 600;
     transition: background .15s;
     box-shadow: 0 4px 0 #0281a8;
     transition: all 0.3s ease;
     margin-top: 20px;
}
 .show-more-btn:hover {
     background: #0281a8;
}
 .error-404 {
     text-align: center;
     padding: 120px 20px;
}
 .error-404 h1 {
     font-size: 100px;
     margin: 0;
}
 .error-404 h2 {
     margin-bottom: 20px;
}
 .error-404 .btn {
     display: inline-block;
     padding: 12px 25px;
     background: #0073aa;
     color: #fff;
     text-decoration: none;
     border-radius: 5px;
}
 .pagination {
     margin: 60px 0 30px;
     text-align: center;
}
 .pagination .page-numbers {
     display: inline-block;
     padding: 8px 12px;
     margin: 0 3px;
     border: 1px solid #ddd;
     text-decoration: none;
}
 .pagination .current {
     font-weight: bold;
     background: #0281a8;
     color:#ffffff;
}
 .all_cat{
     margin: 30px auto;
     text-align: center;
}
 #ez-toc-container a:hover {
     text-decoration: unset !important;
}
 .drawer_menu{
     display: none;
}
 @media only screen and (max-width: 600px){
     .prev.page-numbers, .next.page-numbers, .destop-menu{
         display: none;
    }
    /* New menu */
     .menu-toggle{
         font-size:28px;
         cursor:pointer;
    }
    /* Overlay */
     .overlay{
         position:fixed;
         top:0;
         left:0;
         width:100%;
         height:100%;
         background:rgba(0,0,0,.5);
         display:none;
         z-index:999;
    }
    /* Drawer */
     .mobile-menu{
         position:fixed;
         top:0;
         left:-320px;
         width:300px;
         height:100vh;
         background:#fff;
         overflow-y:auto;
         transition:.3s;
         z-index:1000;
         box-shadow:2px 0 10px rgba(0,0,0,.2);
    }
     .mobile-menu.active{
         left:0;
    }
     .close-menu{
         padding:20px;
         font-size:28px;
         cursor:pointer;
         border-bottom:1px solid #ddd;
    }
     .mobile-menu ul{
         list-style:none;
    }
     .mobile-menu ul li{
         border-bottom:1px solid #eee;
    }
     .mobile-menu ul li a{
         display:block;
         padding:15px 20px;
         text-decoration:none;
         color:#333;
    }
    /* Dropdown */
     .has-dropdown > a{
         display:flex;
         justify-content:space-between;
         align-items:center;
    }
     .sub-menu{
         display:none;
         background:#f7f7f7;
         padding-left: 10px;
    }
     .sub-menu li a{
         padding-left:40px;
    }
     .arrow{
         transition:.3s;
    }
     .rotate{
         transform:rotate(180deg);
    }
     header {
         height: 60px;
         color: #000000;
         display: flex;
         align-items: center;
         padding: 0 20px;
         justify-content: space-between;
         margin-top: 10px;
    }
     .logo {
         font-size: 20px;
         font-weight: bold;
    }
     .drawer_menu{
         display: block;
    }
     .progress{
         display: none;
    }
}


.art-layout input[type="text"], .art-layout input[type="tel"], .art-layout input[type="url"], .art-layout input[type="email"], .art-layout input[type="password"], .art-layout textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: .9em;
    color: #111;
    background: #fafafa;
    border-radius: 3px;
    -webkit-appearance: none;
}

.art-layout input[type="submit"]:hover, .art-layout input[type="reset"]:hover, .art-layout input[type="button"]:hover {
    cursor: pointer;
    background: #016dbb;
    color: #fff;
}
 
.art-layout input[type=submit] {
    background: #029dcd;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s;
    box-shadow: 0 4px 0 #0281a8;
    cursor: pointer;
}