/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* ════════════════════════════════════════════════════
   GUL LAW — Elementor Custom CSS
   Paste into: Elementor > Site Settings > Custom CSS
   OR: Appearance > Customize > Additional CSS
   
   Brand: Teal #1ABAB8 | Silver #8C9AAA | White base
   Fonts: Playfair Display (headings) + DM Sans (body)
════════════════════════════════════════════════════ */

/* ─── Google Fonts Import ────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ─── CSS Variables ──────────────────────────────── */
:root {
  --gl-teal:        #1ABAB8;
  --gl-teal-dark:   #0F8A88;
  --gl-teal-light:  #3DD4D2;
  --gl-teal-pale:   #E8F8F8;
  --gl-teal-mid:    #B2E8E7;
  --gl-silver:      #8C9AAA;
  --gl-white:       #FFFFFF;
  --gl-off-white:   #F7F8FA;
  --gl-grey-100:    #E5E7EB;
  --gl-grey-600:    #6B7280;
  --gl-grey-800:    #1F2937;
  --gl-grey-900:    #111827;
  --gl-text-dark:   #0D1117;
  --gl-text-body:   #374151;
  --gl-text-muted:  #6B7280;
  --gl-font-head:   'Playfair Display', Georgia, serif;
  --gl-font-body:   'DM Sans', -apple-system, sans-serif;
  --gl-radius:      10px;
  --radius: 10px;
  --gl-radius-lg:   16px;
  --gl-shadow:      0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --gl-shadow-lg:   0 16px 48px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
  --gl-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Global Body ────────────────────────────────── */
body {
  font-family: var(--gl-font-body) !important;
  color: var(--gl-text-body) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── All Heading Tags ───────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--gl-font-head) !important;
}
.dmsans, .dmsans .gl-hero-badge, .dmsans .elementor-heading-title{
	 font-family: var(--gl-font-body) !important;
}

/* ─── Section Eyebrow ────────────────────────────── */
.gl-section-eyebrow,
.gl-eyebrow-wrap p {
  font-family: var(--gl-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gl-teal-dark) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.gl-section-eyebrow::before,
.gl-eyebrow-wrap p::before {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 2px !important;
  background: var(--gl-teal) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.gl-eyebrow-center .gl-section-eyebrow,
.gl-section-eyebrow.gl-eyebrow-center {
  justify-content: center !important;
}
.gl-eyebrow-center .gl-section-eyebrow::before,
.gl-section-eyebrow.gl-eyebrow-center::before { display: none !important; }

.gl-eyebrow-light { color: var(--gl-teal-light) !important; }
.gl-eyebrow-light::before { background: var(--gl-teal-light) !important; }

/* ─── Section Title ──────────────────────────────── */
.gl-section-title .elementor-heading-title,
.gl-section-title.elementor-widget-heading .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: clamp(32px, 4.5vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--gl-text-dark) !important;
  letter-spacing: -0.01em !important;
}
.gl-section-title .elementor-heading-title em,
.gl-section-title.elementor-widget-heading .elementor-heading-title em {
  font-style: italic !important;
  color: var(--gl-teal) !important;
}
.gl-title-white .elementor-heading-title { color: #ffffff !important; }
.gl-title-white .elementor-heading-title em { color: var(--gl-teal-light) !important; }

/* ─── Body Text ──────────────────────────────────── */
.gl-body-text p,
.gl-about-lead-wrap p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--gl-text-body) !important;
}
.gl-about-lead-wrap p {
  font-size: 18px !important;
  color: var(--gl-text-dark) !important;
  font-weight: 500 !important;
}

/* ─── Section Description ────────────────────────── */
.gl-section-desc p,
p.gl-section-desc {
  font-size: 17px !important;
  color: var(--gl-text-muted) !important;
  max-width: 540px !important;
  margin: 16px auto 0 !important;
  text-align: center !important;
  line-height: 1.75 !important;
}

/* ════════════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════════════ */
.gl-top-bar {
  position: relative;
  z-index: 9999;
}
.gl-top-bar-text p,
.gl-top-bar-text span,
.gl-top-bar-text a {
  font-family: var(--gl-font-body) !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.72) !important;
}
.gl-top-bar-link { color: rgba(255,255,255,0.9) !important; transition: color 0.2s; }
.gl-top-bar-link:hover { color: var(--gl-teal-light) !important; }
.gl-top-bar-sep { opacity: 0.3; }

/* ════════════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════════════ */
.gl-hero { position: relative; }

.gl-hero-badge-wrap p,
.gl-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(26,186,184,0.15) !important;
  border: 1px solid rgba(26,186,184,0.35) !important;
  color: var(--gl-teal-light) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  margin-bottom: 4px !important;
  font-family: var(--gl-font-body) !important;
}
.gl-badge-dot {
  width: 7px; height: 7px;
  background: var(--gl-teal);
  border-radius: 50%;
  display: inline-block;
  animation: blink 2.2s ease-in-out infinite;
}

@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }

.gl-hero-title .elementor-heading-title {
  font-size: clamp(44px, 6vw, 76px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}
.gl-hero-title .elementor-heading-title em {
  font-style: italic !important;
  color: var(--gl-teal-light) !important;
}

.gl-hero-sub-wrap p {
  font-size: 17px !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
}
.gl-hero-sub-wrap p em { color: var(--gl-teal-light) !important; font-style: italic !important; }

/* Hero Stats */

.gl-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
    padding: 10px 24px;
    width: fit-content;
}
.gl-hstat-num .elementor-heading-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--gl-teal) !important;
  line-height: 1 !important;
  font-family: var(--gl-font-head) !important;
}
.gl-hstat-num .elementor-heading-title sup { font-size: 18px !important; }
.gl-hstat-label {
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}
.gl-hstat-divider {
  width: 1px; height: 48px;
  background: rgba(255,255,255,0.15);
}

/* Hero Portrait */
.gl-hero-portrait .elementor-image { position: relative; z-index: 1; }
.gl-hero-portrait img {
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-lg) !important;
  max-height: 580px !important;
  object-fit: cover !important;
}

.gl-portrait-badge-wrap p,
.gl-portrait-badge {
  display: inline-flex !important;
  align-items: center !important;
	flex-direction: column;
	justify-content: center;
  gap: 12px !important;
  background: var(--gl-teal) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: var(--gl-radius) !important;
  margin-top: -24px !important;
  position: absolute !important;
	bottom: -16px;
    left: -16px;
  z-index: 2 !important;
  box-shadow: 0 8px 24px rgba(26,186,184,0.4) !important;
}
.gl-pb-num {
  font-size: 28px !important;
  font-weight: 700 !important;
  font-family: var(--gl-font-head) !important;
  line-height: 1 !important;
}
.gl-pb-txt { font-size: 12px !important; line-height: 1.3 !important; opacity: 0.9 !important; text-align:center; }

/* ════════════════════════════════════════════════════
   TRUST BAR
════════════════════════════════════════════════════ */
.gl-trust-bar { 
	border-bottom: 1px solid var(--gl-grey-100); 
    box-shadow: var(--shadow-sm);}
.gl-trust-item .elementor-icon { color: var(--gl-teal) !important; }
.gl-trust-text p, .gl-trust-text span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gl-grey-800) !important;
  white-space: nowrap !important;
}
.gl-trust-sep { width: 1px; height: 20px; background: var(--gl-grey-100); }

/* ════════════════════════════════════════════════════
   ABOUT SECTION
════════════════════════════════════════════════════ */
.gl-about-main-img img {
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow-lg) !important;
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
}
.gl-about-accent-img img {
  border-radius: var(--gl-radius) !important;
  box-shadow: var(--gl-shadow) !important;
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* .gl-quote-wrap p, */
.gl-about-quote-block {
  background: var(--gl-white) !important;
  border-left: 3px solid var(--gl-teal) !important;
  border-radius: 0 var(--gl-radius) var(--gl-radius) 0 !important;
  padding: 20px 24px !important;
  box-shadow: var(--shadow-sm);
}
.gl-about-quote-block blockquote {
    font-family: var(--gl-font-head);
    font-size: 17px;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 12px;
	margin: 0 0 12px 0;
}
.gl-quote-mark { font-size: 48px; color: var(--gl-teal); line-height: 0.8; font-family: var(--gl-font-head); margin-bottom: 8px; }
/* blockquote { font-family: var(--gl-font-head); font-style: italic; font-size: 15px; color: var(--gl-text-dark); line-height: 1.65; margin-bottom: 8px; } */
cite { font-size: 12px; color: var(--gl-teal-dark); font-weight: 600; font-style: normal; font-family: var(--gl-font-body);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gl-cred-item { padding: 8px 0 !important; border-bottom: 1px solid var(--gl-grey-100); }
.gl-cred-item:last-child { border-bottom: none; }
.gl-cred-icon .elementor-icon { color: var(--gl-teal) !important; }
.gl-cred-text span { font-size: 14px !important; font-weight: 500 !important; color: var(--gl-text-dark) !important; }
.gl-cred-icon .elementor-icon-list-icon{
	border-radius: 50%;
    background: var(--gl-teal-pale);
    border: 1.5px solid var(--gl-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
	width: 22px;
    height: 22px;
}

/* ════════════════════════════════════════════════════
   PRACTICE AREAS
════════════════════════════════════════════════════ */
.gl-practice-grid > .e-con {
  flex: 0 0 calc(25% - 18px) !important;
  min-width: 240px !important;
}
@media (max-width: 1024px) {
  .gl-practice-grid > .e-con { flex: 0 0 calc(33.33% - 16px) !important; }
}
@media (max-width: 768px) {
  .gl-practice-grid > .e-con { flex: 0 0 calc(50% - 12px) !important; }
}
@media (max-width: 480px) {
  .gl-practice-grid > .e-con { flex: 0 0 100% !important; }
}

.gl-practice-card {
  transition: transform 0.28s var(--gl-ease), box-shadow 0.28s var(--gl-ease) !important;
  border: 1px solid var(--gl-grey-100);
}
.gl-practice-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--gl-shadow-lg) !important;
    transform: translateY(-4px);
    border-color: var(--gl-teal-mid);
}
.gl-pc-img img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
}
.gl-pc-icon .elementor-icon { 
	color: var(--gl-teal) !important; 
    width: 40px;
    height: 40px;
    background: var(--gl-teal-pale);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.gl-pc-title .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--gl-text-dark) !important;
}
.gl-practice-card:hover .gl-pc-title .elementor-heading-title{
	color: var(--gl-teal-dark) !important; 
}
.gl-pc-desc p { font-size: 14px !important; color: var(--gl-text-muted) !important; line-height: 1.65 !important; }
.gl-pc-link span, .gl-pc-link-wrap span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gl-teal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

/* CTA Card */
.gl-practice-card-cta * { color: #ffffff !important; }
.gl-practice-card-cta .elementor-heading-title { color: #ffffff !important; font-size: 20px !important; }
.gl-practice-card-cta:hover { background-color: var(--gl-teal-dark) !important; }

/* ════════════════════════════════════════════════════
   WHY CHOOSE SECTION
════════════════════════════════════════════════════ */
.gl-why-grid > .e-con {
  flex: 0 0 calc(33.33% - 16px) !important;
  min-width: 260px !important;
}
@media (max-width: 768px) {
  .gl-why-grid > .e-con { flex: 0 0 calc(50% - 12px) !important; }
}
@media (max-width: 480px) {
  .gl-why-grid > .e-con { flex: 0 0 100% !important; }
}

.gl-why-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: background 0.25s, border-color 0.25s !important;
}
.gl-why-card:hover {
  background: rgba(26,186,184,0.12) !important;
  border-color: rgba(26,186,184,0.3) !important;
}
.gl-why-num .elementor-heading-title {
  font-size: 44px !important;
  font-weight: 700 !important;
  color: rgba(26,186,184,0.75) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.gl-why-card-title .elementor-heading-title {
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}
.gl-why-card p { font-size: 14px !important; line-height: 1.7 !important; }

/* ════════════════════════════════════════════════════
   PROCESS SECTION
════════════════════════════════════════════════════ */
.gl-process-grid > .e-con {
  flex: 0 0 calc(25% - 18px) !important;
  min-width: 240px !important;
}
@media (max-width: 1024px) {
  .gl-process-grid > .e-con { flex: 0 0 calc(50% - 12px) !important; }
}
@media (max-width: 480px) {
  .gl-process-grid > .e-con { flex: 0 0 100% !important; }
}

.gl-process-step { 
/* 	transition: transform 0.25s var(--gl-ease);  */
    background: var(--gl-white);
    border: 1px solid var(--gl-grey-100);
    border-radius: var(--gl-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow 0.3s, transform 0.3s;
}
.gl-process-step:hover { 
/* 	transform: translateY(-4px);  */
	    box-shadow: var(--shadow) !important;
    transform: translateY(-3px);
}
.gl-ps-img-wrap { position: relative; }
.gl-ps-img img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}
.gl-ps-num-wrap p,
.gl-ps-step-num {
/*   position: absolute !important;
  top: 12px !important;
  left: 16px !important; */
  background: var(--gl-teal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gl-ps-title .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gl-text-dark) !important;
  margin-bottom: 8px !important;
}
.gl-ps-desc p { font-size: 14px !important; line-height: 1.7 !important; color: var(--gl-text-muted) !important; }

/* ════════════════════════════════════════════════════
   LEGAL AID SECTION
════════════════════════════════════════════════════ */
.gl-la-img img {
  border-radius: var(--gl-radius-lg) !important;
  box-shadow: var(--gl-shadow) !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
}
.gl-la-checklist-box { border: 1px solid var(--gl-grey-100) !important; }
.gl-la-checklist-title .elementor-heading-title {
font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gl-teal-dark) !important;
    margin-bottom: 10px;
  font-family: var(--gl-font-body) !important;
}
.gl-la-check-item { border-bottom: 1px solid var(--gl-grey-100) !important; padding: 8px 0 !important; }
.gl-la-check-item:last-of-type { border-bottom: none !important; }
.gl-la-chk .elementor-icon { color: var(--gl-teal) !important; }
.gl-la-chk-text span { font-size: 14px !important; color: var(--gl-text-body) !important; }
.gl-la-link-wrap a,
.gl-la-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gl-teal) !important;
  display: inline-block !important;
  margin-top: 12px !important;
  transition: color 0.2s !important;
}
.gl-la-link-wrap a:hover,
.gl-la-link:hover { color: var(--gl-teal-dark) !important; }

/* ════════════════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════════════════ */
.gl-cta-title .elementor-heading-title {
  font-size: clamp(24px, 3.5vw, 40px) !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════
   CONTACT SECTION
════════════════════════════════════════════════════ */
.gl-contact-img img {
  border-radius: var(--gl-radius-lg) !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
}
.gl-cd { padding: 12px 0 !important; border-bottom: 1px solid var(--gl-grey-100) !important; }
.gl-cd:last-child { border-bottom: none !important; }
.gl-cd-ico .elementor-icon { 
	color: var(--gl-teal) !important; 
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gl-teal-pale) !important;
    border: 1.5px solid var(--gl-teal-mid) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gl-cd-lbl {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gl-text-muted) !important;
  margin-bottom: 2px !important;
}
.gl-cd-val {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--gl-text-dark) !important;
}
.gl-cd-val:hover { color: var(--gl-teal) !important; }

.gl-contact-note-wrap p,
.gl-contact-note {
  font-size: 13px !important;
  color: var(--gl-text-muted) !important;
  padding: 12px 16px !important;
  background: var(--gl-teal-pale) !important;
  border-radius: var(--gl-radius) !important;
  border: 1px solid var(--gl-teal-mid, #B2E8E7) !important;
}

/* Form Card */
.gl-form-title .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--gl-text-dark) !important;
  margin-bottom: 4px !important;
}

/* Elementor Form Fields */
.gl-contact-form .elementor-field-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gl-text-dark) !important;
  margin-bottom: 6px !important;
}
.gl-contact-form .elementor-field-group input,
.gl-contact-form .elementor-field-group textarea,
.gl-contact-form .elementor-field-group select {
  border: 1.5px solid var(--gl-grey-100) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-family: var(--gl-font-body) !important;
  font-size: 14px !important;
  color: var(--gl-text-dark) !important;
  background: #F9FAFB !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}
.gl-contact-form .elementor-field-group input:focus,
.gl-contact-form .elementor-field-group textarea:focus,
.gl-contact-form .elementor-field-group select:focus {
  border-color: var(--gl-teal) !important;
  box-shadow: 0 0 0 3px rgba(26,186,184,0.12) !important;
  outline: none !important;
  background: #fff !important;
}
.gl-contact-form .elementor-button {
  background: var(--gl-teal) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  width: 100% !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
}
.gl-contact-form .elementor-button:hover {
  background: var(--gl-teal-dark) !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════ */
.gl-footer-brand-name .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: 22px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
.gl-footer-logo img { height: 40px !important; width: auto !important; }
.gl-footer-col-title .elementor-heading-title {
  font-family: var(--gl-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
}
.gl-footer-links { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gl-footer-links li { margin-bottom: 8px !important; }
.gl-footer-links a {
  font-size: 13px !important;
  color: #8C9AAA !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
}
.gl-footer-links a:hover { color: var(--gl-teal-light) !important; }
.gl-footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); }

/* ════════════════════════════════════════════════════
   BUTTONS — All Variants
════════════════════════════════════════════════════ */

/* Primary Button */
.gl-btn-primary .elementor-button,
.elementor-widget-button.gl-btn-primary .elementor-button {
  background: var(--gl-teal) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 14px rgba(26,186,184,0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--gl-font-body) !important;
  letter-spacing: 0 !important;
}
.gl-btn-primary .elementor-button:hover,
.elementor-widget-button.gl-btn-primary .elementor-button:hover {
  background: var(--gl-teal-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(26,186,184,0.45) !important;
}

/* Outline Button */
.gl-btn-outline .elementor-button,
.elementor-widget-button.gl-btn-outline .elementor-button {
  background: transparent !important;
  color: var(--gl-teal-dark) !important;
  border: 2px solid var(--gl-teal) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
  transition: all 0.2s !important;
  font-family: var(--gl-font-body) !important;
}
.gl-btn-outline .elementor-button:hover,
.elementor-widget-button.gl-btn-outline .elementor-button:hover {
  background: var(--gl-teal) !important;
  color: #ffffff !important;
}

/* Ghost White Button */
.gl-btn-ghost-white .elementor-button,
.elementor-widget-button.gl-btn-ghost-white .elementor-button {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  transition: all 0.2s !important;
  font-family: var(--gl-font-body) !important;
}
.gl-btn-ghost-white .elementor-button:hover,
.elementor-widget-button.gl-btn-ghost-white .elementor-button:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: #ffffff !important;
}

/* Solid White Button */
.gl-btn-white .elementor-button,
.elementor-widget-button.gl-btn-white .elementor-button {
  background: #ffffff !important;
  color: var(--gl-text-dark) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  transition: background 0.2s, transform 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--gl-font-body) !important;
	fill: #000;
}
.gl-btn-white .elementor-button:hover,
.elementor-widget-button.gl-btn-white .elementor-button:hover {
  background: var(--gl-grey-100) !important;
  transform: translateY(-1px) !important;
}

/* White Small Button (for CTA card) */
.gl-btn-white-sm .elementor-button,
.elementor-widget-button.gl-btn-white-sm .elementor-button {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  transition: background 0.2s !important;
  font-family: var(--gl-font-body) !important;
}
.gl-btn-white-sm .elementor-button:hover,
.elementor-widget-button.gl-btn-white-sm .elementor-button:hover {
  background: rgba(255,255,255,0.28) !important;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gl-hero-inner { flex-direction: column !important; }
  .gl-hero-content, .gl-hero-portrait-wrap {
    width: 100% !important;
  }
  .gl-about-images, .gl-about-content,
  .gl-la-content, .gl-la-right {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .gl-hero-title .elementor-heading-title { font-size: 42px !important; }
  .gl-section-title .elementor-heading-title { font-size: 32px !important; }
  .gl-hero-stats { gap: 20px !important; }
  .gl-cta-inner { flex-direction: column !important; text-align: center !important; }
  .gl-footer-top-inner > .e-con { width: 100% !important; }
  .gl-contact-left, .gl-contact-right { width: 100% !important; }
}

@media (max-width: 480px) {
  .gl-hero-title .elementor-heading-title { font-size: 34px !important; }
  .gl-hero-actions { flex-direction: column !important; }
  .gl-hero-actions .elementor-widget-button { width: 100% !important; }
  .gl-hero-actions .elementor-button { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .gl-top-bar-inner { flex-wrap: wrap !important; }
}

/* ════════════════════════════════════════════════════
   FLOATING CALL BUTTON
════════════════════════════════════════════════════ */
.gl-float-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--gl-teal);
  color: #fff;
  border-radius: 100px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(26,186,184,0.5);
  z-index: 9990;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}
.gl-float-cta:hover {
  background: var(--gl-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(26,186,184,0.6);
}
@media (min-width: 769px) { .gl-float-cta { display: none; } }

/* ════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION
   Add class "gl-reveal" to any element in Elementor's
   Advanced > CSS Classes field for fade-in animation
════════════════════════════════════════════════════ */
.gl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--gl-ease), transform 0.55s var(--gl-ease);
}
.gl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════════════ */
.gl-top-bar {
  position: relative;
  z-index: 9999;
}
 
/* Text & links inside the top bar */
.gl-tb-text p,
.gl-tb-text span {
  font-family: var(--gl-font-body) !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1 !important;
  white-space: nowrap;
}
 
.gl-tb-link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.gl-tb-link:hover {
  color: var(--gl-teal-light) !important;
}
 
/* Pipe separator */
.gl-tb-sep-wrap p,
.gl-tb-sep {
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  user-select: none;
}
 
/* ════════════════════════════════════════════════════
   MAIN HEADER CONTAINER
════════════════════════════════════════════════════ */
.gl-site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease !important;
}
 
/* Scrolled state — add this class via Elementor Motion Effects
   OR via a tiny JS snippet (see notes at bottom) */
.gl-site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12) !important;
}
 
.gl-header-inner {
  min-height: 72px !important;
}
 
/* ─── LOGO ───────────────────────────────────────── */
.gl-logo-wrap {
  text-decoration: none !important;
  cursor: pointer;
  flex-shrink: 0;
}
 
/* Logo image */
.gl-logo-img .elementor-image img,
.gl-logo-img img {
  height: 77px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
 
/* Logo name (Gul Law) */
.gl-logo-name-w p,
.gl-logo-name {
  font-family: var(--gl-font-head) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--gl-text-dark) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  display: block !important;
}
 
/* Logo sub-label (Criminal Defence Barrister) */
.gl-logo-sub-w p,
.gl-logo-sub {
  font-family: var(--gl-font-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gl-teal) !important;
  line-height: 1 !important;
  display: block !important;
  margin-top: 3px !important;
}
 
/* ─── NAV MENU ───────────────────────────────────── */
/* Targets Elementor Pro's nav-menu widget with class gl-main-nav */
 
.gl-main-nav .elementor-nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}
 
.gl-main-nav .elementor-nav-menu > li > a,
.gl-main-nav .elementor-nav-menu--main .elementor-item {
  font-family: var(--gl-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  padding: 26px 12px !important;
  display: block !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  position: relative !important;
  white-space: nowrap !important;
}
.gl-main-nav .elementor-nav-menu--main{
 visibility: visible !important;
}
.gl-main-nav .elementor-nav-menu--main .elementor-item:hover,
.gl-main-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--gl-teal) !important;
}
.gl-main-nav .elementor-nav-menu--main .elementor-item.has-submenu{
	display:flex !important;
}
 
/* Active underline indicator */
.gl-main-nav .elementor-nav-menu--main .elementor-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 2px !important;
  background: var(--gl-teal) !important;
  border-radius: 2px 2px 0 0 !important;
  transform: scaleX(0) !important;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.gl-main-nav .elementor-nav-menu--main .elementor-item:hover::after,
.gl-main-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  transform: scaleX(1) !important;
}
 
/* ─── Dropdown ────────────────────────────────────── */
.gl-main-nav .elementor-nav-menu--dropdown {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--gl-grey-100) !important;
  min-width: 220px !important;
  padding: 8px 0 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}
 
.gl-main-nav .elementor-nav-menu--dropdown .elementor-item,
.gl-main-nav .elementor-nav-menu--dropdown a {
  font-family: var(--gl-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #374151 !important;
  padding: 10px 20px !important;
  display: block !important;
  transition: background 0.15s, color 0.15s !important;
  border-bottom: none !important;
}
.gl-main-nav .elementor-nav-menu--dropdown a.elementor-item-active{
	color:#fff !important;
}
.gl-main-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.gl-main-nav .elementor-nav-menu--dropdown a:hover {
  background: #F7F8FA !important;
  color: var(--gl-teal) !important;
}
 
/* Dropdown chevron on parent item */
.gl-main-nav .elementor-nav-menu--main li.menu-item-has-children > a::before {
  content: none !important;
}
.gl-main-nav .has-submenu-indicator .elementor-item-wrapper::after,
.gl-main-nav .elementor-item-wrapper .sub-arrow {
  border-top-color: var(--gl-text-muted) !important;
  opacity: 0.6 !important;
}
 
/* ─── NAV CTA BUTTON ─────────────────────────────── */
.gl-btn-nav-cta .elementor-button,
.elementor-widget-button.gl-btn-nav-cta .elementor-button {
  background: var(--gl-teal) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--gl-font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 11px 20px !important;
  white-space: nowrap !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 14px rgba(26, 186, 184, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
.gl-btn-nav-cta .elementor-button:hover,
.elementor-widget-button.gl-btn-nav-cta .elementor-button:hover {
  background: var(--gl-teal-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(26, 186, 184, 0.45) !important;
}
 
/* ════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
════════════════════════════════════════════════════ */
 
/* Hide top bar on mobile */
@media (max-width: 767px) {
  .gl-top-bar { display: none !important; }
}
 
/* Hide desktop nav + CTA on mobile, show hamburger */
@media (max-width: 1023px) {
  .gl-main-nav .elementor-nav-menu--main { display: none !important; }
  .gl-btn-nav-cta { display: none !important; }
}
 
/* Mobile nav panel (Elementor handles hamburger toggling) */
@media (max-width: 1023px) {
  .gl-main-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    display: block !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
    border-top: 2px solid var(--gl-teal) !important;
    padding: 12px 0 20px !important;
    z-index: 9997 !important;
  }
 
  .gl-main-nav .elementor-nav-menu--dropdown .elementor-item,
  .gl-main-nav .elementor-nav-menu--dropdown a {
    font-size: 15px !important;
    padding: 13px 24px !important;
  }
 
  /* Mobile hamburger icon color */
  .gl-main-nav .elementor-menu-toggle {
    color: var(--gl-text-dark) !important;
  }
  .gl-main-nav .elementor-menu-toggle:hover {
    color: var(--gl-teal) !important;
  }
 
  /* Show CTA as a full-width block inside mobile menu */
  .gl-main-nav .elementor-nav-menu--dropdown li.gl-mobile-cta a {
    background: var(--gl-teal) !important;
    color: #ffffff !important;
    margin: 8px 16px 4px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
  }
}



/* ════════════════════════════════════════════════════
   GUL LAW — Services Hub Page CSS
   All gl- variables and gl-btn-* classes are already
   defined in main CSS — NOT repeated here.
   Only new sh- prefixed classes are added.
════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════ */
.sh-hero {
  position: relative;
  overflow: hidden;
}

/* Eyebrow — hero variant */
.sh-eyebrow-wrap p,
.sh-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--gl-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #3DD4D2 !important;
  margin-bottom: 4px !important;
}
.sh-eyebrow-line,
.sh-eyebrow-wrap p::before,
.sh-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 26px !important;
  height: 2px !important;
  background: #1ABAB8 !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Hero title */
.sh-hero-title .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}
.sh-hero-title .elementor-heading-title em {
  font-style: italic !important;
  color: #3DD4D2 !important;
}

/* Hero sub */
.sh-hero-sub-wrap p {
  font-size: 17px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.75 !important;
  max-width: 560px !important;
}

/* ════════════════════════════════════════════════════
   INTRO STRIP
════════════════════════════════════════════════════ */
.sh-intro-strip {
  border-bottom: 1px solid var(--gl-grey-100);
}

.sh-intro-text p {
  font-size: 16px !important;
  color: var(--gl-text-body) !important;
  line-height: 1.8 !important;
  flex: 1 !important;
}

/* Stats box */
.sh-hub-stats-box {
  flex-shrink: 0 !important;
}

.sh-hub-stat {
  padding: 4px 22px !important;
  text-align: center !important;
}

.sh-hub-stat-num .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--gl-teal) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.sh-stat-lbl-wrap p,
.sh-hub-stat-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  white-space: nowrap !important;
}

.sh-stat-div-wrap p,
.sh-stat-div {
  width: 1px !important;
  height: 36px !important;
  background: var(--gl-grey-100) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════
   SECTION HEADER (shared across sections)
════════════════════════════════════════════════════ */

/* Eyebrow — standard teal dark */
.sh-eyebrow {
  font-family: var(--gl-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gl-teal-dark) !important;
}
.sh-eyebrow-line {
  display: inline-block;
  width: 26px; height: 2px;
  background: var(--gl-teal);
  border-radius: 2px;
}

/* Eyebrow — light (for dark sections) */
.sh-eyebrow-light { color: #3DD4D2 !important; }
.sh-eyebrow-line-light {
  display: inline-block;
  width: 26px; height: 2px;
  background: #3DD4D2;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Centered eyebrow */
.sh-eyebrow-center {
  justify-content: center !important;
  color: var(--gl-teal-dark) !important;
}
.sh-eyebrow-center::before { display: none !important; }

/* Section title */
.sh-section-title .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--gl-text-dark) !important;
}
.sh-section-title .elementor-heading-title em {
  font-style: italic !important;
  color: var(--gl-teal) !important;
}
.sh-title-white .elementor-heading-title { color: #ffffff !important; }
.sh-title-white .elementor-heading-title em { color: #3DD4D2 !important; }

.sh-section-desc p {
  font-size: 17px !important;
  color: var(--gl-text-muted) !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════
   SERVICES GRID
════════════════════════════════════════════════════ */
.sh-hub-grid {
  margin-top: 0 !important;
}

/* Each card takes 1/3 width in the flex grid */
.sh-hub-grid > .e-con {
  flex: 0 0 calc(33.33% - 16px) !important;
  min-width: 260px !important;
}
@media (max-width: 1024px) {
  .sh-hub-grid > .e-con { flex: 0 0 calc(50% - 12px) !important; }
}
@media (max-width: 600px) {
  .sh-hub-grid > .e-con { flex: 0 0 100% !important; }
}

/* Card base */
.sh-hub-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s !important;
  cursor: pointer !important;
}
.sh-hub-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.11) !important;
  transform: translateY(-5px) !important;
  border-color: #B2E8E7 !important;
}

/* Card image */
.sh-hub-card-img img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Card icon */
.sh-hub-card-icon {
  width: 44px !important;
  height: 44px !important;
  background: #E8F8F8 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  transition: background 0.2s, color 0.2s !important;
}
.sh-hub-card-icon .elementor-icon {
  color: #0F8A88 !important;
}
.sh-hub-card:hover .sh-hub-card-icon {
  background: var(--gl-teal) !important;
}
.sh-hub-card:hover .sh-hub-card-icon .elementor-icon svg {
  fill: #ffffff !important;
}

/* Card title */
.sh-hub-card-title .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--gl-text-dark) !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
  transition: color 0.2s !important;
}
.sh-hub-card:hover .sh-hub-card-title .elementor-heading-title {
  color: #0F8A88 !important;
}

/* Card description */
.sh-hub-card-desc p {
  font-size: 14px !important;
  color: var(--gl-text-muted) !important;
  line-height: 1.65 !important;
  margin-bottom: 8px !important;
}

/* Card "Learn more" link */
.sh-card-link-wrap p,
.sh-hub-card-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gl-teal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.2s, gap 0.2s !important;
  margin-top: auto !important;
}
.sh-hub-card:hover .sh-card-link-wrap p,
.sh-hub-card:hover .sh-hub-card-link {
  color: #0F8A88 !important;
  gap: 10px !important;
}

/* ─── CTA card ──────────────────────────────────── */
.sh-hub-cta-card {
  transition: box-shadow 0.3s ease !important;
}
.sh-hub-cta-card:hover {
  box-shadow: 0 16px 48px rgba(26, 186, 184, 0.3) !important;
  transform: translateY(-5px) !important;
}

.sh-hub-cta-title .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-align: center !important;
}

.sh-cta-icon .elementor-icon { color: rgba(255, 255, 255, 0.8) !important; }

/* Override gl-btn-white inside the teal CTA card */
.sh-hub-cta-card .gl-btn-white .elementor-button,
.sh-hub-cta-card .elementor-widget-button.gl-btn-white .elementor-button {
  width: 100% !important;
  justify-content: center !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
}

/* ════════════════════════════════════════════════════
   WHY STRIP (dark)
════════════════════════════════════════════════════ */
.sh-why-strip {
  position: relative;
  overflow: hidden;
}
.sh-why-strip::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,186,184,0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.sh-why-strip > .e-con { position: relative; z-index: 1; }

.sh-why-body p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.8 !important;
}

/* Pillar grid — 2×2 inside the right column */
.sh-pillars-grid > .e-con {
  flex: 0 0 calc(50% - 1px) !important;
}

.sh-pillar {
  transition: background 0.2s !important;
}
.sh-pillar:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.sh-pillar-num .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: rgba(26, 186, 184, 0.25) !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}
.sh-pillar-title .elementor-heading-title {
  font-family: var(--gl-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 7px !important;
}
.sh-pillar-body p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.65 !important;
}

/* ════════════════════════════════════════════════════
   LEGAL AID
════════════════════════════════════════════════════ */
.sh-la-body p {
  font-size: 16px !important;
  color: var(--gl-text-body) !important;
  line-height: 1.8 !important;
}
.sh-la-body p strong { color: #0F8A88 !important; font-weight: 600 !important; }

/* Legal Aid qualify box */
.sh-la-box-ttl p,
.sh-la-box-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0F8A88 !important;
  margin-bottom: 4px !important;
}

.sh-la-chk {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--gl-grey-100) !important;
}
.sh-la-chk:last-of-type { border-bottom: none !important; }

.sh-la-chk-icon .elementor-icon { color: var(--gl-teal) !important; }

.sh-la-chk-text span {
  font-size: 14.5px !important;
  color: var(--gl-text-body) !important;
  line-height: 1.5 !important;
}

.sh-la-link-wrap p a,
.sh-la-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F8A88 !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid #B2E8E7 !important;
  padding-bottom: 2px !important;
  transition: color 0.2s, border-color 0.2s !important;
  display: inline-block !important;
  margin-top: 8px !important;
}
.sh-la-link-wrap p a:hover,
.sh-la-link:hover {
  color: var(--gl-teal) !important;
  border-color: var(--gl-teal) !important;
}
/* ── QUICK REFERENCE BOX (Traffic page) ─────────────────── */
.ip-quick-ref-box {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ip-quick-ref-title {
  background: #F7F8FA;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0F8A88;
}
.ip-quick-ref-list {
  padding: 8px 0;
}
.ip-quick-ref-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.2s;
}
.ip-quick-ref-item:last-child { border-bottom: none; }
.ip-quick-ref-item:hover { background: #F7F8FA; }
.ip-quick-ref-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #E8F8F8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F8A88;
  margin-top: 1px;
  flex-shrink: 0;
}
.ip-quick-ref-icon svg { width: 14px; height: 14px; }
.ip-quick-ref-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #0D1117;
  margin-bottom: 2px;
}
.ip-quick-ref-item p {
  font-size: 12.5px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

/* ════════════════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════════════════ */
.sh-cta-title .elementor-heading-title {
  font-family: var(--gl-font-head) !important;
  font-size: clamp(24px, 3.2vw, 38px) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   GUL LAW — ABOUT PAGE CSS
   New classes only — add to bottom of gullaw-inner.css
════════════════════════════════════════════════════════════ */

/* ── HERO SHORT VARIANT ──────────────────────────────────── */
.ip-page-hero--short { min-height: 360px; }

/* ── STATS STRIP ─────────────────────────────────────────── */
.about-stats-strip {
  background: var(--teal-dark, #0F8A88);
  padding: 0;
}
.about-stats-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.about-stat {
  flex: 1;
  text-align: center;
  padding: 28px 16px;
}
.about-stat-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
}
.about-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.about-stat-div {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── TIMELINE ────────────────────────────────────────────── */
.about-timeline {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  padding-left: 40px;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, #1ABAB8, #B2E8E7);
  border-radius: 2px;
}
.about-tl-item {
  position: relative;
  padding-bottom: 40px;
}
.about-tl-item--last { padding-bottom: 0; }
.about-tl-dot {
  position: absolute;
  left: -35px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1ABAB8;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px #1ABAB8;
  flex-shrink: 0;
}
.about-tl-date {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0F8A88;
  background: #E8F8F8;
  border: 1px solid #B2E8E7;
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.about-tl-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: #0D1117;
  margin-bottom: 8px;
  line-height: 1.3;
}
.about-tl-content p {
  font-size: 15px;
  color: #6B7280;
  line-height: 1.75;
}

/* ── COURTS GRID ─────────────────────────────────────────── */
.about-courts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-court-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s;
}
.about-court-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-3px);
  border-color: #B2E8E7;
}
.about-court-icon {
  width: 52px;
  height: 52px;
  background: #E8F8F8;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F8A88;
  margin: 0 auto 16px;
}
.about-court-icon svg { width: 28px; height: 28px; }
.about-court-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #0D1117;
  margin-bottom: 10px;
}
.about-court-card p {
  font-size: 13.5px;
  color: #6B7280;
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   GUL LAW — PROCESS PAGE CSS  (process-page.css)
   New classes only — link after gullaw-inner.css
════════════════════════════════════════════════════════════ */

.proc-steps { display: flex; flex-direction: column; gap: 0; }

/* ── STEP ROW ────────────────────────────────────────────── */
.proc-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 32px;
  padding-bottom: 56px;
}
.proc-step--last { padding-bottom: 0; }

/* Left col: number circle + connecting line */
.proc-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}
.proc-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1ABAB8;
  color: #ffffff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(26,186,184,0.35);
  z-index: 1;
}
.proc-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, #1ABAB8, #B2E8E7);
  margin-top: 12px;
  border-radius: 2px;
  min-height: 40px;
}

/* Right col: image + content, alternating sides */
.proc-step-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.proc-step:nth-child(even) .proc-step-right { direction: rtl; }
.proc-step:nth-child(even) .proc-step-right > * { direction: ltr; }

/* Content */
.proc-content { padding-top: 4px; }
.proc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0F8A88;
  background: #E8F8F8;
  border: 1px solid #B2E8E7;
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.proc-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #0D1117;
  margin-bottom: 14px;
  line-height: 1.25;
}
.proc-content p {
  font-size: 15px;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 14px;
}
.proc-content p:last-child { margin-bottom: 0; }
.proc-content strong { color: #0D1117; font-weight: 600; }

/* Tip/advice box */
.proc-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #E8F8F8;
  border: 1px solid #B2E8E7;
  border-left: 3px solid #1ABAB8;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin-top: 20px;
}
.proc-tip svg { width: 18px; height: 18px; color: #0F8A88; flex-shrink: 0; margin-top: 1px; }
.proc-tip p { font-size: 13.5px !important; color: #0F8A88 !important; line-height: 1.55 !important; margin: 0 !important; }
.proc-tip strong { color: #0A6A68 !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .proc-step-right { grid-template-columns: 1fr; direction: ltr !important; }
  .proc-step:nth-child(even) .proc-step-right { direction: ltr; }
  .proc-img-wrap { order: -1; }
}
@media (max-width: 600px) {
  .proc-step { grid-template-columns: 48px 1fr; gap: 0 20px; }
  .proc-num { width: 42px; height: 42px; font-size: 15px; }
  .proc-content h3 { font-size: 19px; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-courts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .about-stats-inner { flex-wrap: wrap; justify-content: center; }
  .about-stat { min-width: 120px; }
}
@media (max-width: 767px) {
  .about-courts-grid { grid-template-columns: 1fr 1fr; }
  .about-timeline { padding-left: 32px; }
  .ip-page-hero--short { min-height: 280px; }
}
@media (max-width: 480px) {
  .about-courts-grid { grid-template-columns: 1fr; }
  .about-stat-div { display: none; }
  .about-stat { border-bottom: 1px solid rgba(255,255,255,0.15); width: 100%; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sh-intro-inner { flex-direction: column !important; }
  .sh-intro-text { width: 100% !important; }
  .sh-hub-stats-box { width: 100% !important; justify-content: center !important; }
  .sh-why-text-col, .sh-pillars-grid { width: 100% !important; }
  .sh-la-content, .sh-la-box { width: 100% !important; }
}

@media (max-width: 768px) {
  .sh-hero-content { width: 100% !important; }
  .sh-cta-inner { flex-direction: column !important; }
  .sh-pillars-grid > .e-con { flex: 0 0 100% !important; }
}

@media (max-width: 480px) {
  .sh-hero-title .elementor-heading-title { font-size: 38px !important; }
  .sh-hero-actions { flex-direction: column !important; }
  .sh-hero-actions .elementor-button { width: 100% !important; justify-content: center !important; }
  .sh-la-actions { flex-direction: column !important; align-items: stretch !important; }
  .sh-cta-actions { flex-direction: column !important; align-items: stretch !important; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE ADDITIONS
════════════════════════════════════════════════════════════ */
 
/* ── QUICK CONTACT STRIP ─────────────────────────────────── */
.cta-quick-strip {
  background: #0D1117;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-quick-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cta-quick-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  flex: 1;
}
.cta-quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(26,186,184,0.12);
  border: 1.5px solid rgba(26,186,184,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1ABAB8;
  flex-shrink: 0;
}
.cta-quick-icon svg { width: 18px; height: 18px; }
.cta-quick-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.cta-quick-val {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.2;
}
a.cta-quick-val:hover { color: #3DD4D2; }
.cta-quick-div {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   TEAM PAGE ADDITIONS
════════════════════════════════════════════════════════════ */
.team-intro-strip { background: #fff; padding: 72px 0 56px; border-bottom: 1px solid #E5E7EB; }
.team-grid { display: flex; flex-direction: column; gap: 28px; }

/* ── HORIZONTAL CARD LAYOUT ─────────────────────────────── */
.team-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: grid;
  grid-template-columns: 300px 1fr;
}
.team-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-3px); }

/* Image — left side, fixed width, full height */
.team-card-img {
  width: 100%;
  min-height: 340px;
  overflow: hidden;
  background: #EEF2F5;
  flex-shrink: 0;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Body — right side */
.team-card-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
}

/* Name row */
.team-card-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.team-card-name {
  font-family: 'Playfair Display',serif;
  font-size: 26px;
  font-weight: 600;
  color: #0D1117;
  margin: 0 0 8px;
  line-height: 1.15;
}
.team-card-role {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0F8A88;
  background: #E8F8F8;
  border: 1px solid #B2E8E7;
  border-radius: 100px;
  padding: 3px 12px;
}
.team-card-email-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E8F8F8;
  border: 1.5px solid #B2E8E7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F8A88;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.team-card-email-btn:hover { background: #1ABAB8; border-color: #1ABAB8; color: #fff; }
.team-card-email-btn svg { width: 17px; height: 17px; }

/* Placeholder card */
.team-card--placeholder {
  opacity: 0.5;
  pointer-events: none;
  grid-template-columns: 220px 1fr;
}
.team-card--placeholder .team-card-img { min-height: 220px; }
.team-card--placeholder .team-card-body { padding: 28px 36px; justify-content: center; }
.team-placeholder-name { height: 24px; background: #E5E7EB; border-radius: 6px; width: 55%; margin-bottom: 10px; }
.team-placeholder-role { height: 18px; background: #E8F8F8; border-radius: 100px; width: 35%; }
.team-placeholder-bio { height: 14px; background: #F3F4F6; border-radius: 4px; width: 100%; margin-top: 16px; }
.team-placeholder-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-top: 24px;
}

/* ── FINAL RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  .team-card { grid-template-columns: 240px 1fr; }
  .team-card--placeholder { grid-template-columns: 180px 1fr; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 1fr; }
  .team-card--placeholder { grid-template-columns: 1fr; }
  .team-card-img { min-height: 280px; width: 100%; }
  .team-card-body { padding: 24px 24px 28px; }
}
 
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cta-quick-inner { flex-wrap: wrap; }
  .cta-quick-item { min-width: 200px; }
  .cta-quick-div { display: none; }
}
@media (max-width: 767px) {
  .cta-quick-item { padding: 20px 16px; width: 50%; }
}
@media (max-width: 480px) {
  .cta-quick-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.06); }
}