/**
* Template Name: Mentor
* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #37423b; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #b68d40; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #272828;  /* The default color of the main navmenu links */
  --nav-hover-color: #b68d40; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #272828; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #b68d40; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-weight: 700;
  font-size: 30px;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  margin-bottom: 0;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--surface-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px 2px 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --default-color: var(--contrast-color);
  --background-color: var(--accent-color);
  --heading-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--accent-color) 90%, black 5%);
  padding: 20px 0;
}

.page-title nav a {
  color: var(--default-color);
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 900px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--nav-font);
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 80vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 10px 0 0 0;
  font-size: 24px;
}

.hero .btn-get-started {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: 0.4s;
  margin-top: 30px;
  border: 2px solid var(--default-color);
  color: var(--default-color);
}

.hero .btn-get-started:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px 12px 24px;
  border-radius: 50px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

/*--------------------------------------------------------------
# Counts Section
--------------------------------------------------------------*/
.counts {
  padding: 25px 0;
}

.counts .stats-item {
  padding: 30px;
  width: 100%;
}

.counts .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.counts .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
}

.why-us .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.why-us .why-box p {
  margin-bottom: 30px;
}

.why-us .why-box .more-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  padding: 8px 40px 10px 40px;
  color: var(--contrast-color);
  transition: all ease-in-out 0.4s;
  border-radius: 50px;
}

.why-us .why-box .more-btn i {
  font-size: 14px;
}

.why-us .why-box .more-btn:hover {
  color: var(--accent-color);
  background: var(--surface-color);
}

.why-us .icon-box {
  background-color: var(--surface-color);
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .icon-box i {
  color: var(--accent-color);
  font-size: 32px;
  margin-bottom: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}

.why-us .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 30px 0;
}

.why-us .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .icon-box:hover i {
  color: var(--contrast-color);
  background: var(--accent-color);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  padding: 10px 0;
}

.features .features-item {
  background-color: var(--surface-color);
  display: flex;
  align-items: center;
  padding: 20px;
  transition: 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
}

.features .features-item i {
  font-size: 32px;
  padding-right: 10px;
  line-height: 0;
}

.features .features-item h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.features .features-item h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.features .features-item:hover {
  border-color: var(--accent-color);
}

.features .features-item:hover h3 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Courses Section
--------------------------------------------------------------*/
.courses .course-item {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 5px;
}

.courses .course-content {
  padding: 15px;
}

.courses .course-content h3 {
  font-weight: 700;
  font-size: 20px;
}

.courses .course-content h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.courses .course-content h3 a:hover {
  color: var(--accent-color);
}

.courses .course-content .category {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}

.courses .course-content .price {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.courses .course-content .description {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.courses .trainer {
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses .trainer .trainer-profile img {
  max-width: 50px;
  border-radius: 50px;
}

.courses .trainer .trainer-profile .trainer-link {
  padding-left: 10px;
  font-weight: 600;
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.courses .trainer .trainer-profile .trainer-link:hover {
  color: var(--accent-color);
}

.courses .trainer .trainer-rank {
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.courses .trainer .trainer-rank .user-icon {
  font-size: 22px;
}

/*--------------------------------------------------------------
# Trainers Index Section
--------------------------------------------------------------*/
.trainers-index .member {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  margin-bottom: 20px;
}

.trainers-index .member img {
  margin: -1px -1px 30px -1px;
}

.trainers-index .member .member-content {
  padding: 0 20px 30px 20px;
}

.trainers-index .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.trainers-index .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.trainers-index .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.trainers-index .member .social {
  margin-top: 15px;
}

.trainers-index .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
}

.trainers-index .member .social a:hover {
  color: var(--accent-color);
}

.trainers-index .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
.about-us .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about-us .content ul {
  list-style: none;
  padding: 0;
}

.about-us .content ul li {
  padding-bottom: 10px;
}

.about-us .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about-us .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
  padding-left: 50px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-sizing: content-box;
  padding: 30px 30px 30px 60px;
  margin: 30px 15px;
  min-height: 200px;
  position: relative;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 10px;
  border: 6px solid var(--background-color);
  position: absolute;
  left: -45px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 60%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# Courses Course Details Section
--------------------------------------------------------------*/
.courses-course-details {
  padding-bottom: 20px;
}

.courses-course-details h3 {
  font-size: 24px;
  margin: 30px 0 15px 0;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.courses-course-details h3:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  bottom: 0;
  left: 0;
}

.courses-course-details h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 1px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.courses-course-details .course-info {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 10px 15px;
  margin-bottom: 15px;
}

.courses-course-details .course-info h5 {
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  font-family: var(--nav-font);
}

.courses-course-details .course-info p {
  margin: 0;
  font-weight: 600;
}

.courses-course-details .course-info a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Tabs Section
--------------------------------------------------------------*/
.tabs {
  padding-top: 30;
}

.tabs .nav-tabs {
  border: 0;
}

.tabs .nav-link {
  background-color: var(--background-color);
  border: 0;
  padding: 12px 15px;
  transition: 0.3s;
  color: var(--default-color);
  border-radius: 0;
  border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-weight: 600;
  font-size: 15px;
}

.tabs .nav-link:hover {
  color: var(--accent-color);
}

.tabs .nav-link.active {
  background-color: var(--surface-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.tabs .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.tabs .details h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.tabs .details p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.tabs .details p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .tabs .nav-link {
    border: 0;
    padding: 15px;
  }

  .tabs .nav-link.active {
    color: var(--accent-color);
    background: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Trainers Section
--------------------------------------------------------------*/
.trainers .member {
  position: relative;
}

.trainers .member .member-img {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1024px) {
  .trainers .member .member-img {
    margin: 0 60px;
  }
}

.trainers .member .member-img img {
  position: relative;
  z-index: 1;
}

.trainers .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.trainers .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.trainers .member .member-img .social a:hover {
  color: var(--accent-color);
}

.trainers .member .member-info {
  margin-top: 30px;
}

.trainers .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.trainers .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.trainers .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.trainers .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events .card {
  background-color: var(--background-color);
  border: 0;
  padding: 0 30px;
  margin-bottom: 60px;
  position: relative;
}

.events .card-img {
  width: calc(100% + 60px);
  margin-left: -30px;
  overflow: hidden;
  z-index: 9;
  border-radius: 0;
}

.events .card-img img {
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}

.events .card-body {
  z-index: 10;
  background: var(--surface-color);
  border-top: 4px solid var(--surface-color);
  padding: 30px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  transition: 0.3s;
}

.events .card-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.events .card-title a {
  color: var(--default-color);
  transition: 0.3s;
}

.events .card-text {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.events .card:hover img {
  transform: scale(1.1);
}

.events .card:hover .card-body {
  border-color: var(--accent-color);
}

.events .card:hover .card-body .card-title a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.pricing .pricing-item h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}

.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}

.pricing .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .advanced {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  padding-top: 8px;
  padding-bottom: 40px;
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px 12px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}



:root {

  --default-font: "Poppins", sans-serif;

  --heading-color: #111827;

  --accent-color: #b68d40;

  --background-color: #ffffff;

  --text-color: #444444;

}

body {
  font-family: var(--default-font);
  color: var(--text-color);
  background: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-weight: 700;
}


/*--------------------------------------------------------------
# Lawyer Header
--------------------------------------------------------------*/

.header {
  background: #ffffff;
  padding: 14px 0;
  transition: all 0.5s;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.sitename {
  font-size: 30px;
  font-weight: 700;
  color: #111827 !important;
  margin: 0;
  letter-spacing: 0.5px;
}

.navmenu ul li {
  padding: 0 4px;
}

.navmenu ul li a {
  color: #222 !important;
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s;
}

.navmenu ul li a:hover,
.navmenu ul li a.active {
  color: #b68d40 !important;
}

.btn-getstarted {
  background: #b68d40;
  color: #fff !important;
  padding: 11px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
  border: none;
}

.btn-getstarted i {
  margin-right: 6px;
}

.btn-getstarted:hover {
  background: #8d6b2f;
  transform: translateY(-2px);
}

/* Mobile Responsive */

@media (max-width: 991px) {

  .sitename {
    font-size: 23px;
  }

  .btn-getstarted {
    padding: 9px 18px;
    font-size: 13px;
  }

}



/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

.services {
  background: #f8f9fa;
}

.service-card {
  background: #fff;
  padding: 35px 25px;
  border-radius: 18px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 45px rgba(182, 141, 64, 0.15);
}

.icon-box {
  width: 75px;
  height: 75px;
  background: rgba(182, 141, 64, 0.12);
  color: #b68d40;
  font-size: 32px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-card h4 a {
  color: #111827;
  transition: 0.3s;
}

.service-card h4 a:hover {
  color: #b68d40;
}

.service-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}

/*--------------------------------------------------------------
# Reviews Section
--------------------------------------------------------------*/

.reviews {
  background: #f8f9fa;
}

.review-card {
  background: #fff;
  padding: 35px 30px;
  border-radius: 18px;
  height: 100%;
  transition: 0.3s;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.review-card:hover {
  transform: translateY(-6px);
}

.stars {
  margin-bottom: 18px;
}

.stars i {
  color: #b68d40;
  margin-right: 3px;
}

.review-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 25px;
}

.review-user {
  display: flex;
  align-items: center;
}

.review-user img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.review-user h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 3px;
}

.review-user span {
  font-size: 14px;
  color: #777;
}



/*--------------------------------------------------------------
# Blogs Section
--------------------------------------------------------------*/

.blogs {
  background: #f8f9fa;
}

.blog-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  transition: 0.3s;
  height: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.blog-img {
  overflow: hidden;
}

.blog-img img {
  transition: 0.4s;
  width: 100%;
}

.blog-card:hover .blog-img img {
  transform: scale(1.05);
}

.blog-content {
  padding: 25px;
}

.blog-category {
  font-size: 14px;
  font-weight: 600;
  color: #b68d40;
  display: inline-block;
  margin-bottom: 12px;
}

.blog-content h3 {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 15px;
}

.blog-content h3 a {
  color: #111827;
  transition: 0.3s;
}

.blog-content h3 a:hover {
  color: #b68d40;
}

.blog-content p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 18px;
}

.blog-content .read-more {
  color: #0066ff;
  font-weight: 600;
  transition: 0.3s;
}

.blog-content .read-more:hover {
  color: #b68d40;
}

.section-title {
  text-align: center;
  padding-bottom: 40px;
}

.section-title h2 {
  font-size: 15px;
  font-weight: 600;
  color: #b68d40;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 2px;
  background: #b68d40;
  position: absolute;
  top: 50%;
  left: 110%;
}

.section-title p {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0;
  text-transform: uppercase;
}



@media (max-width: 768px) {

  .logo h1 {
    font-size: 38px;
    line-height: 1.1;
  }

  .btn-getstarted {
    padding: 10px 18px;
    font-size: 14px;
  }

  .mobile-nav-toggle {
    font-size: 28px;
    margin-left: 10px;
  }

  .mobile-nav-active .navmenu {
    padding: 30px 20px;
    border-radius: 20px;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
  }

  .navmenu ul li {
    margin-bottom: 18px;
  }

  .footer {
    text-align: center;
    padding: 40px 20px;
  }

  .scroll-top {
    bottom: 20px;
    right: 15px;
  }

}


@media (max-width: 768px) {

  .logo h1 {
    font-size: 20px !important;
  }

}


.criminal-img{
    max-width: 450px;
    width: 100%;
    display: block;
    margin: auto;
}

.criminal-heading{
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 25px;
}

.section-subtitle{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #c1943d;
    margin-bottom: 15px;
}

@media(max-width:991px){

    .criminal-heading{
        font-size: 40px;
        margin-top: 20px;
    }

    .criminal-img{
        max-width: 350px;
    }

}
.service-card i{
font-size:40px;
color:#c1943d;
}


.footer-copyright-name{
font-size:22px;
font-weight:700;
color:#111827;
margin:0 6px;
}

.credits a{
color:#c1943d;
font-weight:600;
text-decoration:none;
}

.credits a:hover



#civilFaq{
    max-width:1100px;
    margin:auto;
}

#civilFaq{
    max-width:1000px;
    margin:auto;
}



/* SERVICES */

#services{

    background:#f8f7f4;
    padding:100px 0;
}

#services .section-title h2{

    color:#b88946;
    font-size:14px;
    letter-spacing:5px;
    text-transform:uppercase;
    font-weight:600;
}

#services .section-title p{

    color:#1b263b;
    font-size:60px;
    font-weight:700;
    margin-top:10px;
}

/* CARD */

.legal-card{

    display:flex;
    gap:30px;

    background:#ffffff;

    padding:35px;

    border-radius:22px;

    text-decoration:none;

    border-left:5px solid #b88946;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.4s;

    height:100%;
}

.legal-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.10);

    border-left:5px solid #1b263b;
}

.service-no{

    font-size:70px;

    font-weight:800;

    color:#e9ecef;

    line-height:1;
}

.service-content{

    flex:1;
}

.service-content h3{

    color:#1b263b;

    font-size:30px;

    margin-bottom:15px;

    font-weight:700;
}

.service-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;
}

.service-content span{

    color:#b88946;

    font-weight:600;

    font-size:15px;
}

.service-content i{

    margin-left:5px;
}

@media(max-width:768px){

    #services .section-title p{

        font-size:42px;
    }

    .legal-card{

        padding:25px;
    }

    .service-no{

        font-size:50px;
    }

    .service-content h3{

        font-size:24px;
    }

}


/* Call Now Button */
.btn-call-now,
a[href^="tel:"].btn-outline-light {
    background: #0b2341 !important;
    border: 2px solid #0b2341 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 50px;
    padding: 12px 30px;
    transition: all .3s ease;
}

.btn-call-now:hover,
a[href^="tel:"].btn-outline-light:hover {
    background: #c89b3c !important;
    border-color: #c89b3c !important;
    color: #fff !important;
    transform: translateY(-2px);
}


.logo .sitename{
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}


.hero:before{
background: rgba(0,0,0,0.65);
}

/* TOP HEADER */
.top-header{
    background:#020b24;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding:15px 0;
}

.top-header .container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.top-logo img{
    height:70px;
    width:auto;
}

.top-contact{
    display:flex;
    gap:30px;
    color:#fff;
    font-size:16px;
}

.top-contact div{
    display:flex;
    align-items:center;
    gap:10px;
}

.top-contact i{
    color:#c79a3b;
}

.top-social{
    display:flex;
    gap:18px;
}

.top-social a{
    color:#fff;
    font-size:22px;
    transition:.3s;
}

.top-social a:hover{
    color:#c79a3b;
}

.top-btn a{
    background:#3bb54a;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:6px;
    font-weight:600;
}

.top-btn a:hover{
    background:#2f963c;
}

/* MOBILE */
@media(max-width:991px){

    .top-header .container{
        flex-direction:column;
        text-align:center;
    }

    .top-contact{
        flex-direction:column;
        gap:10px;
    }
}


/* TOP HEADER */
.top-header{
  background:#04112b;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.top-header .container{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.top-logo img{
  height:70px;
}

.top-contact{
  display:flex;
  gap:30px;
}

.contact-item{
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
}

.contact-item i{
  color:#c79a3b;
}

.top-social{
  display:flex;
  gap:18px;
}

.top-social a{
  color:#fff;
  font-size:22px;
  transition:.3s;
}

.top-social a:hover{
  color:#c79a3b;
}

.top-btn a{
  background:#42b549;
  color:#fff;
  padding:14px 28px;
  text-decoration:none;
  border-radius:5px;
  font-weight:600;
}

.top-btn a:hover{
  background:#2e9638;
}

@media(max-width:991px){

  .top-header .container{
    flex-direction:column;
    gap:15px;
  }

  .top-contact{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

}
.top-header{
    padding:5px 0;
}

.top-logo img{
    height:40px;
}

.top-btn a{
    padding:8px 20px;
}

/* Green Button */
.btn-green{
    background:#28a745 !important;
    border:2px solid #28a745 !important;
    color:#fff !important;
}

.btn-green:hover{
    background:#218838 !important;
    border-color:#218838 !important;
}

/* Pink Button */
.btn-pink{
    background:#e83e8c !important;
    border:2px solid #e83e8c !important;
    color:#fff !important;
}

.btn-pink:hover{
    background:#d63384 !important;
    border-color:#d63384 !important;
}


/* Success Counter */

.success-counter{
    background:#0b2341;
    padding:80px 0;
}

.success-counter .section-title span{
    color:#c89b3c;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

.success-counter .section-title h2{
    color:#fff;
    font-weight:700;
    margin-top:10px;
}

.success-counter .section-title p{
    color:#d9d9d9;
}

.counter-box{
    background:#ffffff;
    padding:35px 20px;
    border-radius:15px;
    transition:.3s;
    height:100%;
}

.counter-box:hover{
    transform:translateY(-5px);
}

.counter-box h3{
    color:#c89b3c;
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.counter-box p{
    color:#0b2341;
    transition:.3s;
}

.top-social a:hover{
    color:#c79a3b;
}

.top-btn a{
    background:#3bb54a;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:6px;
    font-weight:600;
}

.top-btn a:hover{
    background:#2f963c;
}

/* MOBILE */
@media(max-width:991px){

    .top-header .container{
        flex-direction:column;
        text-align:center;
    }

    .top-contact{
        flex-direction:column;
        gap:10px;
    }
}


/* TOP HEADER */
.top-header{
  background:#04112b;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.top-header .container{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.top-logo img{
  height:70px;
}

.top-contact{
  display:flex;
  gap:30px;
}

.contact-item{
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
}

.contact-item i{
  color:#c79a3b;
}

.top-social{
  display:flex;
  gap:18px;
}

.top-social a{
  color:#fff;
  font-size:22px;
  transition:.3s;
}

.top-social a:hover{
  color:#c79a3b;
}

.top-btn a{
  background:#42b549;
  color:#fff;
  padding:14px 28px;
  text-decoration:none;
  border-radius:5px;
  font-weight:600;
}

.top-btn a:hover{
  background:#2e9638;
}

@media(max-width:991px){

  .top-header .container{
    flex-direction:column;
    gap:15px;
  }

  .top-contact{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

}
.top-header{
    padding:5px 0;
}

.top-logo img{
    height:40px;
}

.top-btn a{
    padding:8px 20px;
}

/* Green Button */
.btn-green{
    background:#28a745 !important;
    border:2px solid #28a745 !important;
    color:#fff !important;
}

.btn-green:hover{
    background:#218838 !important;
    border-color:#218838 !important;
}

/* Pink Button */
.btn-pink{
    background:#e83e8c !important;
    border:2px solid #e83e8c !important;
    color:#fff !important;
}

.btn-pink:hover{
    background:#d63384 !important;
    border-color:#d63384 !important;
}


/* Success Counter */

.success-counter{
    background:#0b2341;
    padding:80px 0;
}

.success-counter .section-title span{
    color:#c89b3c;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

.success-counter .section-title h2{
    color:#fff;
    font-weight:700;
    margin-top:10px;
}

.success-counter .section-title p{
    color:#d9d9d9;
}

.counter-box{
    background:#ffffff;
    padding:35px 20px;
    border-radius:15px;
    transition:.3s;
    height:100%;
}

.counter-box:hover{
    transform:translateY(-5px);
}

.counter-box h3{
    color:#c89b3c;
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.counter-box p{
    color:#0b2341;
    font-size:18px;
    font-weight:600;
    margin:0;
}

/* Right Side WhatsApp Floating Button */

.whatsapp-float-right{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    text-decoration:none;
    box-shadow:0 5px 20px rgba(0,0,0,0.25);
    z-index:99999;
    transition:all .3s ease;
    animation:whatsappPulse 2s infinite;
}

.whatsapp-float-right:hover{
    color:#fff;
    transform:scale(1.1);
}

.whatsapp-float-right i{
    color:#fff;
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 15px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

/* Mobile */

@media(max-width:768px){

    .whatsapp-float-right{
        width:55px;
        height:55px;
        font-size:28px;
        right:15px;
        bottom:20px;
    }

}
/*--------------------------------------------------------------
# Premium Modernization Styles
--------------------------------------------------------------*/

/* Hero Section Enhancement */
.hero.dark-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 100%);
  z-index: 2;
}
.hero .container {
  position: relative;
  z-index: 3;
}

/* Premium Card Layout (Replaces basic service-item) */
.premium-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(182, 141, 64, 0.2);
  border-top: 4px solid var(--accent-color);
  padding: 25px 20px;
  border-radius: 12px;
  text-align: left;
  transition: all 0.4s ease;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.premium-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.6s ease;
  z-index: 1;
}

.premium-card:hover::before {
  left: 100%;
}

.premium-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(182, 141, 64, 0.15);
  background: #ffffff;
}

.premium-card .icon-wrapper {
  width: 45px;
  height: 45px;
  background: rgba(182, 141, 64, 0.1);
  color: var(--accent-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.premium-card:hover .icon-wrapper {
  background: var(--accent-color);
  color: #fff;
  transform: rotateY(180deg);
}

.premium-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
  position: relative;
  z-index: 2;
}

.premium-card p {
  color: var(--default-color);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Experience Badge for About Section */
.experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--accent-color);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(182, 141, 64, 0.3);
  z-index: 3;
  animation: floatBadge 3s ease-in-out infinite;
}
.experience-badge h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.experience-badge span {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@keyframes floatBadge {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.about-img-wrapper {
  position: relative;
  border-radius: 12px;
}
.about-img-wrapper img {
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}


/*--------------------------------------------------------------
# Judgments Page Styles
--------------------------------------------------------------*/
.judgments-section {
  background: var(--background-color);
}
.judgment-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 10px;
}
.judgment-subtitle {
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.judgment-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(182, 141, 64, 0.1);
}
.judgment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(182, 141, 64, 0.15);
}
.card-header-custom {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 20%) 100%);
  padding: 20px;
  color: #fff;
}
.card-header-custom h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.judgment-card .card-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.court-badge {
  display: inline-block;
  background: rgba(182, 141, 64, 0.1);
  color: var(--accent-color);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  align-self: flex-start;
}
.judgment-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
  color: var(--heading-color);
}
.judgment-card p {
  font-size: 14px;
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}
.btn-judgment {
  display: inline-block;
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-judgment:hover {
  background: var(--accent-color);
  color: #fff;
}


/*--------------------------------------------------------------
# Blog Styles
--------------------------------------------------------------*/
.blog-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(182, 141, 64, 0.1);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(182, 141, 64, 0.15);
}
.blog-img {
  overflow: hidden;
}
.blog-img img {
  transition: all 0.4s ease;
  width: 100%;
}
.blog-card:hover .blog-img img {
  transform: scale(1.05);
}
.blog-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-category {
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}
.blog-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}
.blog-content h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}
.blog-content h3 a:hover {
  color: var(--accent-color);
}
.blog-text-link p {
  color: var(--default-color);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}
.read-more {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--accent-color);
  font-size: 14px;
  transition: 0.3s;
  margin-top: auto;
}
.read-more:hover {
  color: color-mix(in srgb, var(--accent-color), #000 15%);
}
.read-more i {
  margin-left: 5px;
  transition: 0.3s;
}
.read-more:hover i {
  transform: translateX(5px);
}


/*--------------------------------------------------------------
# Premium Footer Enhancement
--------------------------------------------------------------*/
.footer.dark-background {
  background-color: #050a18;
  color: #d1d5db;
  border-top: 4px solid var(--accent-color);
  padding-top: 20px;
}
.footer.dark-background .footer-about .logo span {
  color: #fff;
}
.footer.dark-background h4 {
  color: var(--accent-color);
  font-size: 18px;
}
.footer.dark-background .footer-links ul a {
  color: #9ca3af;
  transition: all 0.3s ease;
}
.footer.dark-background .footer-links ul a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}
.footer.dark-background .social-links a {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.footer.dark-background .social-links a:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-3px);
}
.footer.dark-background .copyright {
  background-color: #030712;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}
.footer.dark-background .footer-contact strong {
  color: #fff;
}


.footer.dark-background .sitename,
.footer.dark-background .footer-copyright-name,
.footer.dark-background strong {
  color: #ffffff !important;
}


/* Hide Scroll To Top Button globally */
#scroll-top {
  display: none !important;
}

.whatsapp-float-right{
    position: fixed;
    left: 20px;
    right: auto;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 34px;
    z-index: 99999;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* Mobile - Center Left */
@media (max-width:768px){
    .whatsapp-float-right{
        left: 15px;
        right: auto;
        bottom: 50%;
        transform: translateY(50%);
    }
}

.whatsapp-float-right:hover{
    color:#fff;
    transform: scale(1.08);
}

@media (max-width:768px){
    .whatsapp-float-right:hover{
        transform: translateY(50%) scale(1.08);
    }
}



/* ========================================
   BACK TO TOP BUTTON
======================================== */

#scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;

    right: 20px;
    bottom: 20px;

    width: 44px;
    height: 44px;

    background: #d4af37;
    color: #07162f;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    border: none;
    border-radius: 0;

    transition: all 0.3s ease;
}

/* Arrow */
#scroll-top i {
    font-size: 26px;
    line-height: 0;
    color: #07162f;
    font-weight: 700;
}

/* Show button after scrolling */
#scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/* Hover */
#scroll-top:hover {
    background: #07162f;
    color: #d4af37;
}

#scroll-top:hover i {
    color: #d4af37;
}

/* Mobile */
@media (max-width: 768px) {
    #scroll-top {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }
}


/* =========================================
   CUSTOM BACK TO TOP
========================================= */

#customBackToTop {
    position: fixed !important;
    right: 20px !important;
    bottom: 25px !important;

    width: 46px !important;
    height: 46px !important;

    background: #c49a45 !important;
    color: #001333 !important;

    border: none !important;
    border-radius: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer;
    z-index: 999999 !important;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.3s ease;
}

#customBackToTop.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#customBackToTop i {
    font-size: 27px !important;
    line-height: 1 !important;
    color: #001333 !important;
}

#customBackToTop:hover {
    background: #001333 !important;
}

#customBackToTop:hover i {
    color: #c49a45 !important;
}

@media (max-width: 768px) {
    #customBackToTop {
        right: 15px !important;
        bottom: 20px !important;
        width: 44px !important;
        height: 44px !important;
    }
}


/* ==================================================
   GLOBAL WEBSITE TYPOGRAPHY
   Advocate Anurag Arora
================================================== */

/* Body / Paragraph / General Text */
body,
p,
li,
span,
a,
button,
input,
textarea,
select,
label {
    font-family: "Poppins", sans-serif !important;
}

/* ALL HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2,
.section-title p,
.service-content h3,
.footer h4 {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
}

/* Main Page Headings */
h1 {
    font-weight: 700 !important;
}

/* Section Headings */
h2 {
    font-weight: 700 !important;
}

/* Card / Sub Headings */
h3 {
    font-weight: 600 !important;
}

/* Smaller Headings */
h4,
h5,
h6 {
    font-weight: 600 !important;
}

/* ALL PARAGRAPHS */
p {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Lists */
li {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
}

/* Navigation */
.navmenu a,
.navmenu a:focus,
.navbar a,
.navbar-nav a {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
}

/* Buttons */
.btn,
.footer-btn,
button {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* Practice Area Cards */
.legal-card h3,
.service-content h3 {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

.legal-card p,
.service-content p {
    font-family: "Poppins", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.7 !important;
}

/* Footer */
.footer,
.footer p,
.footer a,
.footer span,
.footer li {
    font-family: "Poppins", sans-serif !important;
}

.footer h2,
.footer h3,
.footer h4,
.footer .sitename {
    font-family: "Poppins", sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
}



/* =========================================================
   MOBILE MENU FIX - ALL SCROLL POSITIONS
   Advocate Anurag Arora
========================================================= */

@media (max-width: 1199px) {

    /* Mobile menu button */
    .mobile-nav-toggle {
        display: block !important;
        position: relative;
        z-index: 10001 !important;
        cursor: pointer !important;
    }

    /* Menu overlay */
    .mobile-nav-active .navmenu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;

        padding: 80px 20px 30px 20px !important;

        background: rgba(33, 37, 41, 0.92) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 10000 !important;
    }

    /* Main mobile menu */
    .mobile-nav-active .navmenu > ul {
        display: block !important;

        position: relative !important;
        inset: auto !important;

        width: 100% !important;
        max-width: 700px !important;

        margin: 0 auto !important;
        padding: 20px 0 !important;

        background: #ffffff !important;

        border-radius: 15px !important;

        overflow-y: auto !important;
        z-index: 10001 !important;
    }

    /* Menu links */
    .mobile-nav-active .navmenu > ul > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-nav-active .navmenu > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        padding: 15px 25px !important;

        color: #111827 !important;
        background: #ffffff !important;

        font-size: 17px !important;
        font-weight: 600 !important;
    }

    .mobile-nav-active .navmenu > ul > li > a:hover {
        color: #b68d40 !important;
        background: #f8f7f4 !important;
    }

    /* Close X button */
    .mobile-nav-active .mobile-nav-toggle {
        position: fixed !important;

        top: 20px !important;
        right: 20px !important;

        color: #ffffff !important;

        font-size: 32px !important;

        z-index: 10002 !important;
    }

}

/* Keep sticky header above page content */
.header.sticky-top {
    z-index: 9996 !important;
}

/* =========================================
   PRACTICE AREA CARDS
   ========================================= */

.legal-card {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: default;
    transition: all 0.3s ease;
}

/* Green hover effect */
.legal-card:hover {
    background-color: #198754;
    border-color: #198754;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(25, 135, 84, 0.20);
}

/* Card text changes to white */
.legal-card:hover h3,
.legal-card:hover p,
.legal-card:hover .service-no {
    color: #ffffff;
}

/* Only Explore Practice Area is clickable */
.practice-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #bd9444;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Link hover */
.practice-link:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Link when card is hovered */
.legal-card:hover .practice-link {
    color: #ffffff;
}

/* Arrow animation */
.practice-link i {
    transition: transform 0.3s ease;
}

.practice-link:hover i {
    transform: translateX(5px);
}

/* =========================================
   FOOTER - ADVOCATE ANURAG ARORA
   ========================================= */

#footer .footer-about h3,
#footer .footer-about h4,
#footer .footer-brand,
#footer .footer-logo,
#footer .footer-title {
    color: #f3c969 !important;
    font-weight: 700 !important;
}

/* Footer general text */
#footer {
    color: #ffffff;
}

#footer p,
#footer li,
#footer span {
    color: #ffffff;
}

/* Footer headings */
#footer h3,
#footer h4,
#footer h5 {
    color: #f3c969 !important;
}

/* Footer links */
#footer a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

#footer a:hover {
    color: #f3c969 !important;
}

/* Footer bottom copyright */
#footer .copyright,
#footer .credits {
    color: #ffffff;
}

#footer .copyright strong,
#footer .copyright b {
    color: #f3c969 !important;
}

/* Designed & Developed by WebAura Studio */
#footer .credits strong,
#footer .credits b {
    color: #f3c969 !important;
}

/* Social icons */
#footer .social-links a {
    color: #ffffff !important;
}

#footer .social-links a:hover {
    color: #f3c969 !important;
}


/* =========================================
   FOOTER - ADVOCATE ANURAG ARORA FIX
   ========================================= */

/* Footer background */
#footer {
    background: #020b24 !important;
}

/* Advocate Anurag Arora footer name */
#footer .footer-about .logo .sitename {
    color: #f3c969 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Footer headings */
#footer .footer-links h4,
#footer .footer-newsletter h4 {
    color: #f3c969 !important;
    font-weight: 700 !important;
}

/* Footer normal text */
#footer .footer-contact p,
#footer .footer-newsletter p {
    color: #ffffff !important;
}

/* Strong labels - Phone / Email */
#footer .footer-contact strong {
    color: #ffffff !important;
}

/* Phone and email */
#footer .footer-contact span {
    color: #ffffff !important;
}

/* Footer links */
#footer .footer-links ul li a {
    color: #ffffff !important;
    transition: all 0.3s ease;
}

/* Footer link hover */
#footer .footer-links ul li a:hover {
    color: #f3c969 !important;
}

/* Social icons */
#footer .social-links a {
    color: #ffffff !important;
    border-color: rgba(243, 201, 105, 0.5) !important;
    transition: all 0.3s ease;
}

/* Social icon hover */
#footer .social-links a:hover {
    color: #f3c969 !important;
    border-color: #f3c969 !important;
}

/* Consultation button */
#footer .footer-btn {
    background: #f3c969 !important;
    color: #020b24 !important;
}

#footer .footer-btn:hover {
    background: #ffffff !important;
    color: #020b24 !important;
}

/* Bottom copyright strip */
#footer .footer-bottom-strip {
    background: #020b24 !important;
}

/* Copyright text */
#footer .copyright p,
#footer .copyright-left p {
    color: #ffffff !important;
}

/* Copyright name */
#footer .footer-copyright-name {
    color: #f3c969 !important;
}

/* WebAura Studio */
#footer .copyright-right .credits {
    color: #ffffff !important;
}

#footer .copyright-right .credits a {
    color: #f3c969 !important;
    font-weight: 700 !important;
}

#footer .copyright-right .credits a:hover {
    color: #ffffff !important;
}


/* ===== Practice Areas Dropdown Arrow ===== */

.navmenu > ul > li.dropdown > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navmenu > ul > li.dropdown > a .toggle-dropdown {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Arrow hover effect */
.navmenu > ul > li.dropdown:hover > a .toggle-dropdown {
    transform: rotate(180deg);
    color: #bd913b;
}

/* Dropdown menu */
.navmenu > ul > li.dropdown > ul {
    border-radius: 4px;
    padding: 12px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Dropdown links */
.navmenu > ul > li.dropdown > ul > li > a {
    transition: all 0.25s ease;
}

/* Dropdown link hover */
.navmenu > ul > li.dropdown > ul > li > a:hover {
    color: #bd913b !important;
    background: #faf7ef;
    padding-left: 24px;
}


/* =========================================================
   ADVOCATE ANURAG ARORA
   SAFE GLOBAL CONTENT CSS
   ========================================================= */


/* =========================
   1. SAME FONT FOR CONTENT
   ========================= */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li {
    font-family: 'Poppins', sans-serif;
}


/* =========================
   2. ALL CONTENT PARAGRAPHS
   JUSTIFIED
   ========================= */

main p {
    text-align: justify;
    line-height: 1.8;
}


/* =========================
   3. LEGAL / PRACTICE PAGE
   CONTENT
   ========================= */

main .practice-content p,
main .practice-area-content p,
main .legal-content p,
main .page-content p,
main .about-content p,
main .blog-content p,
main .judgment-content p,
main .content-section p {
    text-align: justify;
}


/* Lists inside content */

main .practice-content li,
main .practice-area-content li,
main .legal-content li,
main .page-content li,
main .about-content li,
main .blog-content li,
main .judgment-content li,
main .content-section li {
    text-align: justify;
    line-height: 1.75;
}


/* =========================
   4. CONSISTENT CONTENT
   HEADINGS
   ========================= */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    line-height: 1.3;
}


/* =========================
   5. RESPONSIVE IMAGES
   ========================= */

main img {
    max-width: 100%;
    height: auto;
}


/* =========================
   6. RESPONSIVE VIDEOS
   ========================= */

main video,
main iframe {
    max-width: 100%;
}


/* =========================
   7. PREVENT HORIZONTAL
   OVERFLOW
   ========================= */

main {
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================
   8. CONTENT WRAPPING
   ========================= */

main p,
main li,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    overflow-wrap: break-word;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    main p {
        font-size: 16px;
        line-height: 1.75;
    }

    main h1 {
        font-size: 40px;
    }

    main h2 {
        font-size: 34px;
    }

    main h3 {
        font-size: 28px;
    }

    main h4 {
        font-size: 23px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    main p {
        font-size: 15px;
        line-height: 1.75;
        text-align: justify;
    }

    main h1 {
        font-size: 32px;
        line-height: 1.25;
    }

    main h2 {
        font-size: 28px;
        line-height: 1.25;
    }

    main h3 {
        font-size: 23px;
        line-height: 1.3;
    }

    main h4 {
        font-size: 20px;
        line-height: 1.35;
    }

    main li {
        font-size: 15px;
        line-height: 1.7;
        text-align: justify;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    main p {
        font-size: 14.5px;
        line-height: 1.75;
    }

    main h1 {
        font-size: 29px;
    }

    main h2 {
        font-size: 25px;
    }

    main h3 {
        font-size: 21px;
    }

    main h4 {
        font-size: 19px;
    }

    main li {
        font-size: 14.5px;
    }

}


/* =========================================================
   RESPONSIVE BOOTSTRAP ROW SAFETY
   ========================================================= */

@media (max-width: 767px) {

    main .row {
        margin-left: 0;
        margin-right: 0;
    }

}


/* =========================================================
   CONTACT / FORM CONTENT
   ========================================================= */

main input,
main textarea,
main select {
    max-width: 100%;
}


/* =========================================================
   TABLES
   ========================================================= */

main table {
    max-width: 100%;
}

main .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   ADVOCATE ANURAG ARORA
   FINAL SAFE TYPOGRAPHY + RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   1. COMMON CONTENT FONT
   ========================================================= */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li {
    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   2. SECTION TITLES
   IMPORTANT: NEVER JUSTIFY SECTION HEADINGS
   ========================================================= */

main .section-title {
    text-align: center;
}

main .section-title h2 {
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 4px !important;
    line-height: 1.4 !important;
    margin-bottom: 18px;
}

main .section-title p {
    text-align: center !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    margin: 0;
}


/* =========================================================
   3. NORMAL PAGE HEADINGS
   ========================================================= */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 1.3;
}


/* =========================================================
   4. NORMAL PAGE PARAGRAPHS
   ========================================================= */

main p {
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   5. LEGAL PAGE CONTENT
   JUSTIFY ONLY ACTUAL CONTENT
   ========================================================= */

main .legal-content p,
main .practice-content p,
main .practice-area-content p,
main .page-content p,
main .about-content p,
main .blog-content p,
main .judgment-content p,
main .content-section p,
main .legal-section p,
main .practice-section p {
    text-align: justify;
    line-height: 1.8;
}


/* =========================================================
   6. LEGAL CONTENT LISTS
   ========================================================= */

main .legal-content li,
main .practice-content li,
main .practice-area-content li,
main .page-content li,
main .about-content li,
main .blog-content li,
main .judgment-content li {
    text-align: justify;
    line-height: 1.75;
}


/* =========================================================
   7. PRACTICE AREA CARDS
   DO NOT JUSTIFY SHORT CARD TEXT
   ========================================================= */

main .legal-card p,
main .service-content p,
main .service-card p,
main .services .card p {
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.7;
}


/* Card headings */

main .legal-card h3,
main .service-content h3,
main .service-card h3 {
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* =========================================================
   8. WHY CHOOSE US / FEATURES
   ========================================================= */

main .features p,
main .feature-item p,
main .feature-card p {
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* =========================================================
   9. STATS / COUNTERS
   ========================================================= */

main .stats p,
main .stat-item p,
main .counter-item p {
    text-align: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* =========================================================
   10. FAQ
   ========================================================= */

main .faq p,
main .accordion p,
main .accordion-body p {
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* FAQ question */

main .accordion-button {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* =========================================================
   11. CONTACT
   ========================================================= */

main .contact p {
    text-align: left;
}

main .contact .info-item p {
    line-height: 1.7;
}


/* =========================================================
   12. IMAGES / IFRAMES
   ========================================================= */

main img {
    max-width: 100%;
    height: auto;
}

main iframe,
main video {
    max-width: 100%;
}


/* =========================================================
   13. PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

main {
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   14. TABLET
   ========================================================= */

@media (max-width: 991px) {

    main .section-title p {
        font-size: 38px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    main .section-title h2 {
        font-size: 13px !important;
        letter-spacing: 3px !important;
    }

    main p {
        font-size: 16px;
    }

}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    main .section-title {
        padding-bottom: 25px;
    }

    main .section-title h2 {
        font-size: 12px !important;
        letter-spacing: 2.5px !important;
        line-height: 1.4 !important;
    }

    main .section-title p {
        font-size: 28px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        word-spacing: normal !important;
    }

    main p {
        font-size: 15px;
        line-height: 1.75;
    }

    main .legal-content p,
    main .practice-content p,
    main .practice-area-content p,
    main .page-content p,
    main .about-content p,
    main .blog-content p,
    main .judgment-content p,
    main .content-section p,
    main .legal-section p,
    main .practice-section p {
        text-align: justify;
        line-height: 1.75;
    }

    main h1 {
        font-size: 32px;
    }

    main h2 {
        font-size: 28px;
    }

    main h3 {
        font-size: 23px;
    }

    main h4 {
        font-size: 20px;
    }

}


/* =========================================================
   16. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    main .section-title h2 {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    main .section-title p {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    main p {
        font-size: 14.5px;
        line-height: 1.75;
    }

    main h1 {
        font-size: 29px;
    }

    main h2 {
        font-size: 25px;
    }

    main h3 {
        font-size: 21px;
    }

}


/* =========================================================
   17. CONTENT WRAPPING
   ========================================================= */

main p,
main li,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    overflow-wrap: break-word;
}


/* =========================================================
   18. RESPONSIVE TABLE
   ========================================================= */

main .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

main table {
    max-width: 100%;
}


/* =========================================================
   HERO HEADING - DESKTOP + MOBILE FINAL FIX
   ========================================================= */

/* Desktop */
.hero h1 {
    width: 100% !important;
    max-width: none !important;

    white-space: nowrap !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;

    line-height: 1.15 !important;
    letter-spacing: -1px !important;

    margin: 0 0 20px 0 !important;
}


/* Large Desktop */
@media (min-width: 1200px) {

    .hero h1 {
        font-size: 56px !important;
        white-space: nowrap !important;
    }

}


/* Laptop */
@media (min-width: 992px) and (max-width: 1199px) {

    .hero h1 {
        font-size: 48px !important;
        white-space: nowrap !important;
    }

}


/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

    .hero h1 {
        font-size: 40px !important;
        white-space: nowrap !important;
    }

}


/* Mobile */
@media (max-width: 767px) {

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;

        white-space: nowrap !important;

        font-size: clamp(21px, 6vw, 32px) !important;

        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;

        margin-bottom: 18px !important;
    }

}


/* Small Mobile */
@media (max-width: 480px) {

    .hero h1 {
        font-size: 21px !important;
        white-space: nowrap !important;
        letter-spacing: -0.4px !important;
    }

}


/* Very Small Mobile */
@media (max-width: 380px) {

    .hero h1 {
        font-size: 18px !important;
        white-space: nowrap !important;
    }

}


/* =========================================================
   HERO - FINAL FONT & RESPONSIVE FIX
   ========================================================= */

/* Main Hero Content */
#hero .hero-content {
    width: 100%;
}

#hero .hero-text {
    width: 100%;
    max-width: 1140px;
    text-align: left;
}


/* Hero Badge */
#hero .hero-badge {
    display: inline-block;

    margin-bottom: 18px;
    padding: 7px 14px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;

    background: rgba(255,255,255,0.08);

    color: #f2d388;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* =========================================================
   HERO HEADING
   Desktop = ONE LINE
   ========================================================= */

#hero .hero-main-heading,
#hero h1 {
    display: block !important;

    width: 100% !important;
    max-width: 1140px !important;

    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    letter-spacing: -0.8px !important;

    white-space: nowrap !important;
}


/* Hero Paragraph */

#hero .hero-text > p {
    width: 100%;
    max-width: 850px;

    margin: 0 0 24px 0;

    color: rgba(255,255,255,0.92);

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;

    letter-spacing: 0;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

#hero .hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 20px;
}

#hero .hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 12px 25px;

    border-radius: 50px;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


/* Book Consultation */

#hero .primary-btn {
    background: #ffffff;
    color: #0d2b46;
}

#hero .primary-btn:hover {
    background: #f2d388;
    color: #0d2b46;
}


/* Call Now */

#hero .secondary-btn {
    background: transparent;
    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.5);
}

#hero .secondary-btn:hover {
    background: #ffffff;
    color: #0d2b46;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    #hero .hero-main-heading,
    #hero h1 {
        font-size: 38px !important;
        white-space: nowrap !important;
    }

    #hero .hero-text > p {
        max-width: 780px;
        font-size: 16px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    #hero .hero-main-heading,
    #hero h1 {
        font-size: 34px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }

    #hero .hero-text > p {
        font-size: 16px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #hero .hero-text {
        max-width: 100%;
    }

    #hero .hero-badge {
        font-size: 11px;
        padding: 6px 11px;
    }

    #hero .hero-main-heading,
    #hero h1 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 29px !important;
        line-height: 1.2 !important;

        letter-spacing: -0.4px !important;

        white-space: normal !important;
    }

    #hero .hero-text > p {
        max-width: 100%;

        font-size: 15px;
        line-height: 1.65;
    }

    #hero .hero-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    #hero .hero-btn {
        min-height: 46px;
        padding: 10px 20px;

        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #hero .hero-main-heading,
    #hero h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    #hero .hero-text > p {
        font-size: 14px;
    }

}


/* =========================================================
   HEADER LOGO (replaces "Adv Anurag Arora" text in header)
   ========================================================= */

.header .logo .sitename {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 0 !important;
}

.header .logo .header-logo-wrap {
    display: block;
    line-height: 0;
}

.header .logo img.header-logo {
    display: block;
    width: auto;
    height: 60px;
    max-height: none;
    max-width: 100%;
    margin: 0;
    object-fit: contain;
}

@media (max-width: 1199px) {
    .header .logo img.header-logo {
        height: 54px;
    }
}

@media (max-width: 767px) {
    .header .logo img.header-logo {
        height: 46px;
    }
}


/* =========================================================
   HOMEPAGE HERO SLIDER (premium)
   Scoped to #hero.hero-premium so other pages are unaffected
   ========================================================= */

#hero.hero-premium {
    --hero-navy: #0b1d3a;
    --hero-navy-deep: #06122a;
    --hero-gold: #c9a14f;
    --hero-gold-soft: #e2bf72;

    display: block;
    min-height: 0;
    padding: 0;
    background: var(--hero-navy-deep);
    overflow: hidden;
}

/* Remove the old flat black overlay; each slide has its own gradient */
#hero.hero-premium::before {
    display: none;
}

/* index.html renders in quirks mode (no doctype), where Swiper's
   height:100% resolves to the viewport - size slides by content instead */
#hero.hero-premium .hero-slider,
#hero.hero-premium .swiper-wrapper,
#hero.hero-premium .swiper-slide {
    height: auto;
}

/* Before Swiper initialises, show only the first slide (no layout shift) */
#hero.hero-premium .hero-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

#hero.hero-premium .hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 720px;
    padding: 80px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 70% at 72% 45%, rgba(201, 161, 79, 0.10) 0%, rgba(201, 161, 79, 0) 60%),
        radial-gradient(ellipse 90% 90% at 80% 50%, #17305a 0%, var(--hero-navy) 45%, var(--hero-navy-deep) 100%);
}

/* Image layer (slides 2-3: portrait image on the right, fading into navy) */
#hero.hero-premium .hero-media {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 56%;
    z-index: 1;
    /* long, gentle fade so bright areas at the photo's left edge never show as a seam */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 14%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.85) 48%, #000 62%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 14%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.85) 48%, #000 62%);
}

#hero.hero-premium .hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: auto;
    transform: scale(1.06);
    transition: transform 7s ease-out;
}

#hero.hero-premium .swiper-slide-active .hero-media img {
    transform: scale(1);
}

/* Slide 1: full-bleed desk scene, scales and gavel on the right */
#hero.hero-premium .hero-slide-wide .hero-media {
    left: 0;
    width: 100%;
    -webkit-mask-image: none;
            mask-image: none;
}

#hero.hero-premium .hero-slide-wide .hero-media img {
    object-position: 70% 60%;
}

/* Balanced overlay: deep navy behind the text, image detail kept on the right */
#hero.hero-premium .hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(6, 18, 42, 0.55) 0%, rgba(6, 18, 42, 0) 30%),
        linear-gradient(90deg, rgba(6, 18, 42, 0.55) 0%, rgba(6, 18, 42, 0.15) 45%, rgba(6, 18, 42, 0) 70%);
}

#hero.hero-premium .hero-slide-wide::after {
    background:
        linear-gradient(0deg, rgba(6, 18, 42, 0.45) 0%, rgba(6, 18, 42, 0) 30%),
        linear-gradient(90deg, rgba(6, 18, 42, 0.92) 0%, rgba(6, 18, 42, 0.82) 34%, rgba(6, 18, 42, 0.35) 58%, rgba(6, 18, 42, 0.05) 80%);
}

/* Content */
#hero.hero-premium .hero-content {
    position: relative;
    z-index: 3;
}

#hero.hero-premium .hero-text {
    max-width: 680px;
}

#hero.hero-premium .hero-badge {
    display: inline-block;
    margin-bottom: 22px;
    padding: 8px 18px;
    border: 1px solid rgba(226, 191, 114, 0.75);
    border-radius: 50px;
    background: rgba(6, 18, 42, 0.35);
    color: var(--hero-gold-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
}

#hero.hero-premium h1,
#hero.hero-premium h2 {
    display: block;
    width: auto !important;
    max-width: 600px !important;
    margin: 0 0 22px 0 !important;
    padding: 0;
    color: #ffffff !important;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
    font-size: 58px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-shadow: 0 2px 22px rgba(6, 18, 42, 0.45);
}

#hero.hero-premium h2 {
    font-size: 50px !important;
}

#hero.hero-premium h1 .hero-highlight {
    color: var(--hero-gold-soft);
    font: inherit !important;
}

#hero.hero-premium .hero-text > p {
    max-width: 600px;
    text-align: left !important;
    margin: 0 0 30px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.7;
}

#hero.hero-premium .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 0;
}

#hero.hero-premium .hero-btn {
    gap: 10px;
    min-height: 56px;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
}

#hero.hero-premium .hero-btn .bi {
    font-size: 17px;
    line-height: 1;
}

#hero.hero-premium .hero-btn .hero-btn-arrow {
    font-size: 13px;
    transition: transform 0.3s ease;
}

#hero.hero-premium .hero-btn:hover .hero-btn-arrow {
    transform: translateX(3px);
}

#hero.hero-premium .primary-btn {
    background: linear-gradient(135deg, #e6c47a 0%, #cfa752 100%);
    color: #0b1d3a;
    box-shadow: 0 10px 26px rgba(182, 141, 64, 0.28);
}

#hero.hero-premium .primary-btn:hover,
#hero.hero-premium .primary-btn:focus-visible {
    background: linear-gradient(135deg, #efd28f 0%, #d9b45f 100%);
    color: #0b1d3a;
    transform: translateY(-2px);
}

#hero.hero-premium .secondary-btn {
    background: rgba(6, 18, 42, 0.35);
    border: 1px solid rgba(226, 191, 114, 0.8);
    color: #ffffff;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

#hero.hero-premium .secondary-btn:hover,
#hero.hero-premium .secondary-btn:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b1d3a;
}

#hero.hero-premium .hero-btn:focus-visible {
    outline: 2px solid var(--hero-gold-soft);
    outline-offset: 3px;
}

/* Practice-area highlights (secondary to heading and CTAs) */
#hero.hero-premium .hero-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 640px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

#hero.hero-premium .hero-highlights li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

#hero.hero-premium .hero-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(226, 191, 114, 0.7);
    border-radius: 50%;
    background: rgba(6, 18, 42, 0.45);
    color: var(--hero-gold-soft);
    font-size: 21px;
}

/* Text entrance on the active slide only */
#hero.hero-premium .swiper-initialized .hero-text > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

#hero.hero-premium .swiper-initialized .swiper-slide-active .hero-text > * {
    opacity: 1;
    transform: none;
}

#hero.hero-premium .swiper-slide-active .hero-text > *:nth-child(2) { transition-delay: 0.12s; }
#hero.hero-premium .swiper-slide-active .hero-text > *:nth-child(3) { transition-delay: 0.24s; }
#hero.hero-premium .swiper-slide-active .hero-text > *:nth-child(4) { transition-delay: 0.36s; }
#hero.hero-premium .swiper-slide-active .hero-text > *:nth-child(5) { transition-delay: 0.48s; }

/* Controls: arrows on the sides, bar indicators centred at the bottom */
#hero.hero-premium .swiper-button-prev,
#hero.hero-premium .swiper-button-next {
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(6, 18, 42, 0.30);
    color: #ffffff;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#hero.hero-premium .swiper-button-prev { left: 24px; }
#hero.hero-premium .swiper-button-next { right: 24px; }

#hero.hero-premium .swiper-button-prev::after,
#hero.hero-premium .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

#hero.hero-premium .swiper-button-prev:hover,
#hero.hero-premium .swiper-button-next:hover {
    background: var(--hero-gold);
    border-color: var(--hero-gold);
    color: #0b1d3a;
}

#hero.hero-premium .swiper-pagination {
    bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

#hero.hero-premium .swiper-pagination-bullet {
    width: 44px;
    height: 5px;
    margin: 0 !important;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: background 0.3s ease;
}

#hero.hero-premium .swiper-pagination-bullet-active {
    background: var(--hero-gold-soft);
}

/* Desktop: text starts on the same line as the logo and page content (the .container edge).
   Extra left padding is added only when the page gutter is too narrow to clear the
   side arrow (arrow: 16px from the edge + 56px wide + gap = 92px from the viewport edge). */
@media (min-width: 1200px) {
    #hero.hero-premium .swiper-button-prev { left: 16px; }
    #hero.hero-premium .swiper-button-next { right: 16px; }

    #hero.hero-premium .hero-content {
        padding-left: max(12px, calc(92px - (100vw - 1140px) / 2));
    }
}

@media (min-width: 1400px) {
    #hero.hero-premium .hero-content {
        padding-left: max(12px, calc(92px - (100vw - 1320px) / 2));
    }
}

/* Small laptops / tablets: keep text clear of the side arrows */
@media (min-width: 992px) and (max-width: 1199px) {
    #hero.hero-premium .hero-content {
        padding-left: 56px;
        padding-right: 56px;
    }
}

/* Laptop */
@media (max-width: 1199px) {
    #hero.hero-premium h1 {
        font-size: 50px !important;
    }

    #hero.hero-premium h2 {
        font-size: 44px !important;
    }
}

/* Tablet & mobile: image on top, vertical gradient keeps text readable */
@media (max-width: 991px) {
    #hero.hero-premium .hero-slide {
        min-height: 0;
        align-items: flex-end;
        padding: 260px 0 80px;
    }

    #hero.hero-premium .hero-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    #hero.hero-premium .hero-media {
        left: 0;
        width: 100%;
        -webkit-mask-image: none;
                mask-image: none;
    }

    #hero.hero-premium .hero-slide::after,
    #hero.hero-premium .hero-slide-wide::after {
        background: linear-gradient(180deg, rgba(6, 18, 42, 0.10) 0%, rgba(6, 18, 42, 0.55) 26%, rgba(6, 18, 42, 0.90) 50%, rgba(6, 18, 42, 0.97) 100%);
    }

    #hero.hero-premium .hero-slide-wide .hero-media img {
        height: 62%;
        object-position: 96% center;
    }

    #hero.hero-premium .hero-slide-wide .hero-media {
        background: var(--hero-navy-deep);
    }

    #hero.hero-premium h1 {
        font-size: 44px !important;
    }

    #hero.hero-premium h2 {
        font-size: 38px !important;
    }

    #hero.hero-premium .swiper-button-prev,
    #hero.hero-premium .swiper-button-next {
        top: 120px;
        margin-top: 0;
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 767px) {
    #hero.hero-premium .hero-slide {
        padding: 200px 0 70px;
    }

    #hero.hero-premium .hero-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    #hero.hero-premium .hero-badge {
        margin-bottom: 16px;
        padding: 7px 13px;
        font-size: 10.5px;
        letter-spacing: 0.5px;
    }

    #hero.hero-premium h1,
    #hero.hero-premium h2 {
        font-size: 34px !important;
        line-height: 1.18 !important;
        margin-bottom: 16px !important;
    }

    #hero.hero-premium .hero-text > p {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    #hero.hero-premium .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #hero.hero-premium .hero-btn {
        min-height: 52px;
        font-size: 15px;
    }

    #hero.hero-premium .hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        margin-top: 28px;
    }

    #hero.hero-premium .hero-highlights li {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        text-align: left;
    }

    #hero.hero-premium .hero-highlight-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    #hero.hero-premium .swiper-button-prev,
    #hero.hero-premium .swiper-button-next {
        display: none;
    }

    #hero.hero-premium .swiper-pagination {
        bottom: 26px;
    }
}

@media (max-width: 380px) {
    #hero.hero-premium h1,
    #hero.hero-premium h2 {
        font-size: 30px !important;
    }

    #hero.hero-premium .hero-highlights li {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero.hero-premium .hero-media img,
    #hero.hero-premium .swiper-initialized .hero-text > * {
        transition: none;
        transform: none;
    }
}


/* =========================================================
   TOP CONTACT BAR (small logo removed)
   Desktop: one row. Mobile: compact two-row strip.
   ========================================================= */

.top-header .container {
    gap: 24px;
}

.top-header .contact-item {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-header .contact-item:hover {
    color: #e2bf72;
}

.top-btn a {
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .top-header {
        padding: 8px 0;
    }

    .top-header .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .top-header .top-contact {
        flex-direction: row;
        gap: 16px;
        text-align: left;
    }

    .top-header .contact-item {
        gap: 6px;
        font-size: 13px;
    }

    .top-header .top-social {
        gap: 14px;
    }

    .top-header .top-social a {
        font-size: 16px;
        line-height: 1;
    }

    .top-btn a {
        padding: 7px 16px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .top-header .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "phone  btn"
            "email  email"
            "social social";
        align-items: center;
        gap: 6px 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .top-header .top-contact {
        display: contents;
    }

    .top-header .top-contact .contact-item:first-child {
        grid-area: phone;
        font-size: 14px;
        font-weight: 600;
    }

    .top-header .top-contact .contact-item:last-child {
        grid-area: email;
        font-size: 12.5px;
        min-width: 0;
    }

    .top-header .top-contact .contact-item:last-child span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-header .top-social {
        grid-area: social;
        justify-content: flex-start;
        gap: 18px;
        padding-top: 2px;
    }

    .top-header .top-social a {
        font-size: 15px;
    }

    .top-header .top-btn {
        grid-area: btn;
        justify-self: end;
    }

    .top-btn a {
        padding: 7px 14px;
        font-size: 12.5px;
        border-radius: 5px;
    }
}

/* Short screens: email + social share one row (saves vertical space) */
@media (min-width: 480px) and (max-width: 767px) {
    .top-header .container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "phone btn"
            "email social";
    }

    .top-header .top-social {
        justify-content: flex-end;
        gap: 14px;
        padding-top: 0;
    }
}


/* =========================================================
   FLOATING WHATSAPP (bottom-left) + BACK TO TOP (bottom-right)
   ========================================================= */

a.whatsapp-float-right {
    top: auto !important;
    right: auto !important;
    left: calc(22px + env(safe-area-inset-left)) !important;
    bottom: calc(22px + env(safe-area-inset-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 28px !important;
    transform: none;
    z-index: 9990 !important;
}

/* overrides the older mobile hover rule that also shifted the button by translateY(50%) */
a.whatsapp-float-right:hover {
    transform: scale(1.08);
}

body #customBackToTop {
    right: calc(26px + env(safe-area-inset-right)) !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 767px) {
    a.whatsapp-float-right {
        left: calc(20px + env(safe-area-inset-left)) !important;
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 25px !important;
    }

    body #customBackToTop {
        right: calc(17px + env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }
}


/* =========================================================
   HERO - MOBILE LAYOUT (image band on top, content below)
   ========================================================= */

@media (max-width: 767px) {
    #hero.hero-premium .hero-slide {
        align-items: flex-start;
        padding: 210px 0 64px;
    }

    #hero.hero-premium .hero-media img,
    #hero.hero-premium .hero-slide-wide .hero-media img {
        height: 330px;
        object-position: center 30%;
    }

    #hero.hero-premium .hero-slide::after,
    #hero.hero-premium .hero-slide-wide::after {
        background: linear-gradient(180deg,
            rgba(6, 18, 42, 0.05) 0px,
            rgba(6, 18, 42, 0.25) 120px,
            rgba(6, 18, 42, 0.82) 230px,
            rgba(6, 18, 42, 1) 330px);
    }

    #hero.hero-premium .hero-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    #hero.hero-premium .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    #hero.hero-premium .hero-btn {
        flex: 1 1 auto;
        min-height: 50px;
        padding: 12px 14px;
        gap: 8px;
        font-size: 14.5px;
        white-space: nowrap;
    }

    #hero.hero-premium .primary-btn {
        flex-grow: 1.4;
    }

    #hero.hero-premium .hero-btn .hero-btn-arrow {
        display: none;
    }
}

@media (max-width: 380px) {
    #hero.hero-premium .hero-slide {
        padding-top: 160px;
    }

    #hero.hero-premium .hero-btn {
        padding: 12px 10px;
        font-size: 14px;
    }
}


/* =========================================================
   HOMEPAGE MOBILE READABILITY
   ========================================================= */

/* Justified text leaves wide gaps on narrow screens */
@media (max-width: 767px) {
    #why-us p,
    #services p,
    #cta p,
    #success-counter p,
    #faq p,
    #blogs p {
        text-align: left !important;
    }
}

/* Practice-area cards: number becomes a corner mark, text gets full width */
@media (max-width: 575px) {
    #services .legal-card {
        position: relative;
        gap: 0;
        padding: 26px 22px;
    }

    #services .service-no {
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 40px;
    }

    #services .service-content h3 {
        padding-right: 54px;
        font-size: 23px;
    }
}


/* =========================================================
   CONTACT PAGE (scoped to .contact-page)
   ========================================================= */

.contact-page {
    --cp-navy: #0b1d3a;
    --cp-navy-deep: #06122a;
    --cp-gold: #c9a14f;
    --cp-gold-soft: #e2bf72;
    --cp-ink: #1b263b;
    --cp-muted: #5b6474;
    --cp-line: #e7e2d6;
    --cp-cream: #faf8f3;
    color: var(--cp-ink);
}

.contact-page section {
    padding: 0;
    background: transparent;
}

.contact-page .cp-break {
    overflow-wrap: anywhere;
}

/* Eyebrow + headings */
.contact-page .cp-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border: 1px solid rgba(226, 191, 114, 0.7);
    border-radius: 50px;
    color: var(--cp-gold-soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.contact-page .cp-eyebrow-dark {
    border-color: rgba(182, 141, 64, 0.55);
    color: #8a6828;
    background: rgba(201, 161, 79, 0.08);
}

.contact-page h1,
.contact-page h2 {
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 700;
    letter-spacing: 0;
}

.contact-page .cp-section-head {
    text-align: center;
    margin-bottom: 36px;
}

.contact-page .cp-section-head h2 {
    margin: 0;
    color: var(--cp-navy);
    font-size: 38px;
}

/* Buttons */
.contact-page .cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-page .cp-btn:focus-visible,
.contact-page a:focus-visible,
.contact-page summary:focus-visible {
    outline: 2px solid var(--cp-gold);
    outline-offset: 3px;
}

.contact-page .cp-btn-gold {
    background: linear-gradient(135deg, #e6c47a 0%, #cfa752 100%);
    color: var(--cp-navy);
    box-shadow: 0 10px 24px rgba(182, 141, 64, 0.25);
}

.contact-page .cp-btn-gold:hover {
    color: var(--cp-navy);
    transform: translateY(-2px);
}

.contact-page .cp-btn-outline {
    border-color: rgba(226, 191, 114, 0.8);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.contact-page .cp-btn-outline:hover {
    background: #ffffff;
    color: var(--cp-navy);
}

.contact-page .cp-btn-outline-dark {
    border-color: var(--cp-navy);
    color: var(--cp-navy);
    background: transparent;
}

.contact-page .cp-btn-outline-dark:hover {
    background: var(--cp-navy);
    color: #ffffff;
}

.contact-page .cp-btn-whatsapp {
    background: #1fa855;
    color: #ffffff;
    font-size: 16.5px;
    box-shadow: 0 10px 24px rgba(31, 168, 85, 0.28);
}

.contact-page .cp-btn-whatsapp:hover {
    background: #178c46;
    color: #ffffff;
    transform: translateY(-2px);
}

.contact-page .cp-btn-whatsapp .bi {
    font-size: 20px;
}

.contact-page .cp-btn-block {
    width: 100%;
}

.contact-page .cp-btn-sm {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14.5px;
}

/* Hero */
.contact-page .cp-hero {
    position: relative;
    padding: 90px 0 130px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 80% at 85% 20%, rgba(201, 161, 79, 0.14) 0%, rgba(201, 161, 79, 0) 60%),
        radial-gradient(ellipse 90% 90% at 50% 0%, #17305a 0%, var(--cp-navy) 50%, var(--cp-navy-deep) 100%);
}

.contact-page .cp-hero h1 {
    max-width: 820px;
    margin: 0 auto 18px;
    color: #ffffff;
    font-size: 52px;
    line-height: 1.15;
}

.contact-page .cp-gold {
    color: var(--cp-gold-soft);
    font: inherit !important;
}

.contact-page .cp-lead {
    max-width: 720px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.75;
    text-align: center !important;
}

.contact-page .cp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Contact cards (overlap the hero) */
.contact-page .cp-cards {
    position: relative;
    z-index: 2;
    margin-top: -70px;
}

.contact-page .cp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--cp-line);
    border-top: 3px solid var(--cp-gold);
    border-radius: 16px;
    background: #ffffff;
    color: var(--cp-ink);
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(11, 29, 58, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-page .cp-card:hover {
    color: var(--cp-ink);
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(11, 29, 58, 0.16);
}

.contact-page .cp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--cp-navy);
    color: var(--cp-gold-soft);
    font-size: 21px;
}

.contact-page .cp-card-icon-wa {
    background: #1fa855;
    color: #ffffff;
}

.contact-page .cp-card h2 {
    margin: 0 0 8px;
    color: var(--cp-navy);
    font-family: "Poppins", sans-serif !important;
    font-size: 18px;
}

.contact-page .cp-card p {
    flex: 1;
    margin: 0 0 14px;
    color: var(--cp-muted);
    font-size: 15px;
    line-height: 1.6;
    text-align: left !important;
}

.contact-page .cp-card-link {
    color: #8a6828;
    font-size: 14px;
    font-weight: 600;
}

.contact-page .cp-card-link .bi {
    margin-left: 4px;
    transition: transform 0.25s ease;
}

.contact-page .cp-card:hover .cp-card-link .bi {
    display: inline-block;
    transform: translateX(3px);
}

/* Enquiry form */
.contact-page .cp-enquiry {
    padding: 80px 0 40px;
}

.contact-page .cp-form-card {
    padding: 40px;
    border: 1px solid var(--cp-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(11, 29, 58, 0.06);
}

.contact-page .cp-form-card h2 {
    margin: 0 0 10px;
    color: var(--cp-navy);
    font-size: 32px;
}

.contact-page .cp-form-intro {
    margin: 0 0 24px;
    color: var(--cp-muted);
    font-size: 15px;
    text-align: left !important;
}

.contact-page label,
.contact-page legend {
    display: block;
    margin-bottom: 6px;
    color: var(--cp-ink);
    font-size: 14px;
    font-weight: 600;
}

.contact-page .cp-req {
    color: #b3261e;
}

.contact-page .cp-optional {
    color: var(--cp-muted);
    font-weight: 400;
}

.contact-page input[type="text"],
.contact-page input[type="tel"],
.contact-page input[type="email"],
.contact-page select,
.contact-page textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #d5d9e0;
    border-radius: 10px;
    background: #fbfcfd;
    color: var(--cp-ink);
    font-size: 15.5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-page textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
    outline: none;
    border-color: var(--cp-gold);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 161, 79, 0.22);
}

.contact-page [aria-invalid="true"] {
    border-color: #b3261e !important;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12) !important;
}

.contact-page .cp-field-error {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: #b3261e;
    font-size: 13px;
}

.contact-page .cp-field-error:empty {
    display: none;
}

.contact-page .cp-hint {
    display: block;
    margin-top: 5px;
    color: var(--cp-muted);
    font-size: 12.5px;
}

.contact-page .cp-radio-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-page .cp-radio-group legend {
    float: none;
    width: auto;
}

.contact-page .cp-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px 0 0;
    padding: 10px 18px;
    border: 1px solid #d5d9e0;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
}

.contact-page .cp-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--cp-navy);
}

.contact-page .cp-radio:has(input:checked) {
    border-color: var(--cp-gold);
    background: rgba(201, 161, 79, 0.10);
}

.contact-page .cp-alert {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.55;
}

.contact-page .cp-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.contact-page .cp-alert-error {
    border: 1px solid #f1c5c2;
    background: #fdf1f0;
    color: #8c1d18;
}

.contact-page .cp-alert-info {
    margin: 16px 0 0;
    border: 1px solid #bfe3cc;
    background: #effaf3;
    color: #145c32;
}

/* Side panel */
.contact-page .cp-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.contact-page .cp-side-block {
    padding: 26px 26px 22px;
    border-radius: 16px;
    background: var(--cp-cream);
    border: 1px solid var(--cp-line);
}

.contact-page .cp-side-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--cp-navy);
    font-size: 17px;
    font-weight: 700;
}

.contact-page .cp-side-block h3 .bi {
    color: var(--cp-gold);
    font-size: 20px;
}

.contact-page .cp-side-block p,
.contact-page .cp-steps li {
    color: var(--cp-muted);
    font-size: 14.5px;
    line-height: 1.65;
    text-align: left !important;
}

.contact-page .cp-side-block p {
    margin: 0;
}

.contact-page .cp-side-block a {
    color: #8a6828;
    font-weight: 600;
}

.contact-page .cp-steps {
    margin: 0;
    padding-left: 20px;
}

.contact-page .cp-steps li + li {
    margin-top: 8px;
}

.contact-page .cp-privacy {
    background: var(--cp-navy);
    border-color: var(--cp-navy);
}

.contact-page .cp-privacy h3 {
    color: #ffffff;
}

.contact-page .cp-privacy p {
    color: rgba(255, 255, 255, 0.82);
}

/* Location */
.contact-page .cp-location {
    padding: 60px 0;
}

.contact-page .cp-address-card {
    padding: 26px;
    border: 1px solid var(--cp-line);
    border-left: 4px solid var(--cp-gold);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(11, 29, 58, 0.05);
}

.contact-page .cp-address-card + .cp-address-card {
    margin-top: 20px;
}

.contact-page .cp-address-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--cp-navy);
    font-size: 19px;
    font-weight: 700;
}

.contact-page .cp-address-card h3 .bi {
    color: var(--cp-gold);
}

.contact-page address {
    margin: 0 0 18px;
    color: var(--cp-muted);
    font-size: 15px;
    font-style: normal;
    line-height: 1.7;
}

.contact-page .cp-map {
    position: relative;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    background: #eef1f5;
    box-shadow: 0 16px 40px rgba(11, 29, 58, 0.08);
}

.contact-page .cp-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* FAQ */
.contact-page .cp-faq {
    padding: 40px 0 90px;
}

.contact-page .cp-faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.contact-page .cp-faq details {
    margin-bottom: 12px;
    border: 1px solid var(--cp-line);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.contact-page .cp-faq summary {
    position: relative;
    padding: 18px 54px 18px 22px;
    color: var(--cp-navy);
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.contact-page .cp-faq summary::-webkit-details-marker {
    display: none;
}

.contact-page .cp-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    color: var(--cp-gold);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.contact-page .cp-faq details[open] summary::after {
    content: "\2212";
}

.contact-page .cp-faq details[open] summary {
    background: var(--cp-cream);
}

.contact-page .cp-faq details p {
    margin: 0;
    padding: 4px 22px 20px;
    color: var(--cp-muted);
    font-size: 15px;
    line-height: 1.7;
    text-align: left !important;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-page .cp-hero h1 {
        font-size: 42px;
    }

    .contact-page .cp-map {
        height: 380px;
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .contact-page .cp-hero {
        padding: 56px 0 100px;
    }

    .contact-page .cp-hero h1 {
        font-size: 31px;
    }

    .contact-page .cp-lead {
        font-size: 15px;
    }

    .contact-page .cp-hero-actions .cp-btn {
        width: 100%;
    }

    .contact-page .cp-cards {
        margin-top: -60px;
    }

    .contact-page .cp-card {
        padding: 22px 20px;
    }

    .contact-page .cp-enquiry {
        padding: 50px 0 20px;
    }

    .contact-page .cp-form-card {
        padding: 26px 18px;
        border-radius: 14px;
    }

    .contact-page .cp-form-card h2,
    .contact-page .cp-section-head h2 {
        font-size: 27px;
    }

    .contact-page .cp-radio {
        padding: 10px 16px;
    }

    .contact-page .cp-location {
        padding: 44px 0;
    }

    .contact-page .cp-map {
        height: 320px;
    }

    .contact-page .cp-faq {
        padding: 20px 0 70px;
    }

    .contact-page .cp-faq summary {
        font-size: 15px;
    }
}


/* =========================================================
   HOMEPAGE PRACTICE AREAS - CATEGORY CARDS
   ========================================================= */

#services.practice-categories {
    padding: 72px 0 64px;
    background: #f8f7f4;
}

#services.practice-categories .pc-title {
    max-width: 920px;
    padding-bottom: 32px;
}

#services.practice-categories .pc-title h2 {
    margin: 0 0 14px;
    color: #0b1d3a;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
}

#services.practice-categories .pc-title h2::before,
#services.practice-categories .pc-title h2::after {
    display: none;
}

#services.practice-categories .pc-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border: 1px solid rgba(182, 141, 64, 0.55);
    border-radius: 50px;
    background: rgba(201, 161, 79, 0.08);
    color: #8a6828;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

#services.practice-categories .pc-intro {
    max-width: 600px;
    margin: 0 auto;
    color: #5b6474;
    font-size: 16px;
    line-height: 1.7;
    text-align: center !important;
}

#services.practice-categories .pc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

#services.practice-categories .pc-card {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    border: 1px solid #e7e2d6;
    border-top: 3px solid #c9a14f;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(11, 29, 58, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#services.practice-categories .pc-card:hover,
#services.practice-categories .pc-card:focus-within {
    transform: translateY(-4px);
    border-color: #e0d3b4;
    box-shadow: 0 18px 44px rgba(11, 29, 58, 0.12);
}

#services.practice-categories .pc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

#services.practice-categories .pc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #0b1d3a;
    color: #e2bf72;
    font-size: 22px;
}

#services.practice-categories .pc-num {
    color: #c9a14f;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

#services.practice-categories .pc-card h3 {
    margin: 0 0 10px;
    color: #0b1d3a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

#services.practice-categories .pc-card > p {
    margin: 0 0 16px;
    color: #5b6474;
    font-size: 14.5px;
    line-height: 1.65;
    text-align: left !important;
}

#services.practice-categories .pc-links {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

#services.practice-categories .pc-links li {
    border-top: 1px solid #f0ece2;
}

#services.practice-categories .pc-links li:last-child {
    border-bottom: 1px solid #f0ece2;
}

#services.practice-categories .pc-links a {
    position: relative;
    display: block;
    padding: 10px 24px 10px 0;
    color: #1b263b;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#services.practice-categories .pc-links a::after {
    content: "\203A";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-52%);
    color: #c9a14f;
    font-size: 20px;
    line-height: 1;
}

#services.practice-categories .pc-links a:hover,
#services.practice-categories .pc-links a:focus-visible {
    padding-left: 6px;
    color: #8a6828;
}

#services.practice-categories .pc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: #8a6828;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

#services.practice-categories .pc-cta .bi {
    transition: transform 0.25s ease;
}

#services.practice-categories .pc-cta:hover .bi,
#services.practice-categories .pc-cta:focus-visible .bi {
    transform: translateX(4px);
}

#services.practice-categories a:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width: 1199px) {
    #services.practice-categories .pc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #services.practice-categories {
        padding: 52px 0 48px;
    }

    #services.practice-categories .pc-title {
        padding-bottom: 24px;
    }

    #services.practice-categories .pc-title h2 {
        font-size: 29px;
    }

    #services.practice-categories .pc-intro {
        font-size: 15px;
    }

    #services.practice-categories .pc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    #services.practice-categories .pc-card {
        padding: 24px 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #services.practice-categories .pc-card,
    #services.practice-categories .pc-links a,
    #services.practice-categories .pc-cta .bi {
        transition: none;
    }
}


/* =========================================================
   PROMOTED PAGE H1s - keep the size/weight of the headings
   they replaced (practice intro h3, property/documentation h2)
   ========================================================= */

.about .content h1.page-h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: 600 !important;
    line-height: 1.3;
}

h1.property-heading {
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 700 !important;
}

@media (min-width: 1200px) {
    h1.property-heading {
        font-size: 2rem;
    }
}


/* =========================================================
   BODY TEXT ALIGNMENT
   Justified on tablet/desktop (with hyphenation to avoid gaps);
   left-aligned on phones where justification stretches words.
   ========================================================= */

@media (min-width: 768px) {
    main p,
    main .content-section p,
    main .practice-section p {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

@media (max-width: 767px) {
    main p,
    main li,
    main .content-section p,
    main .content-section li,
    main .practice-section p,
    main .judgment-content li {
        text-align: left;
    }
}


/* =========================================================
   RELATED LEGAL BLOGS / BLOG LISTING / RELATED SERVICE
   ========================================================= */

.related-blogs {
    padding: 70px 0 76px;
    background: #f8f7f4;
    border-top: 1px solid #ece6d8;
}

.related-blogs .rb-head {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.related-blogs .rb-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 16px;
    border: 1px solid rgba(182, 141, 64, 0.55);
    border-radius: 50px;
    background: rgba(201, 161, 79, 0.08);
    color: #8a6828;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.related-blogs .rb-head h2,
.related-blogs .rb-head h1 {
    margin: 0 0 12px;
    color: #0b1d3a;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.related-blogs .rb-head h1 {
    font-size: 42px;
}

.related-blogs .rb-head p {
    margin: 0;
    color: #5b6474;
    font-size: 16px;
    line-height: 1.7;
    text-align: center !important;
}

.related-blogs .rb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.related-blogs .rb-count-1 {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.related-blogs .rb-count-2 {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
}

.related-blogs .rb-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e7e2d6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-blogs .rb-card:hover,
.related-blogs .rb-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 29, 58, 0.12);
}

.related-blogs .rb-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e9e4d8;
}

.related-blogs .rb-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-blogs .rb-card:hover .rb-media img {
    transform: scale(1.04);
}

.related-blogs .rb-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.related-blogs .rb-cat {
    margin-bottom: 8px;
    color: #8a6828;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.related-blogs .rb-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.related-blogs .rb-title a {
    color: #0b1d3a;
    text-decoration: none;
}

.related-blogs .rb-title a:hover {
    color: #8a6828;
}

.related-blogs .rb-excerpt {
    flex: 1;
    margin: 0 0 16px;
    color: #5b6474;
    font-size: 14.5px;
    line-height: 1.65;
    text-align: left !important;
}

.related-blogs .rb-read,
.related-blogs .rb-all a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: #8a6828;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.related-blogs .rb-read .bi,
.related-blogs .rb-all .bi {
    transition: transform 0.25s ease;
}

.related-blogs .rb-read:hover .bi,
.related-blogs .rb-all a:hover .bi {
    transform: translateX(4px);
}

.related-blogs .rb-all {
    margin-top: 30px;
    text-align: center;
}

.related-blogs .rb-all a {
    padding: 12px 26px;
    border: 1px solid #c9a14f;
    border-radius: 50px;
    color: #0b1d3a;
    background: #ffffff;
}

.related-blogs .rb-all a:hover {
    background: #0b1d3a;
    border-color: #0b1d3a;
    color: #ffffff;
}

.related-blogs a:focus-visible,
.related-service a:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
    border-radius: 4px;
}

.blog-listing {
    border-top: 0;
    padding-top: 64px;
}

/* Related Legal Service box on articles */
.related-service {
    margin-top: 10px;
    margin-bottom: 50px;
}

.related-service .rs-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 26px;
    border: 1px solid #e7e2d6;
    border-left: 4px solid #c9a14f;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.06);
}

.related-service .rs-icon {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #0b1d3a;
    color: #e2bf72;
    font-size: 20px;
}

.related-service .rs-label {
    margin: 0 0 2px;
    color: #8a6828;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left !important;
}

.related-service .rs-text {
    margin: 0 0 8px;
    color: #1b263b;
    font-size: 15.5px;
    text-align: left !important;
}

.related-service .rs-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-service .rs-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: #0b1d3a;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 161, 79, 0.5);
}

.related-service .rs-links a:hover {
    color: #8a6828;
}

@media (max-width: 1199px) {
    .related-blogs .rb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .related-blogs .rb-count-1 {
        grid-template-columns: minmax(0, 420px);
    }
}

@media (max-width: 767px) {
    .related-blogs {
        padding: 52px 0 56px;
    }

    .related-blogs .rb-head h2 {
        font-size: 27px;
    }

    .related-blogs .rb-head h1 {
        font-size: 32px;
    }

    .related-blogs .rb-head p {
        font-size: 15px;
    }

    .related-blogs .rb-grid,
    .related-blogs .rb-count-1,
    .related-blogs .rb-count-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .related-service .rs-box {
        padding: 20px 18px;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .related-blogs .rb-card,
    .related-blogs .rb-media img,
    .related-blogs .rb-read .bi,
    .related-blogs .rb-all .bi {
        transition: none;
    }
}


/* =========================================================
   JUDGMENTS LIBRARY (public)
   ========================================================= */

.jl-section {
    padding: 64px 0 80px;
    background: #f8f7f4;
}

.jl-head {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.jl-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 16px;
    border: 1px solid rgba(182, 141, 64, 0.55);
    border-radius: 50px;
    background: rgba(201, 161, 79, 0.08);
    color: #8a6828;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.jl-head h1,
.jl-detail h1,
.jl-empty h1 {
    margin: 0 0 12px;
    color: #0b1d3a;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.jl-head p {
    margin: 0;
    color: #5b6474;
    font-size: 16px;
    line-height: 1.7;
    text-align: center !important;
}

.jl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid #e7e2d6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.06);
}

.jl-search {
    position: relative;
    flex: 1 1 100%;
}

.jl-search .bi {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #8a6828;
}

.jl-filters input,
.jl-filters select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d5d9e0;
    border-radius: 10px;
    background: #fbfcfd;
    color: #1b263b;
    font-size: 15px;
}

.jl-search input {
    padding-left: 44px;
}

.jl-filters input:focus,
.jl-filters select:focus {
    outline: none;
    border-color: #c9a14f;
    box-shadow: 0 0 0 3px rgba(201, 161, 79, 0.22);
}

.jl-selects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.jl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 11px 22px;
    border: 1px solid #0b1d3a;
    border-radius: 50px;
    background: #0b1d3a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.jl-btn:hover {
    background: #13284a;
    color: #ffffff;
}

.jl-btn-outline {
    background: #ffffff;
    color: #0b1d3a;
}

.jl-btn-outline:hover {
    background: #0b1d3a;
    color: #ffffff;
}

.jl-reset {
    color: #8a6828;
    font-weight: 600;
}

.jl-count {
    min-height: 22px;
    margin: 0 0 14px;
    color: #5b6474;
    font-size: 14px;
    text-align: left !important;
}

.jl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.jl-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #e7e2d6;
    border-top: 3px solid #c9a14f;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.06);
}

.jl-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 10px;
}

.jl-cat {
    padding: 3px 10px;
    border-radius: 50px;
    background: #0b1d3a;
    color: #e2bf72;
    font-size: 12px;
    font-weight: 600;
}

.jl-court {
    color: #5b6474;
    font-size: 13px;
}

.jl-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.jl-title a {
    color: #0b1d3a;
    text-decoration: none;
}

.jl-title a:hover {
    color: #8a6828;
}

.jl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 10px;
    color: #5b6474;
    font-size: 13px;
}

.jl-meta .bi {
    color: #c9a14f;
}

.jl-summary {
    flex: 1;
    margin: 0 0 14px;
    color: #5b6474;
    font-size: 14.5px;
    line-height: 1.65;
    text-align: left !important;
}

.jl-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.jl-read,
.jl-doc,
.jl-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a6828;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.jl-doc {
    color: #0b1d3a;
}

.jl-section a:focus-visible,
.jl-section button:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
}

.jl-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.jl-pagination a,
.jl-pagination span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #e7e2d6;
    border-radius: 10px;
    background: #ffffff;
    color: #0b1d3a;
    text-decoration: none;
}

.jl-pagination span[aria-current] {
    background: #0b1d3a;
    border-color: #0b1d3a;
    color: #ffffff;
}

.jl-empty {
    max-width: 620px;
    margin: 20px auto;
    padding: 40px 28px;
    border: 1px dashed #d8cdb2;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.jl-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #0b1d3a;
    color: #e2bf72;
    font-size: 28px;
}

.jl-empty h2 {
    margin: 0 0 8px;
    color: #0b1d3a;
    font-size: 22px;
}

.jl-empty h1 {
    font-size: 30px;
}

.jl-empty p {
    margin: 0 0 20px;
    color: #5b6474;
    text-align: center !important;
}

.jl-disclaimer {
    margin: 30px 0 0;
    color: #6b7280;
    font-size: 13px;
    text-align: center !important;
}

/* detail page */
.jl-crumbs {
    margin-bottom: 18px;
    color: #5b6474;
    font-size: 14px;
}

.jl-crumbs a {
    color: #8a6828;
}

.jl-article {
    max-width: 860px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid #e7e2d6;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(11, 29, 58, 0.06);
}

.jl-detail h1 {
    font-size: 34px;
}

.jl-article h2 {
    margin: 26px 0 10px;
    color: #0b1d3a;
    font-size: 21px;
}

.jl-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 20px 0 0;
    padding: 18px 20px;
    border-radius: 12px;
    background: #f8f7f4;
}

.jl-facts dt {
    color: #8a6828;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.jl-facts dd {
    margin: 2px 0 0;
    color: #1b263b;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.jl-text {
    color: #374151;
    font-size: 15.5px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.jl-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 6px;
}

.jl-keywords {
    margin: 18px 0 0;
    color: #5b6474;
    font-size: 14px;
    text-align: left !important;
}

.jl-detail .jl-disclaimer {
    text-align: left !important;
}

.jl-back {
    margin-top: 18px;
}

@media (max-width: 1199px) {
    .jl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .jl-selects {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .jl-selects .jl-btn {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .jl-section {
        padding: 44px 0 60px;
    }

    .jl-head h1 {
        font-size: 30px;
    }

    .jl-detail h1 {
        font-size: 26px;
    }

    .jl-selects {
        grid-template-columns: minmax(0, 1fr);
    }

    .jl-selects .jl-btn {
        grid-column: auto;
    }

    .jl-reset {
        text-align: center;
    }

    .jl-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .jl-article {
        padding: 22px 18px;
    }

    .jl-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .jl-docs .jl-btn {
        width: 100%;
    }
}

.jl-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: 40px;
    padding: 26px 30px;
    border-radius: 16px;
    background: #0b1d3a;
}

.jl-contact h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}

.jl-contact p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    text-align: left !important;
}

.jl-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jl-contact .jl-btn {
    border-color: #c9a14f;
    background: linear-gradient(135deg, #e6c47a 0%, #cfa752 100%);
    color: #0b1d3a;
}

.jl-contact .jl-btn-outline {
    background: transparent;
    color: #ffffff;
}

.jl-contact .jl-btn-outline:hover {
    background: #ffffff;
    color: #0b1d3a;
}

@media (max-width: 767px) {
    .jl-contact {
        padding: 22px 20px;
    }

    .jl-contact-actions,
    .jl-contact-actions .jl-btn {
        width: 100%;
    }
}


/* =========================================================
   TOUCH: comfortable tap targets for text links in cards
   (same look; taller hit area on touch screens only)
   ========================================================= */
@media (pointer: coarse) {
    .related-blogs .rb-read,
    .jl-section .jl-read,
    .jl-section .jl-doc,
    .jl-section .jl-back,
    .jl-section .jl-crumbs a,
    .blog-content .blog-category,
    .blog-content .read-more,
    #services.practice-categories .pc-cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    #services.practice-categories .pc-links a {
        min-height: 44px;
    }
}


/* =========================================================
   ACCESSIBLE TEXT CONTRAST (WCAG 2.1 AA, 4.5:1 for body text)
   Gold stays the brand colour for backgrounds, borders and icons;
   gold *text* on light backgrounds uses the deeper bronze #8a6828,
   and gold buttons use navy text (as the hero's primary button does).
   ========================================================= */
.section-title h2,
.section-subtitle,
.blog-category,
.counter-box h3,
.success-counter .section-title span,
#services.practice-categories .pc-num {
    color: #8a6828 !important;
}

@media (min-width: 1200px) {
    .navmenu ul li a:hover,
    .navmenu ul li a.active,
    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active {
        color: #8a6828 !important;
    }
}

.btn-getstarted,
.header .btn-getstarted,
.about .content .read-more,
.about .content .read-more i {
    color: #0b1d3a !important;
}

.btn-getstarted:hover,
.btn-getstarted:focus-visible,
.header .btn-getstarted:hover,
.about .content .read-more:hover,
.about .content .read-more:focus-visible {
    background: #0b1d3a !important;
    color: #ffffff !important;
}

.about .content .read-more:hover i,
.about .content .read-more:focus-visible i {
    color: #ffffff !important;
}

.top-btn a {
    background: #1e7b34 !important;
    color: #ffffff !important;
}

.top-btn a:hover,
.top-btn a:focus-visible {
    background: #165c27 !important;
}

.contact-page .cp-btn-whatsapp {
    background: #157347 !important;
}

.contact-page .cp-btn-whatsapp:hover,
.contact-page .cp-btn-whatsapp:focus-visible {
    background: #0f5c38 !important;
}

/* dark (navy) sections keep the light gold for headings */
.success-counter .section-title h2,
.success-counter .section-title span {
    color: #e2bf72 !important;
}

/* inline links inside article body text */
.article .content p a,
.article .content li a {
    color: #8a6828;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Explore All Legal Blogs" + "View ... Judgments" side by side, wrapping on phones */
.related-blogs .rb-all {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}


/* Keyboard users: open the desktop "Practice Areas" dropdown when focus moves into it */
@media (min-width: 1200px) {
    .navmenu .dropdown:focus-within > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
        transition: opacity 0.3s, top 0.3s; /* visibility switches at once so fast Tab presses land in the menu */
    }
}


/* =========================================================
   GOOGLE REVIEWS CAROUSEL (Home page only: section#reviews)
   ========================================================= */
#reviews.reviews-carousel {
    background: #f8f7f4;
    padding: 80px 0 70px;
    overflow: hidden;
}

#reviews .rv-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}

#reviews .rv-google {
    height: 40px;
    width: auto;
    margin-bottom: 10px;
}

#reviews .rv-head h2 {
    margin: 0 0 10px;
    color: #0b1d3a;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
}

#reviews .rv-rating {
    margin: 0;
    color: #3a4456;
    font-size: 17px;
}

#reviews .rv-stars,
#reviews .rv-card-stars {
    color: #c9a14f;
    letter-spacing: 2px;
}

#reviews .rv-rating strong {
    color: #0b1d3a;
}

/* track */
#reviews .rv-viewport {
    position: relative;
    overflow: hidden;
    padding: 8px 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

#reviews .rv-track {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

#reviews.rv-running .rv-track {
    animation: rv-marquee var(--rv-duration, 40s) linear infinite;
}

@keyframes rv-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--rv-shift, 0px)), 0, 0); }
}

/* pause on hover, keyboard focus, touch, or the Pause button */
#reviews .rv-viewport:hover .rv-track,
#reviews .rv-viewport:focus-within .rv-track,
#reviews.rv-touch .rv-track,
#reviews.rv-paused .rv-track {
    animation-play-state: paused;
}

/* card */
#reviews .rv-card {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    min-height: 0;          /* full review text shown; all cards stretch to the tallest one in the row */
    padding: 26px 26px 20px;
    background: #ffffff;
    border: 1px solid rgba(11, 29, 58, 0.08);
    border-top: 3px solid #c9a14f;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.07);
}

#reviews .rv-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

#reviews .rv-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0b1d3a;
    color: #e2bf72;
    font-weight: 700;
    font-size: 18px;
}

#reviews .rv-name {
    margin: 0;
    color: #0b1d3a;
    font-weight: 700;
    font-size: 16px;
}

#reviews .rv-card-stars {
    margin: 2px 0 0;
    font-size: 15px;
}

#reviews .rv-text {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    color: #3a4456;
    font-size: 15px;
    line-height: 1.7;
}

#reviews .rv-text p {
    margin: 0;
}

#reviews .rv-source {
    margin: auto 0 0;
    color: #5b6472;
    font-size: 13px;
}

/* actions */
#reviews .rv-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

#reviews .rv-cta,
#reviews .rv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

#reviews .rv-cta {
    background: #c9a14f;
    color: #0b1d3a;
    border: 1px solid #c9a14f;
}

#reviews .rv-cta:hover,
#reviews .rv-cta:focus-visible {
    background: #0b1d3a;
    border-color: #0b1d3a;
    color: #ffffff;
}

#reviews .rv-cta-outline {
    background: transparent;
    color: #0b1d3a;
    border-color: #0b1d3a;
}

#reviews .rv-toggle {
    background: #ffffff;
    color: #0b1d3a;
    border: 1px solid rgba(11, 29, 58, 0.25);
    cursor: pointer;
}

#reviews .rv-toggle:hover,
#reviews .rv-toggle:focus-visible {
    border-color: #0b1d3a;
}

#reviews a:focus-visible,
#reviews button:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
}

/* no reviews entered yet: hide the empty track and the pause control */
#reviews.rv-empty .rv-viewport,
#reviews.rv-empty .rv-toggle,
#reviews .rv-track:not(:has(li)) {
    display: none;
}

@media (max-width: 991px) {
    #reviews .rv-card { flex-basis: 320px; }
}

@media (max-width: 767px) {
    #reviews.reviews-carousel { padding: 56px 0 50px; }
    #reviews .rv-track { gap: 16px; padding-left: 16px; }
    /* one card plus a glimpse of the next */
    #reviews .rv-card { flex-basis: min(82vw, 330px); min-height: 240px; padding: 22px 20px 18px; }
    #reviews .rv-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* reduced motion: no animation; a swipeable, snapping row instead */
@media (prefers-reduced-motion: reduce) {
    #reviews .rv-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
                mask-image: none;
    }
    #reviews .rv-track { animation: none !important; padding-right: 24px; }
    #reviews .rv-card { scroll-snap-align: start; }
    #reviews .rv-toggle { display: none; }
}

/* keyboard focus on the scrolling reviews area (it pauses while focused) */
#reviews .rv-viewport:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: -2px;
}

/* reviews: override the site-wide justified paragraphs (uneven word gaps in narrow cards) */
#reviews .rv-head .rv-rating {
    text-align: center !important;
}

#reviews .rv-text p {
    text-align: left !important;
    hyphens: none;
}

/* =========================================================
   HOME HERO: desktop text column and heading (1200px and up)
   The base rules capped the heading at 600px (!important) and the
   text block at 680px on every desktop size, forcing 3-line headings
   on wide screens. The text column is now a share of the centred
   container, and the heading scales with the viewport.
   Tablet and mobile rules (below 1200px) are unchanged.
   ========================================================= */
@media (min-width: 1200px) {
    #hero.hero-premium .hero-text {
        max-width: none;
        width: 58%;                     /* of the 1140/1320px container */
    }

    #hero.hero-premium h1,
    #hero.hero-premium h2 {
        max-width: none !important;
        text-wrap: balance;             /* even line lengths where supported */
    }

    #hero.hero-premium h1 {
        font-size: clamp(46px, 3.3vw, 60px) !important;
    }

    #hero.hero-premium h2 {
        font-size: clamp(42px, 2.9vw, 54px) !important;
    }

    #hero.hero-premium .hero-text > p {
        max-width: 620px;               /* comfortable reading measure */
    }
}

@media (min-width: 1600px) {
    #hero.hero-premium .hero-text {
        width: 60%;
    }
}


/* =========================================================
   HOME: LATEST LEGAL BLOGS CAROUSEL (section#blogs.blogs-carousel)
   Cards are generated from the article list by related-blogs.py;
   motion and pause logic in assets/js/marquee.js (prefix "bl").
   ========================================================= */
#blogs.blogs-carousel {
    background: #ffffff;
    padding: 70px 0 70px;
    overflow: hidden;
}

#blogs .bl-viewport {
    position: relative;
    overflow: hidden;
    padding: 8px 0 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

#blogs .bl-viewport:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: -2px;
}

#blogs .bl-track {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

#blogs.bl-running .bl-track {
    animation: bl-marquee var(--bl-duration, 40s) linear infinite;
}

@keyframes bl-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--bl-shift, 0px)), 0, 0); }
}

#blogs .bl-viewport:hover .bl-track,
#blogs .bl-viewport:focus-within .bl-track,
#blogs.bl-touch .bl-track,
#blogs.bl-paused .bl-track {
    animation-play-state: paused;
}

/* card: desktop 3-4 visible */
#blogs .bl-card {
    flex: 0 0 clamp(300px, 26vw, 460px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(11, 29, 58, 0.08);
    border-top: 3px solid #c9a14f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(11, 29, 58, 0.07);
}

#blogs .bl-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1ede4;
}

#blogs .bl-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#blogs .bl-card:hover .bl-media img {
    transform: scale(1.04);
}

#blogs .bl-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

#blogs .bl-cat {
    color: #8a6828;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

#blogs .bl-title {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

#blogs .bl-title a {
    color: #0b1d3a;
    text-decoration: none;
}

#blogs .bl-title a:hover,
#blogs .bl-title a:focus-visible {
    color: #8a6828;
}

#blogs .bl-excerpt {
    margin: 0 0 16px;
    color: #4a5466;
    font-size: 15px;
    line-height: 1.65;
    text-align: left !important;
}

#blogs .bl-read {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #8a6828;
    font-weight: 700;
    text-decoration: none;
}

#blogs .bl-read:hover,
#blogs .bl-read:focus-visible {
    color: #0b1d3a;
}

#blogs .bl-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

#blogs .bl-toggle,
#blogs .bl-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

#blogs .bl-toggle {
    background: #ffffff;
    color: #0b1d3a;
    border: 1px solid rgba(11, 29, 58, 0.25);
    cursor: pointer;
}

#blogs .bl-all {
    background: #c9a14f;
    color: #0b1d3a;
    border: 1px solid #c9a14f;
}

#blogs .bl-all:hover,
#blogs .bl-all:focus-visible {
    background: #0b1d3a;
    border-color: #0b1d3a;
    color: #ffffff;
}

#blogs a:focus-visible,
#blogs button:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
}

#blogs.bl-empty .bl-viewport,
#blogs.bl-empty .bl-toggle {
    display: none;
}

/* tablet: about 2 cards */
@media (max-width: 1199px) {
    #blogs .bl-card { flex-basis: calc((100vw - 72px) / 2.25); }
}

/* mobile: 1 full card + preview of the next */
@media (max-width: 767px) {
    #blogs.blogs-carousel { padding: 50px 0; }
    #blogs .bl-track { gap: 16px; padding-left: 16px; }
    #blogs .bl-card { flex-basis: calc(100vw - 72px); }
    #blogs .bl-viewport { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
    #blogs .bl-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
                mask-image: none;
    }
    #blogs .bl-track { animation: none !important; padding-right: 24px; }
    #blogs .bl-card { scroll-snap-align: start; }
    #blogs .bl-toggle { display: none; }
}


/* =========================================================
   BLOG PAGE: category filters + search (/blogs)
   ========================================================= */
.blog-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 auto 32px;
    max-width: 1000px;
}

.blog-filters .bf-search {
    position: relative;
    width: 100%;
    max-width: 460px;
}

.blog-filters .bf-search .bi {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a6828;
    pointer-events: none;
}

.blog-filters .bf-search input {
    width: 100%;
    min-height: 48px;
    padding: 10px 18px 10px 46px;
    border: 1px solid rgba(11, 29, 58, 0.18);
    border-radius: 50px;
    background: #ffffff;
    color: #0b1d3a;
    font-size: 15px;
}

.blog-filters .bf-search input:focus {
    outline: none;
    border-color: #c9a14f;
    box-shadow: 0 0 0 3px rgba(201, 161, 79, 0.25);
}

.blog-filters .bf-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.related-blogs .bf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid rgba(11, 29, 58, 0.18);
    border-radius: 50px;
    background: #ffffff;
    color: #0b1d3a;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.related-blogs .bf-btn:hover {
    border-color: #c9a14f;
}

.related-blogs .bf-btn[aria-pressed="true"] {
    background: #0b1d3a;
    border-color: #0b1d3a;
    color: #ffffff;
}

.related-blogs .bf-btn:focus-visible {
    outline: 2px solid #c9a14f;
    outline-offset: 3px;
}

.related-blogs .bf-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(201, 161, 79, 0.18);
    color: #6e531f;
    font-size: 12px;
    font-weight: 700;
}

.related-blogs .bf-btn[aria-pressed="true"] .bf-count {
    background: #c9a14f;
    color: #0b1d3a;
}

/* filtered-out cards (cards use display:flex, which would override [hidden]) */
.related-blogs .rb-card[hidden] {
    display: none !important;
}

.related-blogs .rb-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.related-blogs .rb-card.bf-enter {
    opacity: 0;
    transform: translateY(8px);
}

.related-blogs .bf-empty {
    text-align: center;
    padding: 28px 0 8px;
    color: #4a5466;
}

.related-blogs .bf-empty p {
    margin-bottom: 14px;
}

@media (max-width: 767px) {
    /* one swipeable row of filter buttons, no page overflow */
    .blog-filters .bf-cats {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .related-blogs .bf-btn { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    .related-blogs .rb-card { transition: none; }
}

/* =========================================================
   HIGH COURT LANDING PAGE (/high-court-lawyer-lucknow)
   ========================================================= */
.hc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.hc-actions .btn-getstarted,
#cta .hc-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.btn-getstarted.hc-wa {
    background: #157347 !important;
    color: #ffffff !important;
}

.btn-getstarted.hc-wa:hover,
.btn-getstarted.hc-wa:focus-visible {
    background: #0f5c38 !important;
    color: #ffffff !important;
}

#hc-orders .hc-orders-intro {
    max-width: 820px;
    margin: 0 auto 28px;
    text-align: center !important;
    color: #4a5466;
}

#hc-orders .hc-order {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#hc-orders .hc-bench {
    margin: 0 0 6px;
    color: #8a6828;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#hc-orders .hc-order h3 {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 6px;
}

#hc-orders .hc-order h3 a {
    color: #0b1d3a;
}

#hc-orders .hc-meta {
    color: #5b6472;
    font-size: 14px;
    margin-bottom: 10px;
}

#hc-orders .hc-order p {
    text-align: left !important;
}

#hc-orders .hc-read {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #8a6828;
    font-weight: 700;
}

#cta .hc-offices {
    margin-top: 18px;
    font-size: 14.5px;
}

#cta .hc-disclaimer {
    margin: 20px auto 0;
    max-width: 760px;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.85;
}

@media (max-width: 575px) {
    .hc-actions .btn-getstarted {
        width: 100%;
        justify-content: center;
    }
}

#cta .hc-offices a {
    white-space: nowrap;   /* keep the phone number on one line */
}