/* =====================================================
   METROBANK — MODERN PURPLE THEME
   Replace your existing :root and color sections
   with this file, or paste these overrides at the
   END of your main stylesheet so they take priority.
   ===================================================== */


/* ── 1. CSS Custom Properties (design tokens) ──────── */

:root {
  /* Core brand colours */
  --theme-color:        #7C3AED;   /* Vivid violet — primary CTA, icons, highlights  */
  --theme-color-light:  #A78BFA;   /* Soft lavender — hover tints, subtle accents     */
  --theme-color-dark:   #5B21B6;   /* Deep violet  — pressed states, borders          */
  --theme-gradient:     linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #C084FC 100%);
  --theme-gradient-alt: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);

  /* Structural colours */
  --secondary-color:    #1A0533;   /* Near-black plum — footer, nav bg, dark surfaces */
  --secondary-light:    #2D1B69;   /* Deep indigo   — card backgrounds, overlays      */

  /* Accent palette */
  --pink-color:         #F472B6;   /* Hot pink     — decorative / badge accent        */
  --violet-color:       #8B5CF6;   /* Medium violet — tag / pill colour               */
  --crimson-color:      #DC143C;   /* Alert red    — unchanged                        */
  --orange-color:       #F59E0B;   /* Amber        — unchanged                        */

  /* Typography */
  --text-color:         #6B7280;   /* Cool gray    — body copy                        */
  --title-color:        #0F0A1E;   /* Rich near-black with purple undertone           */
  --text-font:          'Inter',   sans-serif;
  --title-font:         'Manrope', sans-serif;

  /* Glow / shadow system */
  --glow-sm:  0 0 12px rgba(124, 58, 237, 0.30);
  --glow-md:  0 0 28px rgba(124, 58, 237, 0.35);
  --glow-lg:  0 0 50px rgba(124, 58, 237, 0.25);
  --shadow-card: 0 8px 40px rgba(124, 58, 237, 0.12);
}


/* ── 2. Colour utilities ────────────────────────────── */

/* TEXT colour */
.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > .megamenu li > a:hover,
.main-menu .navigation > li > ul > li > ul > li > a:hover,
.header-top .links-list li a:hover,
.header-top .info-list li i,
.header-top .info-list li a:hover,
.banner-carousel .content-box h2 span,
.sec-title h6,
.content_block_one .content-box .inner-box .single-item .icon-box,
.service-block-one .inner-box .icon-box,
.content_block_two .content-box .form-group input[type='button'],
.funfact-block-one:first-child .inner-box .icon-box,
.theme-btn.btn-three,
.news-block-one .inner-box .post-date i,
.news-block-one .inner-box h3 a:hover,
.news-block-one .inner-box .post-info li i,
.news-block-one .inner-box .post-info li a:hover,
.scroll-to-top .scroll-bar-text,
.main-footer a:hover,
.footer-bottom p a,
.sec-title h2 span,
.feature-block-two .inner-box .icon-box,
.feature-block-two .inner-box h3 a:hover,
.content_block_four .content-box .list-item li:before,
.card-block-one .inner-box .lower-content h3 a:hover,
.processing-block-one:hover .inner-box .count-text,
.news-block-two .inner-box .lower-content h3 a:hover,
.news-block-two .inner-box .lower-content .post-info li i,
.news-block-two .inner-box .lower-content .post-info li a:hover,
.page-title .bread-crumb li a:hover,
.team-block-one .inner-box .lower-content h3 a:hover,
.team-block-one .inner-box:hover .lower-content .designation,
.team-details .content-box .designation,
.team-details .content-box .info-list li a:hover,
.career-block-one .inner-box .info-box li i,
.career-block-one .inner-box .btn-box a,
.career-details-content .content-one span,
.career-sidebar .info-list li i,
.news-block-three .inner-box .lower-content .post-info li i,
.news-block-three .inner-box .lower-content .post-info li a:hover,
.news-block-three .inner-box .lower-content h3 a:hover,
.news-block-three .inner-box .lower-content .btn-box a,
.blog-sidebar .search-widget .search-inner .form-group input:focus + button,
.blog-sidebar .search-widget .search-inner .form-group button:hover,
.blog-sidebar .category-widget .category-list li a:before,
.blog-sidebar .category-widget .category-list li a:hover,
.blog-sidebar .post-widget .post h5 a:hover,
.blog-sidebar .post-widget .post .post-date i,
.info-block-one .inner-box p a:hover {
  color: var(--theme-color) !important;
}


/* BACKGROUND colour */
.switcher .switch_btn button,
button.rtl,
button.ltr,
.main-header .outer-box .logo-box,
.main-header .outer-box .logo-box:before,
.theme-btn.btn-one,
.theme-btn.btn-two:before,
.theme-btn.btn-two:after,
.main-header .outer-box .logo-box .shape,
.main-header .outer-box .logo-box:after,
.banner-section .owl-nav button:hover,
.feature-block-one .inner-box .icon-box,
.feature-block-one .inner-box:before,
.image_block_one .image-box .experience-box,
.content_block_one .content-box .inner-box .single-item .icon-box:before,
.service-block-one .inner-box:before,
.content_block_two .content-box .form-group input[type='button']:hover,
.video-section .inner-box .video-btn a,
.funfact-block-one:last-child .inner-box,
.apps-section .content-box .btn-box a:hover,
.subscribe-section,
.main-footer .social-links li a:hover,
.main-footer .links-widget .links-list li a:hover:before,
.nav-style-one .owl-nav button:hover,
.service-style-two .tab-btns li:before,
.service-style-two .tab-btns li:after,
.processing-block-one .inner-box .count-text,
.processing-block-one:before,
.exchange-section .tab-btns li:before,
.exchange-section .tab-btns li:after,
.apps-section.alternat-2,
.service-block-one .inner-box .shape:before,
.requirements-block-one .inner-box h4:before,
.team-block-one .inner-box .image-box .social-links li a:hover,
.team-details .content-box .social-links li a:hover,
.career-block-one .inner-box .btn-box a:hover,
.news-block-one .inner-box .theme-btn:before,
.news-block-one .inner-box .theme-btn:after,
.career-sidebar h4,
.news-block-three .inner-box .lower-content .post-date,
.news-block-three .inner-box .lower-content .btn-box a:hover,
.blog-sidebar .tags-widget .tags-list li a:hover,
.blog-details-content .list-item li:before,
.blog-details-content .post-tag-option .tags-list li a:hover,
.accordion .acc-btn .icon-box:before,
.info-block-one .inner-box .icon-box {
  background: var(--theme-color) !important;
}


/* BORDER colour */
.content_block_two .content-box .form-group input[type='button'],
.content_block_four .content-box .list-item li:before,
.processing-block-one .inner-box .count-text:after,
.image_block_three .image-box .rating-box,
.service-block-one .inner-box .shape:after,
.career-block-one .inner-box .btn-box a,
.news-block-three .inner-box .lower-content .btn-box a,
.blog-sidebar .search-widget .search-inner .form-group input:focus,
.blog-details-content .comment-form-area .form-group input:focus,
.blog-details-content .comment-form-area .form-group textarea:focus,
.faq-form-section .form-inner .form-group input:focus,
.faq-form-section .form-inner .form-group textarea:focus,
.contact-section .form-inner .form-group input:focus,
.contact-section .form-inner .form-group textarea:focus {
  border-color: var(--theme-color) !important;
}


/* ── 3. Enhanced button styles (gradient upgrade) ──── */

.theme-btn.btn-one {
  background: var(--theme-gradient) !important;
  border: none;
  box-shadow: var(--glow-sm);
  transition: box-shadow 400ms ease, transform 300ms ease;
}

.theme-btn.btn-one:hover {
  box-shadow: var(--glow-md);
  transform: translateY(-2px);
}

/* btn-two hover wave now uses theme violet */
.theme-btn.btn-two:before,
.theme-btn.btn-two:after {
  background: var(--theme-color) !important;
}

/* btn-three (light pill) */
.theme-btn.btn-three {
  color: var(--theme-color) !important;
  background: #ffffff !important;
  box-shadow: var(--glow-sm);
}


/* ── 4. Header logo box — vivid gradient strip ──────── */

.main-header .outer-box .logo-box,
.main-header .outer-box .logo-box:before {
  background: var(--theme-gradient) !important;
}

.main-header .outer-box .logo-box .shape {
  background: var(--theme-gradient) !important;
}


/* ── 5. Preloader — purple spinner ──────────────────── */

.handle-preloader {
  background: var(--secondary-color) !important;
}

.handle-preloader .animation-preloader .spinner {
  border-color: var(--theme-color) !important;
  border-top-color: rgba(167, 139, 250, 0.40) !important;
  box-shadow: var(--glow-md) !important;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading {
  -webkit-text-stroke-color: rgba(167, 139, 250, 0.35) !important;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: var(--theme-color-light) !important;
}


/* ── 6. Header-top bar ──────────────────────────────── */

.header-top {
  background: var(--secondary-color) !important;
}


/* ── 7. Footer ──────────────────────────────────────── */

.main-footer {
  background: var(--secondary-color) !important;
}

.main-footer .social-links li a {
  background: rgba(124, 58, 237, 0.20) !important;
  transition: background 400ms ease, box-shadow 400ms ease !important;
}

.main-footer .social-links li a:hover {
  background: var(--theme-color) !important;
  box-shadow: var(--glow-sm) !important;
}

/* Bullet dots in footer link lists */
.main-footer .links-widget .links-list li a:before {
  background: var(--theme-color-light) !important;
}

.main-footer .links-widget .links-list li a:hover:before {
  background: var(--theme-color) !important;
}


/* ── 8. Navigation dropdown ─────────────────────────── */

.main-menu .navigation > li > ul,
.main-menu .navigation > li > .megamenu,
.main-menu .navigation > li > ul > li > ul {
  background: var(--secondary-color) !important;
  border-top: 3px solid var(--theme-color) !important;
}


/* ── 9. Scroll-to-top ────────────────────────────────── */

.scroll-to-top .scroll-bar:before {
  background: var(--theme-color-light) !important;
  opacity: 0.40 !important;
}

.scroll-to-top .scroll-bar .bar-inner {
  background: var(--theme-color) !important;
}


/* ── 10. Section title accent ────────────────────────── */

.sec-title h6 {
  letter-spacing: 2px;
  background: var(--theme-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 11. Pagination ──────────────────────────────────── */

.pagination li a:hover,
.pagination li a.current {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  box-shadow: var(--glow-sm) !important;
}


/* ── 12. List-style-one checkmarks ───────────────────── */

.list-style-one li:before {
  color: var(--theme-color) !important;
}


/* ── 13. RTL / LTR switcher buttons ─────────────────── */

button.rtl,
button.ltr {
  background: var(--theme-gradient) !important;
  box-shadow: var(--glow-sm) !important;
}


/* ── 14. Owl nav arrows ──────────────────────────────── */

.nav-style-one .owl-nav button:hover {
  background: var(--theme-color) !important;
  box-shadow: var(--glow-sm) !important;
}

.banner-section .owl-nav button:hover {
  background: var(--theme-gradient) !important;
}


/* ── 15. Card & block hover glows ────────────────────── */

.service-block-one .inner-box:hover,
.feature-block-two .inner-box:hover,
.card-block-one .inner-box:hover {
  box-shadow: var(--shadow-card) !important;
}


/* ── 16. Processing step counter badge ───────────────── */

.processing-block-one .inner-box .count-text {
  background: var(--theme-gradient) !important;
  box-shadow: var(--glow-sm) !important;
}


/* ── 17. Subscribe section background ───────────────── */

.subscribe-section {
  background: var(--theme-gradient) !important;
}


/* ── 18. Career sidebar heading ─────────────────────── */

.career-sidebar h4 {
  background: var(--theme-gradient) !important;
}


/* ── 19. Blog / News date badge ─────────────────────── */

.news-block-three .inner-box .lower-content .post-date {
  background: var(--theme-gradient) !important;
  box-shadow: var(--glow-sm) !important;
}


/* ── 20. Accordion icon glow ─────────────────────────── */

.accordion .acc-btn .icon-box:before {
  background: var(--theme-gradient) !important;
}


/* ── 21. Info / feature icon boxes ───────────────────── */

.info-block-one .inner-box .icon-box,
.feature-block-one .inner-box .icon-box {
  background: var(--theme-gradient) !important;
  box-shadow: var(--glow-sm) !important;
}


/* ── 22. Video play button ───────────────────────────── */

.video-section .inner-box .video-btn a {
  background: var(--theme-gradient) !important;
  box-shadow: var(--glow-md) !important;
}


/* ── 23. Apps/CTA alternate section ─────────────────── */

.apps-section.alternat-2 {
  background: var(--theme-gradient-alt) !important;
}


/* ── 24. Mobile menu ─────────────────────────────────── */

.mobile-menu .menu-box {
  background: var(--secondary-color) !important;
  border-left: 2px solid var(--theme-color) !important;
}

.mobile-menu .navigation li.current > a:before,
.mobile-menu .navigation li > a:hover:before {
  border-color: var(--theme-color) !important;
}


/* ── 25. Focus ring (accessibility) ─────────────────── */

:focus-visible {
  outline: 2px solid var(--theme-color) !important;
  outline-offset: 3px !important;
}