/* =========================================
   RESPONSIVE.CSS
   MAXLAW LEGAL SOLUTION
========================================= */


/* =========================================
   LARGE LAPTOPS
========================================= */

@media (max-width: 1400px) {

  .hero-content h1 {
    font-size: 60px;
  }

  .section-title h2,
  .about-content h2,
  .cta-content h2 {
    font-size: 46px;
  }

}


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

@media (max-width: 1200px) {

  .hero-container,
  .about-container,
  .contact-container {
    gap: 50px;
  }

  .hero-content h1 {
    font-size: 52px;
  }

  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }

}


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

@media (max-width: 991px) {

  /* =========================
      COMMON
  ========================= */

  .section-padding {
    padding: 90px 0;
  }

  .section-title {
    margin-bottom: 55px;
  }

  .section-title h2,
  .about-content h2,
  .cta-content h2 {

    font-size: 40px;
    line-height: 1.2;

  }

  /* =========================
      TOPBAR
  ========================= */

  .topbar {

      padding: 8px 0;

  }

.topbar-container {

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}

.topbar-left,
.topbar-right {

    justify-content: flex-start;

    flex-wrap: nowrap;

}
.topbar-right {

    display: none;

}

  /* =========================
      HEADER
  ========================= */

  .header {

    position: fixed;

    background: rgba(10, 25, 45, 0.96);

    backdrop-filter: blur(14px);

    box-shadow: 0 5px 20px rgba(0,0,0,0.12);

  }

  .nav-container {

    padding: 18px 20px;

  }

  .logo {

    font-size: 32px;

  }

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

  .menu-toggle {

    display: block;

    z-index: 1001;

  }

  .navbar {

    position: fixed;
    top: 0;
    right: -100%;

    width: 320px;
    height: 100vh;

    background: #102947;

    padding: 120px 40px;

    transition: 0.5s ease;

    z-index: 1000;

  }

  .navbar.active {
    right: 0;
  }

  .nav-links {

    flex-direction: column;
    align-items: flex-start;

    gap: 28px;

  }

.trust-item {

  min-width: 0;

}

  .nav-links a {

    font-size: 18px;

  }

  .header .primary-btn {
    display: none;
  }

  /* =========================
      HERO SECTION
  ========================= */

  .hero {

    padding: 180px 0 100px;
    min-height: auto;

  }

  .hero-container {

    grid-template-columns: 1fr;

  }

  .hero-content {

    order: 2;

    text-align: center;

  }

  .hero-image {

    order: 1;

    max-width: 600px;
    margin: auto;

  }

  .hero-content h1 {

    font-size: 56px;

  }

  .hero-content p {

    margin: auto auto 35px;

  }

  .hero-buttons {

    justify-content: center;
    flex-wrap: wrap;

    margin-bottom: 45px;

  }

  .trust-boxes {

    justify-content: center;
    flex-wrap: wrap;

  }

  /* =========================
      ABOUT SECTION
  ========================= */

  .about-container {

    grid-template-columns: 1fr;

  }

  .about-image {

    max-width: 700px;
    margin: auto;

  }

  /* =========================
      CONTACT SECTION
  ========================= */

  .contact-container {

    grid-template-columns: 1fr;

  }

  /* =========================
      CTA SECTION
  ========================= */

  .cta-container {

    flex-direction: column;

    text-align: center;

  }

}


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

@media (max-width: 767px) {

  /* =========================
      COMMON
  ========================= */

  .container {
    padding: 0 18px;
  }

  .section-padding {
    padding: 75px 0;
  }

  .section-title h2,
  .about-content h2,
  .cta-content h2 {

    font-size: 34px;

  }

  /* =========================
      HERO SECTION
  ========================= */

  .hero {

    padding-top: 120px;

  }

  .hero-content h1 {

    font-size: 46px;
    line-height: 1.15;

  }

  .hero-content p {

    font-size: 16px;

  }

  .hero-buttons {

    flex-direction: column;

    width: 100%;

  }

  .hero-buttons a {

    width: 100%;

  }

  .trust-boxes {

    flex-direction: column;

    width: 100%;

  }

  .trust-item {

    width: 100%;

  }

  /* =========================
      GRIDS
  ========================= */

  .practice-grid,
  .why-grid,
  .team-grid,
  .footer-container {

    grid-template-columns: 1fr;

  }

  /* =========================
      ABOUT
  ========================= */

  .about-points {

    grid-template-columns: 1fr;

  }

  /* =========================
      CONTACT
  ========================= */

  .contact-form {

    padding: 35px 25px;

  }

  /* =========================
      CTA
  ========================= */

  .cta-buttons {

    flex-direction: column;
    width: 100%;

  }

  .cta-buttons a {

    width: 100%;

  }

}


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

@media (max-width: 575px) {

  /* =========================
      LOGO
  ========================= */

  .logo {

    font-size: 28px;

  }

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

  .hero-content h1 {

    font-size: 38px;

  }

  .hero-tag {

    font-size: 13px;

    padding: 9px 16px;

  }

  /* =========================
      SECTION TITLES
  ========================= */

  .section-title h2,
  .about-content h2,
  .cta-content h2 {

    font-size: 30px;

  }

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

  .primary-btn,
  .secondary-btn {

    padding: 15px 22px;

    font-size: 14px;

  }

  /* =========================
      CARDS
  ========================= */

  .practice-card,
  .why-card,
  .contact-form {

    border-radius: 22px;

  }

  .practice-card {

    padding: 35px 28px;

  }

  .practice-card h3,
  .team-content h3 {

    font-size: 24px;

  }

  /* =========================
      TEAM
  ========================= */

  .team-card img {

    height: 360px;

  }

  /* =========================
      FOOTER
  ========================= */

  .footer {

    padding-top: 70px;

  }

  .footer-logo {

    font-size: 34px;

  }

  /* =========================
      WHATSAPP
  ========================= */

  .whatsapp-btn {

    width: 58px;
    height: 58px;

    font-size: 24px;

    right: 20px;
    bottom: 20px;

  }

}


/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media (max-width: 420px) {

  .hero-content h1 {

    font-size: 34px;

  }

  .section-title h2,
  .about-content h2,
  .cta-content h2 {

    font-size: 28px;

  }

  .hero-content p {

    font-size: 15px;

  }

  .trust-item {

    padding: 20px;

  }

}


/* =========================================
   HEADER FIXED EFFECT
========================================= */

.header.scrolled {

  background: rgba(10, 25, 45, 0.96);

  backdrop-filter: blur(14px);

  box-shadow: 0 5px 25px rgba(0,0,0,0.1);

}


/* =========================================
   SMOOTH MOBILE ANIMATION
========================================= */

.practice-card,
.team-card,
.why-card,
.trust-item,
.primary-btn,
.secondary-btn,
.navbar {

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease,
    color 0.4s ease;

}


/* =========================================
   MOBILE MENU OVERLAY
========================================= */

.mobile-overlay {

  position: fixed;

  width: 100%;
  height: 100%;

  top: 0;
  left: 0;

  background: rgba(0,0,0,0.55);

  opacity: 0;
  visibility: hidden;

  transition: 0.4s ease;

  z-index: 999;

}

.mobile-overlay.active {

  opacity: 1;
  visibility: visible;

}


/* =========================================
   PRACTICE BUTTON
========================================= */

.practice-btn-wrap {

  display: flex;

  justify-content: center;

  margin-top: 60px;

}

.practice-explore-btn {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  height: 58px;

  padding: 0 34px;

  border-radius: 60px;

  background: transparent;

  border: 1px solid rgba(15, 46, 87, 0.15);

  color: #0f2e57;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.3px;

  transition: 0.4s ease;

  position: relative;

  overflow: hidden;

}

/* HOVER BG EFFECT */

.practice-explore-btn::before {

  content: '';

  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: #0f2e57;

  transition: 0.45s ease;

  z-index: 0;

}

.practice-explore-btn span,
.practice-explore-btn i {

  position: relative;

  z-index: 2;

}

.practice-explore-btn:hover::before {

  left: 0;

}

.practice-explore-btn:hover {

  color: #fff;

  transform: translateY(-3px);

  box-shadow:
    0 12px 30px rgba(15,46,87,0.18);

}

.practice-explore-btn i {

  transition: 0.4s ease;

}

.practice-explore-btn:hover i {

  transform: translateX(4px);

}