.phone {
    color: #ffffff;
    font-size: 14px;
    display: inline-block;
    transform: rotate(-983deg);
}

    :root{
      --teal:#16b5aa;
      --navy:#2b356f;
      --white:#ffffff;
      --muted:rgba(255,255,255,.75);
      --btnOrange:#d9822a;
      --btnDark:#2f3a73;
      --line:rgba(255,255,255,.12);
    }

    *{ box-sizing:border-box; margin:0; padding:0; }
    body{ font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#111; }
    a{ text-decoration:none; color:inherit; }

    /* SECTION WRAPPER */
    .hero{
      width:100%;
      min-height: 640px;
      background: linear-gradient(135deg, #2a2f6b 0%, #2b356f 45%, #2a3167 100%);
      position:relative;
      overflow:hidden;
    }

    /* TOP TEAL BAR */
    .topbar{
      height:34px;
      background:var(--teal);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 56px;
      color:#fff;
      font-size:12px;
      font-weight:600;
    }
    .topbar .left, .topbar .right{
      display:flex;
      align-items:center;
      gap:18px;
      opacity:.95;
    }
    .item img {
    /* width: 12px; */
    height: 12px;
    display: block;
    filter: brightness(0) invert(1);
}
.logoBox img {
  max-height: 60px;
  cursor: pointer;
}
    .topbar .item{
      display:flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
    }
    .topbar .sep{
      width:1px; height:14px;
      background:rgba(255,255,255,.35);
      display:inline-block;
    }

    /* NAVBAR */
    .navbar{
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 56px;
      border-bottom:1px solid var(--line);
    }

    /* Logo box */
    .logoBox{
      width: 204px;
      height: 77px;
      background:#fff;
      border-radius:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }
    .logoMark{
      width:34px; height:34px;
      border-radius:8px;
      background:linear-gradient(135deg, #ff7a18, #af002d 60%, #319197);
    }
    .logoText{
      font-weight:700;
      color:#2b356f;
      font-size:18px;
    }

    .navLinks{
      display:flex;
      align-items:center;
      gap:26px;
      color:#fff;
      font-weight:600;
      font-size:13px;
      opacity:.95;
    }
    .navLinks a.active{ color:var(--teal); }

    /* CTA button */
    .ctaBtn{
      background:var(--btnOrange);
      color:#fff;
      border:none;
      padding:12px 18px;
      border-radius:10px;
      font-weight:700;
      font-size:12px;
      display:flex;
      align-items:center;
      gap:10px;
      box-shadow:0 12px 24px rgba(0,0,0,.22);
      cursor:pointer;
    }
    .ctaBtn .arrowBox{
      width:26px; height:26px;
      background:#fff;
      border-radius:7px;
      display:grid;
      place-items:center;
      color:#000;
      font-weight:900;
      line-height:1;
    }

    /* HERO CONTENT */
    .heroInner{
      padding: 34px 56px 70px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 28px;
      align-items:center;
      min-height: calc(640px - 34px - 78px);
    }

    /* LEFT ART AREA */
    .artArea{
      position:relative;
      height: 460px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* Background glow shape */
.bgShape {
    position: absolute;
    width: 545px;
    height: 571px;
    left: -19px;
    top: 0px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
    /* Main statue/book image */
    .heroImage{
      position:absolute;
      width: 700px;
      left: 110px;
      top: 30px;
      object-fit: contain;
      pointer-events:none;
      user-select:none;
    }

    /* Small icons */
    .miniIcon{
      position:absolute;
      width: 18px;
      height: 18px;
      object-fit: contain;
      pointer-events:none;
      user-select:none;
      filter: drop-shadow(0 8px 10px rgba(0,0,0,.25));
    }
    .miniIcon1{ left: 95px; top: 150px; }
    .miniIcon2{ left: 365px; top: 225px; }

    /* RIGHT TEXT AREA */
    .copyArea{ padding-left: 10px; }

    .headline{
      color:#fff;
      font-size:48px;
      font-weight:800;
      line-height:1.05;
      letter-spacing: .4px;
      text-transform:uppercase;
      max-width:520px;
    }
    .subtext{
      margin-top:18px;
      color:var(--muted);
      font-size:13px;
      line-height:1.65;
      max-width:500px;
    }

    .btnRow{
      margin-top:26px;
      display:flex;
      gap:14px;
      align-items:center;
    }
    .btn{
      height:38px;
      padding:0 22px;
      border-radius:2px;
      border:1px solid rgba(255,255,255,.15);
      font-weight:800;
      font-size:11px;
      letter-spacing:.2px;
      cursor:pointer;
    }
    .btn.dark{
      background:var(--btnDark);
      color:#fff;
      border-color: rgba(255,255,255,.08);
    }
    .btn.light{
      background:#fff;
      color:#1a1a1a;
      border-color:#fff;
    }

    /* Responsive */
    @media (max-width: 980px){
      .topbar, .navbar, .heroInner{ padding-left:20px; padding-right:20px; }
      .heroInner{ grid-template-columns: 1fr; }
      .copyArea{ padding-left:0; }
      .headline{ font-size:40px; }
      .artArea{ height: 380px; }

      .bgShape{ left: 0px; top: -40px; width: 520px; height: 520px; }
      .heroImage{ left: 20px; top: 10px; width: 520px; }
    }
    
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:Inter, system-ui, Arial, sans-serif;
  background:#fff;
  color:#111;
}

/* SECTION WRAPPER */
.manage-section{
  margin-top: 4rem;
  padding:0px 120px;
}

/* GRID */
.manage-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:start;
}

/* TOP LEFT IMAGE */
.diagram img{
  max-width:100%;
  display:block;
}

/* TOP RIGHT BOX */
.info-box{
  /* border:2px solid #1e90ff; */
  padding:28px 30px;
}

.info-box h5{
  font-size:14px;
  font-weight:700;
  letter-spacing:.6px;
  margin-bottom:10px;
}

.info-box h2{
  font-size:24px;
  font-weight:600;
  margin-bottom:12px;
}

.info-box p{
  font-size:14px;
  line-height:1.6;
  color:#444;
  margin-bottom:18px;
}

.info-box .btn{
  background:#ff7a22;
  color:#fff;
  border:none;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:3px;
}

/* BOTTOM CONTENT */
.bottom-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* LEFT TEXT */
.content h2{
  font-size:26px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:16px;
}

.content p{
  font-size:14px;
  line-height:1.7;
  color:#444;
  margin-bottom:14px;
}

.content .btn{
  margin-top:18px;
  background:#ff7a22;
  color:#fff;
  border:none;
  padding:10px 20px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:3px;
}

/* RIGHT IMAGE */
.people img{
  max-width:100%;
  display:block;
}

/* RESPONSIVE */
@media(max-width: 900px){
  .manage-grid,
  .bottom-grid{
    grid-template-columns:1fr;
  }
  .manage-section{
    padding:60px 20px;
  }
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Inter, system-ui, Arial, sans-serif;
  background:#fff;
  color:#111;
}

/* SECTION WRAPPER */
.guarantee-section{
  position:relative;
  padding:70px 60px;
  overflow:hidden;
}

/* Background shape */
.guarantee-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("./images/mid-background.jpg");
  opacity:.35;
  z-index:0;
}

/* CONTENT GRID */
.guarantee-container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap:60px;
}

/* LEFT CONTENT */
.guarantee-content span{
  color:#1e90ff;
  font-size:13px;
  font-weight:600;
  display:inline-block;
  margin-bottom:14px;
}

.guarantee-content h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:16px;
}

.guarantee-content p{
  font-size:14px;
  line-height:1.7;
  color:#444;
  max-width:420px;
  margin-bottom:26px;
}

/* BUTTON */
.guarantee-content .btn{
  background:#ff7a22;
  color:#fff;
  border:none;
  padding:12px 26px;
  font-size:13px;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
}

/* RIGHT IMAGE */
.guarantee-image{
  text-align:center;
}

.guarantee-image img{
  max-width:190px;
  width:100%;
  display:inline-block;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.15));
}

/* RESPONSIVE */
@media(max-width: 900px){
  .guarantee-section{
    padding:70px 20px;
  }
  .guarantee-container{
    grid-template-columns:1fr;
    text-align:left;
  }
  .guarantee-image{
    margin-top:40px;
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:Inter, system-ui, Arial, sans-serif; background:#fff; }

/* ===== Whole Block ===== */
.why-cta{
  width:100%;
}

/* ===== TOP STRIP ===== */
.why-top{
  background:#1c5f9f;
  background-image: url("../legal-images/Why-we-back.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  padding:60px 20px 70px;
  text-align:center;
  position:relative;
  color:#fff;
}

/* Title */
.why-top h2{
  font-size:22px;
  font-weight:700;
  letter-spacing:.8px;
  margin-bottom:16px;
  text-transform:uppercase;
}

/* Paragraph */
.why-top p{
  max-width:900px;
  margin:0 auto;
  font-size:12.5px;
  line-height:1.7;
  color:rgba(255,255,255,.9);
}

/* ===== BOTTOM STRIP ===== */
.why-bottom{
  background:#2A3276;
  padding:60px 20px 65px;
  text-align:center;
  color:#fff;
}

/* Big heading */
.why-bottom h3{
  font-size:34px;
  font-weight:800;
  letter-spacing:.7px;
  margin-bottom:18px;
  text-transform:uppercase;
}

/* Divider row (line + phone icon + line) */
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:16px;
}

.divider .line{
  width:70px;
  height:1px;
  background:rgba(255,255,255,.25);
}

.divider .phone{
  font-size:14px;
  opacity:.9;
}

/* Sub label */
.consult-label{
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-bottom:8px;
}

/* Phone number */
.consult-number{
  font-size:28px;
  font-weight:700;
  color:#d8a84a; /* gold */
  letter-spacing:1px;
  margin-bottom:22px;
}

/* Button */
.consult-btn{
  background:#3a4d86;
  border:none;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:12px 26px;
  cursor:pointer;
  text-transform:uppercase;
  border-radius:2px;
}
/* Responsive */
@media (max-width: 768px){
  .why-top{ padding:45px 16px 55px; }
  .why-bottom{ padding:45px 16px 55px; }
  .why-bottom h3{ font-size:28px; }
}

.divider .phone 
{
    transform: rotate(46deg);
}
/* ===== BEST SERVICES ===== */
  .best-services{
    position: relative;
    padding: 80px 0 95px;
    background: #eef3f6;
    overflow: hidden;

    /* Banner image (your 2nd screenshot) */
    background-image: url("../legal-images/best-service-banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .best-services__inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .best-services__title{
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #111;
    margin-bottom: 34px;
  }

  /* Grid */
  .best-services__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  /* Card */
  .svc-card{
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    padding: 26px 22px 22px;
    min-height: 210px;
  }

  .svc-card__icon{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0c4a82; /* dark blue circle */
    display: grid;
    place-items: center;
    margin-bottom: 14px;
  }

  .svc-card__icon img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
  }

  .svc-card__heading{
    font-size: 12px;
    font-weight: 700;
    color: #111;
    margin: 2px 0 10px;
  }

  .svc-card__text{
    font-size: 11.5px;
    line-height: 1.55;
    color: #4b4b4b;
  }
/* WHY CHOOSE US */
.why-choose{
  padding: 70px 20px 80px;
  background:#ffffff;
  text-align:center;
}

.why-title{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 40px;
  color:#111;
}

/* GRID */
.why-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* CARD */
.why-card{
  background:#041c3b;           /* dark navy */
  border-radius: 3px;
  padding: 30px 18px 26px;
  color:#fff;
}

/* ICON */
.why-card img{
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
}

/* TITLE */
.why-card h3{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  margin-bottom: 8px;
}

/* TEXT */
.why-card p{
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}

  /* ===== LOGIN STEPS SECTION ===== */
  .login-steps{
    position:relative;
    padding: 70px 0 85px;
    color:#fff;
    overflow:hidden;

    /* background image you provided */
    background-image: url("../legal-images/login-background.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }

  .login-steps__inner{
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
    text-align:center;
  }

  .login-steps__title{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .login-steps__subtitle{
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.75);
    max-width: 680px;
    margin: 0 auto 40px;
  }

  .login-steps__grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    align-items:start;
    justify-items:center;
  }

  /* Step blocks */
  .step-card{
    width: 270px;
  }

  .step-card__icon{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display:grid;
    place-items:center;
    margin: 0 auto 12px;
  }

  .step-card__icon img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    display:block;
  }

  .step-card__title{
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .step-card__text{
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255,255,255,.75);
  }

  .site-footer{
  position: relative;
  background:#2A3276;
  color:#fff;
  padding: 0 0 22px;
  overflow:hidden;
  font-family: Inter, system-ui, Arial, sans-serif;
}

/* Decorative shapes (very light) */
.f-shape{
  position:absolute;
  opacity:.15;
  pointer-events:none;
  user-select:none;
}
.f-shape--t1{ left: 35px; top: 30px; width: 38px; }
.f-shape--t2{ left: 75px; top: 58px; width: 26px; }
.f-shape--t3{ right: 55px; top: 55px; width: 36px; }
.f-shape--t4{ right: 30px; top: 35px; width: 24px; }

.footer-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Top row */
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Big logo box (white) */
.footer-logoBox{
  width: 250px;
  height: 90px;
  background:#fff;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-logoBox img{
  height: 54px;
  width:auto;
  display:block;
}

/* Socials on right */
.footer-social{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-social__label{
  font-size:13px;
  color:rgba(255,255,255,.9);
  margin-right:8px;
}
.footer-social__icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  display:grid;
  place-items:center;
}
.footer-social__icon img{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
}

/* Divider lines */
.footer-divider{
 
  background: rgba(255,255,255,.10);
  margin: 18px 0 0;
}
.footer-divider--bottom{
  margin: 40px 0 14px;
}

/* Grid columns */
.footer-grid{
  display:grid;
  grid-template-columns: 140px 140px 170px 260px 1fr;
  gap: 20px;
  padding-top: 26px;
  align-items:start;
}

.footer-title{
  font-size:14px;
  font-weight:700;
  margin-bottom: 12px;
  color:#fff;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-list li{
  margin: 10px 0;
}
.footer-list a{
  color: rgba(255,255,255,.75);
  font-size:12px;
  text-decoration:none;
}
.footer-list a:hover{
  color:#fff;
}

/* Contact */
.footer-contact{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.footer-contact__row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.footer-contact__icon{
  width: 28px;
  height: 28px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  flex: 0 0 28px;
}
.footer-contact__icon img{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
}
.footer-contact__text{
  font-size:12px;
  line-height:1.5;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
}

/* Subscribe */
.footer-subtext{
  font-size:12px;
  line-height:1.5;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}

.footer-form{
  display:flex;
  align-items:center;
  width: 250px;
  height: 36px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
}

.footer-input{
  border:none;
  outline:none;
  padding: 0 12px;
  height: 100%;
  width: 100%;
  font-size:12px;
  color:#333;
}
.footer-input::placeholder{
  color:#8a8a8a;
}

.footer-btn{
  width: 42px;
  height: 100%;
  border:none;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.footer-btn img{
  width: 40px;
  height: 40px;
  object-fit:contain;
  display:block;
}

/* Bottom copyright */
.footer-copy{
  text-align:center;
  font-size:12px;
  color: rgba(255,255,255,.75);
  padding-bottom: 10px;
}

/* Responsive */
@media (max-width: 1050px){
  .footer-logoBox{ width: 360px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-col--subscribe .footer-form{ width: 100%; max-width: 280px; }
}
@media (max-width: 620px){
  .footer-wrap{ padding: 0 18px; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap: 14px; }
  .footer-logoBox{ width: 100%; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-form{ width: 100%; max-width: 320px; }
}


  /* Responsive */
  @media(max-width: 900px){
    .login-steps__grid{
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .step-card{ width: 100%; max-width: 360px; }
  }

/* RESPONSIVE */
@media (max-width: 900px){
  .why-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px){
  .why-grid{
    grid-template-columns: 1fr;
  }
}

  /* Responsive */
  @media (max-width: 980px){
    .best-services__grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px){
    .best-services{ padding: 60px 0 70px; }
    .best-services__grid{ grid-template-columns: 1fr; }
    .svc-card{ min-height: auto; }
  }