:root {
  --gold: #cb962d;
  --gold-dark: #c38b2a;
  --navy: #165239;
  --navy-soft: #165239;
  --paper: #f9f7f4;
  --line: #e8e4df;
  --ink: #1a1a1a;
  --muted: #666666;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  font-family: "Almarai", sans-serif;
  padding-top: 78px;
}

a {
  text-decoration: none;
}

.navbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--gold), var(--navy));
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 1.2rem;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.brand-kicker,
.eyebrow,
.text-gold {
  color: var(--gold);
}

.text-navy {
  color: var(--navy);
}

.nav-link {
  color: var(--navy);
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--gold);
}

.btn-gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.35rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-gold:hover,
.btn-gold:focus {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
  box-shadow: 0 18px 35px rgba(200, 169, 110, 0.22);
  transform: translateY(-3px);
}

.btn-outline-gold {
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 700;
  padding: 0.75rem 1.35rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
  background: var(--gold);
  color: #fff;
  transform: translateY(-3px);
}

.hero {
  background:
    linear-gradient(115deg, rgb(60, 103, 86), rgb(20, 74, 51)), radial-gradient(circle at 20% 25%, rgb(23, 85, 59), transparent 28%), linear-gradient(135deg, #144a33, #144a33);
  color: #fff;
  min-height: calc(100vh - 78px);
  overflow: hidden;
  position: relative;
}

.hero::after {
  border: 1px solid rgba(200, 169, 110, 0.28);
  border-radius: 999px;
  content: "";
  height: 520px;
  position: absolute;
  right: -160px;
  top: 90px;
  width: 520px;
}

[dir="rtl"] .hero::after {
  left: -160px;
  right: auto;
}

.hero-panel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.hero-symbol {
  align-items: center;
  background: linear-gradient(135deg, rgba(200, 169, 110, 0.28), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: 50%;
  display: flex;
  font-size: clamp(5rem, 13vw, 9rem);
  height: clamp(220px, 34vw, 360px);
  justify-content: center;
  margin-inline: auto;
  width: clamp(220px, 34vw, 360px);
}

.section-pad {
  padding: 5rem 0;
}

.section-soft {
  background: linear-gradient(180deg, #fff, var(--paper));
}

.eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[dir="rtl"] .eyebrow {
  letter-spacing: 0;
}

.section-title {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: 0;
}

.lead-muted,
.text-muted-custom {
  color: var(--muted);
}

.info-card,
.service-card,
.team-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.info-card {
  background: linear-gradient(135deg, var(--paper), #fff);
}

.service-card,
.team-card {
  background: #fff;
  height: 100%;
}

.service-card:hover,
.team-card:hover,
.info-card:hover {
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(200, 169, 110, 0.14);
  transform: translateY(-6px);
}

.icon-bubble {
  align-items: center;
  background: rgba(200, 169, 110, 0.13);
  border-radius: 8px;
  color: var(--gold);
  display: inline-flex;
  flex: 0 0 48px;
  font-size: 1.45rem;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.team-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(200, 169, 110, 0.22), rgba(26, 43, 74, 0.16));
  color: var(--navy);
  display: flex;
  font-size: 4rem;
  height: 180px;
  justify-content: center;
}

.cta-band,
.site-footer {
  background: linear-gradient(90deg, var(--navy), var(--navy-soft));
  color: #fff;
}

.footer-link {
  color: rgba(255, 255, 255, 0.72);
  display: inline-block;
  margin-bottom: 0.65rem;
}

.footer-link:hover {
  color: var(--gold);
}

.whatsapp-float {
  align-items: center;
  background: #25d366;
  border-radius: 50%;
  bottom: 1.5rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  color: #fff;
  display: flex;
  font-size: 1.55rem;
  height: 56px;
  justify-content: center;
  position: fixed;
  right: 1.5rem;
  transition: transform 0.25s ease;
  width: 56px;
  z-index: 1020;
}

[dir="rtl"] .whatsapp-float {
  left: 1.5rem;
  right: auto;
}

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767.98px) {
  body {
    padding-top: 72px;
  }

  .hero {
    min-height: auto;
    padding: 4rem 0;
  }

  .section-pad {
    padding: 4rem 0;
  }

  .hero-panel {
    padding: 1.25rem;
  }
}


```css id="03xz6u"
/* =========================
   Responsive Navbar Logo
========================= */

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Logo Image */
.navbar-brand img {
  width: 400px;
  height: 80px;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Brand Text */
.brand-kicker {
  font-size: 13px;
  color: #c8a45d;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.text-navy {
  color: #144933;
  font-size: 18px;
  font-weight: 700;
}

/* =========================
   Tablet Responsive
========================= */
@media (max-width: 991px) {

  .navbar-brand img {
    width: 250px;
    height: 50px;
  }

  .brand-kicker {
    font-size: 11px;
  }

  .text-navy {
    font-size: 16px;
  }

}

/* =========================
   Mobile Responsive
========================= */
@media (max-width: 576px) {

  .navbar-brand {
    gap: 8px;
  }

  .navbar-brand img {
    width: 250px;
    height: 50px;
  }

  .brand-kicker {
    font-size: 10px;
  }

  .text-navy {
    font-size: 14px;
    line-height: 1.2;
  }

}

/* =========================
   Extra Small Devices
========================= */
@media (max-width: 380px) {

  .navbar-brand img {
    width: 150px;
    height: 40px;
  }

  .brand-kicker {
    font-size: 9px;
  }

  .text-navy {
    font-size: 12px;
  }

}
```





.hero-video{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}

.hero-bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.65));
}

.hero-content{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
}

.hero-content h1{
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:800;
    margin-bottom:20px;
}

.hero-content p{
    max-width:700px;
    font-size:1.2rem;
}


.service-card{
    background:#fff;
    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.service-card::before{
    content:'';
    display:block;
    height:4px;
    background:linear-gradient(90deg,#c8a96e,#165239);
}



.team-card{
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.team-card img{
    height:320px;
    object-fit:cover;
}



/* =====================================
   Premium Saudi Law Firm About Section
===================================== */

.about-saudi-law{
    background:#fff;
    position:relative;
    overflow:hidden;
}

.about-saudi-law::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:350px;
    height:350px;
    background:radial-gradient(
        rgba(203,150,45,.08),
        transparent 70%);
}

.about-content-box{
    position:relative;
}

.about-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(203,150,45,.08);
    color:#cb962d;
    padding:12px 22px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:25px;
}

.about-heading{
    color:#165239;
    font-weight:900;
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.3;
    margin-bottom:20px;
}

.about-headingeg{
    color:#165239;
    font-weight:900;
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.3;
    margin-bottom:20px;
}

.about-heading span{
    display:block;
    color:#cb962d;
}

.gold-line{
    width:100px;
    height:4px;
    background:linear-gradient(
        90deg,
        #cb962d,
        #f1d18a);
    border-radius:50px;
    margin:25px 0;
}

.about-description{
    font-size:1.15rem;
    line-height:2;
    color:#666;
    margin-bottom:35px;
}

.about-stats{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.stat-item{
    text-align:center;
    min-width:120px;
}

.stat-item h3{
    font-size:2.4rem;
    font-weight:900;
    color:#165239;
    margin-bottom:5px;
}

.stat-item span{
    color:#777;
    font-weight:600;
}

.vision-card{
    background:#fff;
    border:1px solid rgba(203,150,45,.15);
    border-radius:24px;
    padding:35px;
    transition:.4s;
    position:relative;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.vision-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:linear-gradient(
        180deg,
        #cb962d,
        #165239);
}

.vision-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.vision-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(
        135deg,
        #cb962d,
        #165239);
    color:#fff;
    font-size:1.8rem;
    margin-bottom:20px;
}

.vision-card h3{
    color:#165239;
    font-weight:800;
    margin-bottom:15px;
}

.vision-card p{
    color:#666;
    line-height:1.9;
    margin:0;
}

@media(max-width:991px){

    .about-heading{
        text-align:center;
    }

    .gold-line{
        margin:20px auto;
    }

    .about-description{
        text-align:center;
    }

    .about-stats{
        justify-content:center;
    }
}


```css
.legal-services-section{
    background:#f8f7f4;
}

.services-label{
    color:#c89a3d;
    font-weight:700;
    font-size:18px;
}

.services-title{
    color:#165239;
    font-weight:900;
    margin-top:15px;
}

.gold-divider{
    width:120px;
    height:3px;
    background:#c89a3d;
    margin:20px auto;
}

.services-timeline{
    max-width:1200px;
    margin:auto;
}

.service-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:60px;
    position:relative;
}

.service-content{
    flex:1;
    max-width:400px;
}

.service-content h3{
    color:#165239;
    font-weight:800;
    margin-bottom:15px;
}

.service-content p{
    color:#555;
    line-height:2;
}

.service-icon{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c89a3d;
    font-size:3rem;
}

.service-count{
    width:55px;
    height:55px;
    border:2px solid #c89a3d;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#165239;
    font-weight:800;
    font-size:20px;
}

.right{
    flex-direction:row;
}

.left{
    flex-direction:row-reverse;
}

@media(max-width:991px){

    .service-item,
    .left,
    .right{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .service-content{
        max-width:100%;
    }
}
```


/* ===========================
   PREMIUM SAUDI SERVICES
=========================== */

.saudi-services-section {

    position: relative;
    overflow: hidden;
    padding: 120px 0;

    background:
    radial-gradient(circle at top right,
    rgba(194,140,41,.18),
    transparent 30%),

    radial-gradient(circle at bottom left,
    rgba(194,140,41,.12),
    transparent 35%),

    linear-gradient(
    135deg,
    #012b1d,
    #013826,
    #165239);

}

.saudi-services-section::before {

    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    top: -250px;
    right: -250px;

    border-radius: 50%;

    background:
    rgba(194,140,41,.05);

}

.services-header {
    margin-bottom: 80px;
}

.services-badge {

    display: inline-block;

    padding: 12px 30px;

    border-radius: 50px;

    border: 1px solid rgba(194,140,41,.4);

    color: #c28c29;

    font-weight: 700;

    letter-spacing: 1px;

}

.services-title {

    color: #fff;

    font-size: 52px;

    font-weight: 900;

    margin-top: 25px;

}

.services-subtitle {

    max-width: 700px;

    margin: 20px auto 0;

    color: rgba(255,255,255,.75);

    line-height: 2;

}

.services-grid {

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap: 30px;

}

.service-box {

    position: relative;

    padding: 45px 30px;

    border-radius: 30px;

    text-align: center;

    overflow: hidden;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.04));

    border:
    1px solid rgba(255,255,255,.12);

    backdrop-filter:
    blur(20px);

    transition: .4s;

}

.service-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
    linear-gradient(
    90deg,
    #c28c29,
    #f0d48a);

}

.service-box:hover {

    transform:
    translateY(-12px)
    scale(1.02);

    border-color: #c28c29;

    box-shadow:
    0 25px 60px rgba(0,0,0,.35),
    0 0 30px rgba(194,140,41,.25);

}

.service-number {

    position: absolute;

    top: 20px;
    left: 20px;

    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    color: #c28c29;

    border: 1px solid #c28c29;

    font-weight: 800;

}

.icon-wrap {

    width: 90px;
    height: 90px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

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

}

.icon-wrap i {

    font-size: 42px;

    color: #012b1d;

}

.service-box h3 {

    color: #fff;

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 15px;

}

.service-box p {

    color:
    rgba(255,255,255,.75);

    line-height: 2;

    margin: 0;

}

.law-btn {

    display: inline-block;

    padding: 16px 50px;

    border-radius: 50px;

    text-decoration: none;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color: #012b1d;

    font-weight: 800;

    transition: .4s;

    box-shadow:
    0 15px 40px
    rgba(194,140,41,.35);

}

.law-btn:hover {

    transform:
    translateY(-5px);

    color: #012b1d;

}

@media(max-width:768px){

    .services-title{
        font-size:36px;
    }

    .service-box{
        padding:35px 25px;
    }

}

.service-saudi-law{
    background:#184c36;
    position:relative;
    overflow:hidden;
}


/* ===================================
   PREMIUM SAUDI LAW TEAM
=================================== */

.law-team-section{

    background:
    linear-gradient(
    135deg,
    #f8f9fa,
    #ffffff);

    padding:120px 0;
}

.team-badge{

    display:inline-block;

    padding:12px 30px;

    border-radius:50px;

    background:
    rgba(194,140,41,.1);

    color:#c28c29;

    font-weight:700;
}

.team-title{

    font-size:48px;

    font-weight:900;

    color:#012b1d;

    margin-top:20px;
}

.team-subtitle{

    color:#666;

    max-width:700px;

    margin:auto;

    line-height:2;
}

.lawyer-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    height:100%;
}

.lawyer-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);
}

.lawyer-image{

    position:relative;

    overflow:hidden;
}

.lawyer-image img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;
}

.lawyer-card:hover img{

    transform:scale(1.08);
}

.lawyer-content{

    padding:30px;
}

.lawyer-role{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color:#012b1d;

    font-size:14px;

    font-weight:800;

    margin-bottom:15px;
}

.lawyer-content h3{

    color:#012b1d;

    font-size:24px;

    font-weight:800;

    margin-bottom:10px;
}

.lawyer-content p{

    color:#777;

    margin:0;
}

@media(max-width:768px){

    .team-title{
        font-size:34px;
    }

    .lawyer-image img{
        height:300px;
    }

}


/* ==========================
   PREMIUM LAW FOOTER
========================== */

.law-map-section iframe{
    width:100%;
    height:450px;
    border:0;
    filter:grayscale(100%) contrast(1.1);
}

.premium-footer{
    background:
    linear-gradient(
    135deg,
    #012b1d,
    #165239);

    color:#fff;

    padding:100px 0 0;

    position:relative;

    overflow:hidden;
}

.premium-footer::before{
    content:"";

    position:absolute;

    top:-250px;
    right:-250px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    rgba(194,140,41,.05);
}

.footer-logo-box{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
}

.footer-logo-box h4{
    font-weight:800;
    margin:0;
}

.footer-logo-box span{
    color:#c28c29;
    font-weight:700;
}

.footer-desc{
    color:rgba(255,255,255,.75);
    line-height:2;
}

.footer-social{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.footer-social a{
    width:50px;
    height:50px;

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

    border-radius:50%;

    color:#fff;

    border:
    1px solid rgba(255,255,255,.15);

    background:
    rgba(255,255,255,.05);

    transition:.4s;
}

.footer-social a:hover{
    transform:
    translateY(-6px);

    background:#c28c29;

    color:#012b1d;

    box-shadow:
    0 15px 30px rgba(194,140,41,.3);
}

.footer-title{
    text-align:center;
    color:#fff;
    font-size:24px;
    font-weight:800;
    margin-bottom:30px;
    position:relative;
}

.footer-title::after{
    content:'';
    display:block;
    width:70px;
    height:3px;
    background:#c89a3d;
    margin:12px auto 0;
    border-radius:50px;
}

.contact-card{
    display:flex;
    gap:20px;

    padding:25px;

    margin-bottom:20px;

    border-radius:20px;

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.contact-card:hover{
    transform:translateY(-5px);

    border-color:#c28c29;
}

.contact-icon{
    width:60px;
    height:60px;

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

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color:#012b1d;

    font-size:24px;
}

.contact-card h6{
    font-weight:700;
}

.contact-card p{
    margin:0;
    color:rgba(255,255,255,.75);
}

.footer-form .form-control{

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:16px 20px;

    border-radius:16px;

    margin-bottom:20px;
    text-align: right;
}

.footer-form .form-control:focus{

    background:
    rgba(255,255,255,.08);

    border-color:#c28c29;

    box-shadow:
    0 0 0 .2rem rgba(194,140,41,.15);

    color:#fff;
}

.footer-form .form-control::placeholder{
    color:rgba(255,255,255,.55);
}




.footer-formen .form-control{

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:16px 20px;

    border-radius:16px;

    margin-bottom:20px;
    text-align: left;
}

.footer-formen .form-control:focus{

    background:
    rgba(255,255,255,.08);

    border-color:#c28c29;

    box-shadow:
    0 0 0 .2rem rgba(194,140,41,.15);

    color:#fff;
}

.footer-formen .form-control::placeholder{
    color:rgba(255,255,255,.55);
}




.footer-formzh .form-control{

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:16px 20px;

    border-radius:16px;

    margin-bottom:20px;
    text-align: left;
}

.footer-formzh .form-control:focus{

    background:
    rgba(255,255,255,.08);

    border-color:#c28c29;

    box-shadow:
    0 0 0 .2rem rgba(194,140,41,.15);

    color:#fff;
}

.footer-formzh .form-control::placeholder{
    color:rgba(255,255,255,.55);
}










.footer-btn{

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color:#012b1d;

    border:none;

    padding:16px;

    border-radius:16px;

    font-weight:800;

    transition:.4s;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.footer-btn:disabled{
    cursor:not-allowed;
    opacity:.85;
    transform:none !important;
    box-shadow:none !important;
}

.footer-btn-spinner{
    width:18px;
    height:18px;
    border:3px solid rgba(1,43,29,.25);
    border-top-color:#012b1d;
    border-radius:50%;
    display:inline-block;
    animation:footer-btn-spin .7s linear infinite;
}

@keyframes footer-btn-spin{
    to{ transform:rotate(360deg); }
}

.footer-form .form-control.is-invalid,
.footer-formen .form-control.is-invalid,
.footer-formzh .form-control.is-invalid{
    border-color:#dc3545 !important;
    box-shadow:0 0 0 .2rem rgba(220,53,69,.2) !important;
}

.field-error{
    color:#ff9b9b;
    font-size:13px;
    margin-top:-14px;
    margin-bottom:16px;
}

.footer-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 35px rgba(194,140,41,.35);

    color:#012b1d;
}

.footer-bottom{

    margin-top:80px;

    padding:30px 0;

    text-align:center;

    border-top:
    1px solid rgba(255,255,255,.1);
}

.footer-bottom p{
    margin:0;
    color:rgba(255,255,255,.7);
}

@media(max-width:991px){

    .premium-footer{
        padding-top:80px;
    }

    .law-map-section iframe{
        height:350px;
    }

    .footer-title{
        margin-top:20px;
    }

}

@media(max-width:576px){

    .law-map-section iframe{
        height:280px;
    }

    .footer-logo-box{
        flex-direction:column;
        text-align:center;
    }

    .footer-social{
        justify-content:center;
    }

}  


/* ==========================
   PREMIUM HERO CONTENT
========================== */

.hero-content{

    position: relative;
    z-index: 2;

    min-height: 100vh;

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

    text-align: center;
}

.hero-text-box{

    max-width: 950px;

    margin: auto;

    animation: fadeUp 1s ease;
}

.hero-badge{

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 28px;

    border-radius: 50px;

    margin-bottom: 30px;

    background:
    rgba(255,255,255,.08);

    border:
    1px solid rgba(200,169,110,.35);

    backdrop-filter: blur(10px);

    color: #c8a96e;

    font-weight: 700;
}

.hero-title{

    color: #fff;

    font-size: clamp(2.5rem, 2vw, 4.8rem);

    font-weight: 900;

    line-height: 1.5;

    margin-bottom: 30px;

    text-shadow:
    0 8px 30px rgba(0,0,0,.35);
}

.hero-subtitle{

    max-width: 800px;

    margin: auto auto 45px;

    color: rgba(255,255,255,.85);

    font-size: 1.2rem;

    line-height: 2;
}

.hero-buttons{

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;
}

.hero-btn,
.hero-btn-outline{

    padding: 16px 40px;

    border-radius: 50px;

    font-weight: 800;

    font-size: 1rem;

    transition: .4s;
}

.hero-btn:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 20px 40px rgba(200,169,110,.35);
}

.hero-btn-outline{

    border: 2px solid rgba(255,255,255,.4);
}

.hero-btn-outline:hover{

    background: #fff;

    color: #165239;

    transform:
    translateY(-5px);
}

/* Animation */

@keyframes fadeUp{

    from{

        opacity: 0;

        transform:
        translateY(40px);
    }

    to{

        opacity: 1;

        transform:
        translateY(0);
    }
}

/* Tablet */

@media(max-width:991px){

    .hero-content{
        min-height: 90vh;
    }

    .hero-title{
        font-size: 3rem;
    }
}

/* Mobile */

@media(max-width:576px){

    .hero-content{
        min-height: 85vh;
    }

    .hero-title{

        font-size: 2rem;

        line-height: 1.7;
    }

    .hero-subtitle{

        font-size: 1rem;
    }

    .hero-buttons{

        flex-direction: column;

        align-items: center;
    }

    .hero-btn,
    .hero-btn-outline{

        width: 100%;

        max-width: 280px;
    }
}




/* ==========================
   PREMIUM LAW NAVBAR
========================== */

.navbar{

    background:
    rgba(255,255,255,.96);

    backdrop-filter: blur(20px);

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

    border-bottom:
    1px solid rgba(0,0,0,.06);
}

/* Menu */

.premium-nav{

    gap: 10px;
}

.premium-nav .nav-link{

    position: relative;

    padding: 12px 18px !important;

    color: #165239;

    font-weight: 700;

    font-size: 16px;

    transition: .3s;
}

.premium-nav .nav-link span{

    position: relative;

    z-index: 2;
}

/* Gold Hover Line */

.premium-nav .nav-link::after{

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    border-radius: 20px;

    background:
    linear-gradient(
    90deg,
    #cb962d,
    #f0d48a);

    transition: .35s ease;

    transform:
    translateX(-50%);
}

.premium-nav .nav-link:hover,
.premium-nav .nav-link.active{

    color: #cb962d;
}

.premium-nav .nav-link:hover::after,
.premium-nav .nav-link.active::after{

    width: 70%;
}

/* Action Buttons */

.nav-actions{

    display: flex;

    align-items: center;

    gap: 12px;
}

/* Language Button */

.btn-language{

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 22px;

    border-radius: 50px;

    border:
    1px solid rgba(203,150,45,.3);

    color: #165239;

    font-weight: 700;

    transition: .3s;
}

.btn-language:hover{

    background:
    rgba(203,150,45,.08);

    color: #cb962d;
}

/* Consultation Button */

.btn-consultation{

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 13px 28px;

    border-radius: 50px;

    border: none;

    font-weight: 800;

    color: #fff;

    background:
    linear-gradient(
    135deg,
    #cb962d,
    #e5bf68);

    box-shadow:
    0 12px 30px rgba(203,150,45,.25);

    transition: .35s;
}

.btn-consultation:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 20px 40px rgba(203,150,45,.35);

    color: #fff;
}

/* Mobile */

@media(max-width:991px){

    .navbar-collapse{

        margin-top: 20px;

        padding: 25px;

        border-radius: 24px;

        background: #fff;

        box-shadow:
        0 15px 40px rgba(0,0,0,.08);
    }

    .premium-nav{

        gap: 0;
    }

    .premium-nav .nav-link{

        padding: 16px 0 !important;

        border-bottom:
        1px solid rgba(0,0,0,.05);
    }

    .nav-actions{

        margin-top: 25px;

        flex-direction: column;

        width: 100%;
    }

    .btn-language,
    .btn-consultation{

        width: 100%;

        justify-content: center;
    }
}










/* ==========================
   Dynamic Service Modal
========================== */

.premium-modal{

    border:none;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.2);
}

.premium-modal .modal-header{

    padding:35px;

    background:
    linear-gradient(
    135deg,
    #012b1d,
    #165239);

    color:#fff;
}

.modal-icon{

    width:70px;
    height:70px;

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

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color:#012b1d;

    font-size:32px;
}

.premium-modal .modal-title{

    font-size:30px;

    font-weight:800;
}

.premium-modal .modal-body{

    padding:40px;
}

#modalDescription{

    color:#555;

    line-height:2;

    font-size:17px;

    margin-bottom:30px;
}

.service-features{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:15px;
}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:#f8f9fa;

    transition:.3s;
}

.feature-item:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.08);
}

.feature-item i{

    color:#c28c29;

    font-size:20px;
}

.btn-close{

    filter:
    brightness(0)
    invert(1);
}

@media(max-width:768px){

    .premium-modal .modal-title{

        font-size:24px;
    }

    .premium-modal .modal-body{

        padding:25px;
    }
}


/* ==========================
   Equal Height Service Cards
========================== */

.service-box{

    display: flex;

    flex-direction: column;

    height: 100%;
}

/* Push button to bottom */

.service-box p{

    flex-grow: 1;
}


/* ==========================
   Premium Read More Button
========================== */

.service-read-btn{

    margin-top: auto;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 24px;

    border: none;

    border-radius: 50px;

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color: #012b1d;

    font-size: 15px;

    font-weight: 800;

    transition: all .35s ease;

    overflow: hidden;

    position: relative;
}

.service-read-btn span,
.service-read-btn i{

    position: relative;

    z-index: 2;
}

/* Shine Effect */

.service-read-btn::before{

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition: .6s;
}

.service-read-btn:hover::before{

    left: 100%;
}

/* Hover */

.service-read-btn:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 18px 35px rgba(194,140,41,.35);

    color: #012b1d;
}

/* Icon Animation */

.service-read-btn i{

    transition: transform .3s ease;
}

.service-read-btn:hover i{

    transform:
    translateX(-6px);
}




.lawyer-content-center{

    text-align: center;
}

.lawyer-content-center .lawyer-role{

    display: inline-block;

    margin-bottom: 15px;
}

.lawyer-content-center h3{

    margin-bottom: 0;

    font-weight: 800;

    color: #012b1d;
}


/* Smaller Premium Modal */

.custom-modal-sm{

    max-width: 700px;
}

.premium-modal{

    border: none;
    border-radius: 24px;
    overflow: hidden;
}

.premium-modal .modal-header{

    padding: 20px 25px;
    background: linear-gradient(
        135deg,
        #012b1d,
        #165239
    );
}

.modal-icon{

    width: 55px;
    height: 55px;

    border-radius: 14px;

    font-size: 22px;
}

#modalTitle{

    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.premium-modal .modal-body{

    padding: 25px;
}

#modalDescription{

    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 20px;
}

.service-features{

    display: grid;

    grid-template-columns:
    repeat(2,1fr);

    gap: 10px;
}

.feature-item{

    padding: 12px 15px;

    border-radius: 12px;

    font-size: 14px;

    background: #f8f9fa;
}

.feature-item i{

    font-size: 16px;
}

@media(max-width:768px){

    .custom-modal-sm{

        max-width: 95%;
        margin: auto;
    }

    .service-features{

        grid-template-columns: 1fr;
    }

    #modalTitle{

        font-size: 20px;
    }

    .modal-icon{

        width: 45px;
        height: 45px;

        font-size: 18px;
    }
}


@media (max-width: 991px){

    .btn-gold{
        display: table;
        margin: 30px auto 0 !important;
    }

}




.language-switcher{

    display:flex;
    align-items:center;
    gap:8px;
}

.lang{

    width:48px;
    height:48px;

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

    border-radius:50%;

    text-decoration:none;

    background:
    rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-weight:700;

    transition:.3s;
}

.lang:hover,
.lang.active{

    background:
    linear-gradient(
    135deg,
    #c28c29,
    #f0d48a);

    color:#012b1d;
}



/* ==========================
   Lawyer Profile Button
========================== */

.lawyer-profile-btn{

    margin-top: 25px;

    padding: 12px 28px;

    border: none;

    border-radius: 50px;

    background:
    linear-gradient(
        135deg,
        #c28c29,
        #f0d48a
    );

    color: #012b1d;

    font-weight: 800;

    transition: .35s;
}

.lawyer-profile-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(194,140,41,.30);
}


/* ==========================
   Lawyer Modal
========================== */

.lawyer-modal-dialog{

    max-width: 700px;
}

.lawyer-modal{

    border: none;

    border-radius: 28px;

    overflow: hidden;
}

.lawyer-modal .modal-header{

    background:
    linear-gradient(
        135deg,
        #012b1d,
        #165239
    );

    color: #fff;

    padding: 25px 30px;
}

.lawyer-modal-icon{

    width: 70px;
    height: 70px;

    border-radius: 18px;

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

    background:
    linear-gradient(
        135deg,
        #c28c29,
        #f0d48a
    );

    color: #012b1d;

    font-size: 28px;
}

.lawyer-modal .modal-body{

    padding: 35px;

    line-height: 2;

    color: #555;
}

.lawyer-achievements{

    margin-top: 30px;

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(250px,1fr));

    gap: 15px;
}

.achievement-item{

    padding: 16px 20px;

    border-radius: 16px;

    background: #f8f9fa;

    display: flex;

    align-items: center;

    gap: 12px;
}

.achievement-item i{

    color: #c28c29;

    font-size: 20px;
}

.btn-close{

    filter:
    brightness(0)
    invert(1);
}


/* Founder Card */

.lawyer-card{

    max-width: 100%;

    margin: 0 auto;

    text-align: center;
}

.lawyer-content-center{

    text-align: center;
}

.lawyer-position{

    color: #666;

    font-size: 16px;

    font-weight: 600;

    margin: 15px 0 25px;

    line-height: 1.8;
}


/* Contact Details */

.contact-details h6{

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 10px;

    color: #ffffff;
}

.contact-details p{

    margin-bottom: 8px;

    font-size: 20px;

    font-weight: 600;

    color: rgba(255,255,255,.85);
}

.contact-details a{

    color: rgba(255,255,255,.85);

    text-decoration: none;

    transition: .3s ease;
}

.contact-details a:hover{

    color: #c28c29;

    text-decoration: underline;
}

/* Footer Title */

.footer-title{

    font-size: 26px;

    font-weight: 800;

    margin-bottom: 35px;
}



/* Success Alert */

.success-alert{

    display: none;

    margin-top: 20px;

    padding: 18px 25px;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #0f5132,
        #198754
    );

    color: #fff;

    font-weight: 700;

    text-align: center;

    animation: slideDown .5s ease;
}

.success-alert i{

    margin-left: 10px;

    font-size: 22px;
}

/* Error Alert */

.error-alert{

    display: none;

    margin-top: 20px;

    padding: 18px 25px;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #7a1f1f,
        #b91c1c
    );

    color: #fff;

    font-weight: 700;

    text-align: center;

    animation: slideDown .5s ease;
}

.error-alert i{

    margin-left: 10px;

    font-size: 22px;
}

@keyframes slideDown{

    from{

        opacity: 0;

        transform: translateY(-20px);
    }

    to{

        opacity: 1;

        transform: translateY(0);
    }
}