:root {


  --primary-color: #377dbd;


  --secondary-color: #0f4c85;


  --accent-color: #83b7e6;


  --gold-accent: #ffd700;


  --text-dark: #1a1a2e;


  --text-light: #6c757d;


  --background-light: #f8f9fa;


  --white: #ffffff;


  --border-color: #e5e5e5;


  --success-color: #28a745;


  --warning-color: #ffc107;


  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


  --gradient-secondary: linear-gradient(135deg, #377dbd 0%, #0f4c85 100%);


  --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);


  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);


  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.15);


}





* {


  margin: 0;


  padding: 0;


  box-sizing: border-box;


}





body {


  font-family: 'Poppins', sans-serif;


  line-height: 1.6;


  color: var(--text-dark);


  overflow-x: hidden;


  background: var(--white);


}





/* Custom Scrollbar */


::-webkit-scrollbar {


  width: 6px;


}





::-webkit-scrollbar-track {


  background: #f1f1f1;


}





::-webkit-scrollbar-thumb {


  background: #0d1b3e;


  border-radius: 6px;


}





/* Preloader */


.preloader {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


  display: flex;


  align-items: center;


  justify-content: center;


  z-index: 99999;


  transition: opacity 1s ease, visibility 1s ease;


}





.preloader.hide {


  opacity: 0;


  visibility: hidden;


}





.loader {


  position: relative;


  width: 100px;


  height: 100px;


}





.loader-circle {


  position: absolute;


  border: 3px solid transparent;


  border-top-color: var(--white);


  border-radius: 50%;


  animation: rotate 1s linear infinite;


}





.loader-circle:nth-child(1) {


  width: 100px;


  height: 100px;


  animation-duration: 0.8s;


}





.loader-circle:nth-child(2) {


  width: 80px;


  height: 80px;


  top: 10px;


  left: 10px;


  animation-duration: 1s;


  animation-direction: reverse;


}





.loader-circle:nth-child(3) {


  width: 60px;


  height: 60px;


  top: 20px;


  left: 20px;


  animation-duration: 1.2s;


}





@keyframes rotate {


  0% {


    transform: rotate(0deg);


  }


  100% {


    transform: rotate(360deg);


  }


}





/* Header */


.header {


  background: #ede7db;


  backdrop-filter: blur(20px);


  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);


  position: fixed;


  top: 0;


  left: 0;


  right: 0;


  z-index: 1000;


  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


}





.header.scrolled {


  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);


}





.nav-container {


  display: flex;


  justify-content: space-between;


  align-items: center;


  padding: 1rem 2rem;


  max-width: 1400px;


  margin: 0 auto;


}





.logo {


  display: flex;


  align-items: center;


  font-size: 1.5rem;


  font-weight: 700;


  background: var(--gradient-secondary);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  text-decoration: none;


  transition: transform 0.3s ease;


}





.logo:hover {


  transform: scale(1.05);


}





.logo img {


  height: 45px;


  margin-right: 0.75rem;


  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));


}





.nav-menu {


  display: flex;


  list-style: none;


  gap: 2rem;


  align-items: center;


}





.nav-menu li {


  font-family: 'Source Serif 4', serif !important;


  font-size: 1.2rem;


}





.nav-menu li a {


  font-family: inherit !important;


  color: #0d1b3e;


}





.nav-link {


  text-decoration: none;


  color: var(--text-dark);


  transition: all 0.3s ease;


  position: relative;


  padding: 0.5rem 0;


  font-family: 'Source Serif 4', serif !important;


}





.nav-link:hover {


  font-weight: bold;


}





.cta-nav {


  background: #0d1b3e;


  color: #ede7db;


  padding: 0.5rem 1.75rem !important;


  border-radius: 100px;


  transition: all 0.3s ease;


}





.cta-nav:hover {


  background: black;


}





.cta-nav::before {


  display: none;


}





@media (max-width: 480px) {


  .cta-nav {


    padding: 0.5rem 1rem !important;


    font-size: 0.6rem;


  }





  .logo img {


    width: 100px !important;


  }


}





@media (max-width: 390px) {


  .cta-nav {


    padding: 0.5rem 1rem !important;


    font-size: 0.5rem;


  }


}





/* Mobile Menu */


.mobile-menu-toggle {


  display: none;


  flex-direction: column;


  cursor: pointer;


  padding: 0.5rem;


}





.mobile-menu-toggle span {


  width: 25px;


  height: 3px;


  background: #0d1b3e;


  margin: 3px 0;


  transition: 0.3s;


  border-radius: 3px;


}





/* Hero Section with Advanced Slideshow */





@keyframes bg-comercio {


  0% {


    background-size: 100%;


  }


  50% {


    background-size: 200%;


  }


  100% {


    background-size: 100%;


  }


}





@keyframes bg-comercio-mobile {


  0% {


    background-size: 300%;


  }


  50% {


    background-size: 360%;


  }


  100% {


    background-size: 300%;


  }


}





#home {


  background: url('bg-hero.png');


  background-size: 240%;


  background-position: center 40%;


  background-repeat: no-repeat;


  animation: bg-comercio 100s infinite linear;


}





#home::before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: #0107158b;


  z-index: 1;


}





.hero {


  position: relative;


  display: flex;


  align-items: center;


  justify-content: center;


  text-align: center;


  column-gap: 2rem;


  overflow: hidden;


  margin: 0 auto;


  padding-top: 5rem;


  height: 100vh;


  max-height: 42rem;


  gap: 44rem;


}





@media (max-width: 1180px) {

  #home {
    animation: bg-comercio-mobile 100s infinite linear;
  }


  .hero {


    max-height: 90vh;


  }


}





.hero-backgrounds {


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  z-index: 1;


}





.hero-bg {


  position: absolute;


  top: 0;


  left: 0;


  width: 110%;


  height: 110%;


  background-size: cover;


  background-position: center;


  background-repeat: no-repeat;


  opacity: 0;


  animation: slideshow 18s infinite;


  transform: scale(1);


}





.hero-bg::after {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: linear-gradient(135deg,


      rgba(102, 126, 234, 0.8) 0%,


      rgba(118, 75, 162, 0.8) 50%,


      rgba(55, 125, 189, 0.8) 100%);


  mix-blend-mode: multiply;


}





.hero-bg:nth-child(1) {


  background-image: url('portugal-view1.png'),


    linear-gradient(135deg, #667eea 0%, #764ba2 100%);


  animation-delay: 0s;


}





.hero-bg:nth-child(2) {


  background-image: url('portugal-view2.png'),


    linear-gradient(135deg, #f093fb 0%, #f5576c 100%);


  animation-delay: 6s;


}





.hero-bg:nth-child(3) {


  background-image: url('portugal-view3.png'),


    linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);


  animation-delay: 12s;


}





@keyframes slideshow {


  0%,


  33.33% {


    opacity: 1;


    transform: scale(1);


  }


  36.33%,


  100% {


    opacity: 0;


    transform: scale(1.1);


  }


}





/* Enhanced Star Particles */


.particles {


  position: absolute;


  width: 100%;


  height: 100%;


  top: 0;


  left: 0;


  z-index: 2;


  overflow: hidden;


}





.star-particle {


  position: absolute;


  animation: float 20s infinite linear;


}





.star-core {


  width: 4px;


  height: 4px;


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


  border-radius: 50%;


  position: relative;


  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);


}





.star-ring {


  position: absolute;


  border: 1px solid rgba(255, 255, 255, 0.3);


  border-radius: 50%;


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


  animation: pulse 2s ease-in-out infinite;


}





.star-ring:nth-child(2) {


  width: 12px;


  height: 12px;


  animation-delay: 0.2s;


}





.star-ring:nth-child(3) {


  width: 20px;


  height: 20px;


  animation-delay: 0.4s;


}





@keyframes pulse {


  0%,


  100% {


    opacity: 0;


    transform: translate(-50%, -50%) scale(0.5);


  }


  50% {


    opacity: 0.6;


    transform: translate(-50%, -50%) scale(1);


  }


}





@keyframes float {


  0% {


    transform: translateY(100vh) translateX(0);


    opacity: 0;


  }


  10% {


    opacity: 1;


  }


  90% {


    opacity: 1;


  }


  100% {


    transform: translateY(-100vh) translateX(100px);


    opacity: 0;


  }


}





.hero-content {


  position: relative;


  z-index: 3;


  padding: 0 2rem;


  animation: fadeInUp 1s ease;


  max-width: 700px;


  width: 90vw;


  display: flex;


  flex-direction: column;


  gap: 2rem;


  text-align: center !important;


}





.hero-content+img {


  width: 90vw !important;


  max-width: 500px !important;


}





.hero-content a {


  background: #0d1b3e;


  color: #ede7db;


  padding: 0.85rem 2rem !important;


  border-radius: 100px;


  transition: all 0.3s ease;


  text-decoration: none;


  width: fit-content;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 1.1rem;


  gap: 0.5rem;


}





.whatsapp-button {


  position: fixed;


  z-index: 10000;


  bottom: 100px;


  cursor: pointer;


  right: 25px;


  width: 60px;


  height: 60px;


  border-radius: 100px;


  background: #0d1b3e;


  color: #ede7db;


  font-size: 2rem;


  border: none;


}





.hero-content a i {


  font-size: 1.2rem;


}





.hero h1 {


  font-family: 'Source Serif 4', serif;


  font-size: 4rem;


  color: white;


  font-weight: 400;


  line-height: 1;


  text-align: left;


}





.hero h1 span {


  display: block;


  font-weight: bold;


  font-style: italic;


}





.hero p {


  color: white;


  font-size: 1.3rem;


  font-family: 'Roboto', sans-serif;


  text-align: left;


}





.btn-primary,


.btn-secondary {


  padding: 1rem 2.5rem;


  border-radius: 50px;


  text-decoration: none;


  font-weight: 600;


  transition: all 0.3s ease;


  display: inline-block;


  position: relative;


  overflow: hidden;


}





@media (max-width: 990px) {

  .hero-content {
    position: absolute;
  }


  .hero h1 {


    font-size: 3rem !important;


  }





  .hero p {


    font-size: 1rem !important;


  }





  .hero img {


    max-width: 400px !important;


  }


}





@media (max-width: 768px) {


  .hero {


    align-items: center;


    justify-content: center;


    min-height: unset;


    padding: 7rem 0 4rem;


    text-align: center !important;


  }





  .hero-content h1,


  .hero-content p {


    text-align: center !important;


  }





  .hero-content a {


    margin: 0 auto;


  }





  .hero img {


    display: none;


  }


}





.btn-primary {


  background: var(--white);


  color: var(--primary-color);


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


}





.btn-primary:hover {


  transform: translateY(-3px);


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


}





.btn-secondary {


  background: transparent;


  color: var(--white);


  border: 2px solid var(--white);


}





.btn-secondary:hover {


  background: var(--white);


  color: var(--primary-color);


  transform: translateY(-3px);


}





/* Stats Section with Dynamic Wave Background */


.stats {


  padding: 100px 2rem;


  position: relative;


  overflow: hidden;


  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


}





/* Animated Wave Layers */


.stats::before,


.stats::after,


.wave-layer {


  content: '';


  position: absolute;


  width: 200%;


  height: 100%;


  left: -50%;


  background: transparent;


}





.stats::before {


  top: -50%;


  background: radial-gradient(ellipse at center,


      rgba(255, 255, 255, 0.15) 0%,


      transparent 60%);


  animation: waveFlow 20s ease-in-out infinite;


}





.stats::after {


  bottom: -50%;


  background: radial-gradient(ellipse at center,


      rgba(255, 215, 0, 0.1) 0%,


      transparent 60%);


  animation: waveFlow 25s ease-in-out infinite reverse;


}





@keyframes waveFlow {


  0%,


  100% {


    transform: translateX(0) translateY(0) rotate(0deg) scale(1);


  }


  25% {


    transform: translateX(10%) translateY(-5%) rotate(2deg) scale(1.1);


  }


  50% {


    transform: translateX(-5%) translateY(10%) rotate(-1deg) scale(0.95);


  }


  75% {


    transform: translateX(5%) translateY(5%) rotate(1deg) scale(1.05);


  }


}





/* SVG Wave Background */


.wave-svg-container {


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  z-index: 0;


  opacity: 0.3;


}





.wave-svg {


  position: absolute;


  width: 200%;


  height: 100%;


  left: 0;


}





.wave-svg:nth-child(1) {


  top: 0;


  animation: waveMove 15s linear infinite;


  fill: rgba(255, 255, 255, 0.1);


}





.wave-svg:nth-child(2) {


  top: 20%;


  animation: waveMove 20s linear infinite reverse;


  fill: rgba(131, 183, 230, 0.15);


  animation-delay: -5s;


}





.wave-svg:nth-child(3) {


  bottom: 0;


  animation: waveMove 25s linear infinite;


  fill: rgba(255, 215, 0, 0.1);


  animation-delay: -10s;


}





@keyframes waveMove {


  0% {


    transform: translateX(0) translateY(0);


  }


  50% {


    transform: translateX(-25%) translateY(10px);


  }


  100% {


    transform: translateX(-50%) translateY(0);


  }


}





/* Floating Orbs for Additional Wave Effect */


.floating-orb {


  position: absolute;


  border-radius: 50%;


  filter: blur(40px);


  opacity: 0.4;


  animation: floatOrb 20s ease-in-out infinite;


}





.orb1 {


  width: 300px;


  height: 300px;


  background: radial-gradient(circle,


      rgba(255, 255, 255, 0.3) 0%,


      transparent 70%);


  top: 10%;


  left: -150px;


  animation-duration: 18s;


}





.orb2 {


  width: 250px;


  height: 250px;


  background: radial-gradient(circle,


      rgba(255, 215, 0, 0.3) 0%,


      transparent 70%);


  bottom: 20%;


  right: -125px;


  animation-duration: 22s;


  animation-delay: -5s;


}





.orb3 {


  width: 200px;


  height: 200px;


  background: radial-gradient(circle,


      rgba(131, 183, 230, 0.3) 0%,


      transparent 70%);


  top: 50%;


  left: 30%;


  animation-duration: 25s;


  animation-delay: -10s;


}





@keyframes floatOrb {


  0%,


  100% {


    transform: translate(0, 0) scale(1);


  }


  20% {


    transform: translate(100px, -50px) scale(1.1);


  }


  40% {


    transform: translate(150px, 30px) scale(0.9);


  }


  60% {


    transform: translate(50px, 70px) scale(1.05);


  }


  80% {


    transform: translate(-50px, -30px) scale(0.95);


  }


}





.stats-container {


  max-width: 1200px;


  margin: 0 auto;


  position: relative;


  z-index: 1;


}





.stats-header {


  text-align: center;


  margin-bottom: 4rem;


}





.stats-header h2 {


  font-family: 'Source Serif 4', serif;


  font-size: 3rem;


  color: var(--white);


  margin-bottom: 1rem;


}





.stats-header p {


  font-size: 1.2rem;


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


}





.stats-grid {


  display: grid;


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


  gap: 2rem;


}





.stat-card {


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


  backdrop-filter: blur(20px);


  border: 1px solid rgba(255, 255, 255, 0.2);


  padding: 2.5rem;


  border-radius: 20px;


  text-align: center;


  transition: all 0.3s ease;


  position: relative;


  overflow: hidden;


}





.stat-card::before {


  content: '';


  position: absolute;


  top: -50%;


  left: -50%;


  width: 200%;


  height: 200%;


  background: radial-gradient(circle,


      rgba(255, 255, 255, 0.1) 0%,


      transparent 70%);


  opacity: 0;


  transition: opacity 0.3s ease;


}





.stat-card:hover {


  transform: translateY(-10px);


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


}





.stat-card:hover::before {


  opacity: 1;


}





.stat-icon {


  width: 80px;


  height: 80px;


  margin: 0 auto 1.5rem;


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


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 2.5rem;


}





.stat-number {


  font-size: 3rem;


  font-weight: 700;


  color: var(--white);


  margin-bottom: 0.5rem;


  font-family: 'Poppins', sans-serif;


}





.stat-label {


  font-size: 1.1rem;


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


  text-transform: uppercase;


  letter-spacing: 1px;


}





/* Services Section - Modern Card-less Design */


.services {


  padding: 60px 2rem;


  position: relative;


}





.container {


  max-width: 1200px;


  margin: 0 auto;


}





.section-header {


  text-align: center;


  margin-bottom: 3rem;


}





.section-subtitle {


  color: var(--primary-color);


  font-size: 1rem;


  font-weight: 600;


  text-transform: uppercase;


  letter-spacing: 2px;


  margin-bottom: 1rem;


}





.section-title {


  font-family: 'Source Serif 4', serif;


  font-size: 3rem;


  color: var(--text-dark);


}





.section-description {


  font-size: 1.2rem;


  color: var(--text-light);


  max-width: 600px;


  margin: 0 auto;


}





.services-grid {


  display: grid;


  grid-template-columns: 1fr 1fr 1fr 1fr;


  gap: 1rem;


}





.service-item {


  position: relative;


  display: flex;


  flex-direction: column;


  align-items: center;


  text-align: center;


  padding: 2rem;


  border-radius: 20px;


  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);


  background: transparent;


}





.service-item::before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: linear-gradient(135deg,


      rgba(102, 126, 234, 0.05) 0%,


      rgba(118, 75, 162, 0.05) 100%);


  border-radius: 20px;


  opacity: 0;


  transition: opacity 0.4s ease;


  z-index: -1;


}





.service-item:hover::before {


  opacity: 1;


}





.service-item:hover {


  transform: translateX(10px);


}





.service-icon-wrapper {


  width: 70px;


  height: 70px;


  background: #0d1b3e;


  border-radius: 20px;


  display: flex;


  align-items: center;


  justify-content: center;


  margin-bottom: 1.5rem;


  transition: all 0.3s ease;


  font-size: 2rem;


  color: var(--white);


}





.service-item:hover .service-icon-wrapper {


  transform: scale(1.1) rotate(5deg);


}





.service-item h3 {


  font-size: 1.4rem;


  color: var(--text-dark);


  margin-bottom: 1rem;


  font-weight: 600;


  display: flex;


  align-items: center;


  gap: 0.5rem;


}





.service-item p {


  color: var(--text-light);


  line-height: 1.8;


  margin-bottom: 1.5rem;


}





.service-link {


  color: var(--primary-color);


  text-decoration: none;


  font-weight: 600;


  display: inline-flex;


  align-items: center;


  gap: 0.5rem;


  transition: all 0.3s ease;


  position: relative;


}





.service-link::after {


  content: '→';


  transition: transform 0.3s ease;


}





.service-link:hover {


  gap: 1rem;


}





.service-link:hover::after {


  transform: translateX(5px);


}





/* Testimonials Section */


.testimonials {


  padding: 60px 2rem;


  background: var(--background-light);


  position: relative;


}





.testimonials-container {


  max-width: 1200px;


  margin: 0 auto;


}





.testimonials-grid {


  display: grid;


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


  gap: 2rem;


  margin-top: 3rem;


}





.testimonial-card {


  background: var(--white);


  padding: 2rem;


  border-radius: 20px;


  transition: all 0.3s ease;


  position: relative;


}





.testimonial-card:hover {


  transform: translateY(-10px);


  box-shadow: var(--shadow-strong);


}





.testimonial-quote {


  font-size: 3rem;


  color: var(--primary-color);


  opacity: 0.2;


  line-height: 1;


  margin-bottom: 1rem;


}





.testimonial-text {


  color: var(--text-dark);


  line-height: 1.8;


  margin-bottom: 2rem;


  font-style: italic;


}





.testimonial-author {


  display: flex;


  align-items: center;


  gap: 1rem;


}





.testimonial-avatar {


  width: 60px;


  height: 60px;


  border-radius: 50%;


  object-fit: cover;


  border: 3px solid var(--primary-color);


}





.testimonial-info h4 {


  color: var(--text-dark);


  margin-bottom: 0.25rem;


}





.testimonial-info p {


  color: var(--text-light);


  font-size: 0.9rem;


}





.testimonial-rating {


  color: var(--gold-accent);


  margin-top: 0.5rem;


}





/* FAQ Section */


.faq {


  padding: 100px 2rem;


  background: var(--white);


}





.faq-container {


  max-width: 900px;


  margin: 0 auto;


}





.faq-grid {


  margin-top: 3rem;


}





.faq-item {


  background: var(--background-light);


  border-radius: 15px;


  margin-bottom: 1rem;


  overflow: hidden;


  transition: all 0.3s ease;


}





.faq-item.active {


  background: var(--white);


  box-shadow: var(--shadow-soft);


}





.faq-question {


  padding: 1.5rem;


  cursor: pointer;


  display: flex;


  justify-content: space-between;


  align-items: center;


  font-weight: 600;


  color: var(--text-dark);


  transition: all 0.3s ease;


}





.faq-question:hover {


  color: var(--primary-color);


}





.faq-icon {


  font-size: 1.2rem;


  transition: transform 0.3s ease;


}





.faq-item.active .faq-icon {


  transform: rotate(45deg);


}





.faq-answer {


  padding: 0 1.5rem;


  max-height: 0;


  overflow: hidden;


  transition: all 0.3s ease;


}





.faq-item.active .faq-answer {


  padding: 0 1.5rem 1.5rem;


  max-height: 500px;


}





.faq-answer p {


  color: var(--text-light);


  line-height: 1.8;


}





/* Certifications Section */


.certifications {


  padding: 50px 2rem;


  background: var(--background-light);


}





.certifications-container {


  max-width: 1200px;


  margin: 0 auto;


  text-align: center;


}





.certifications-title {


  font-size: 1.5rem;


  color: var(--text-dark);


  margin-bottom: 2rem;


  font-weight: 600;


}





.certifications-grid {


  display: flex;


  justify-content: center;


  align-items: center;


  gap: 3rem;


  flex-wrap: wrap;


}





.certification-badge {


  background: var(--white);


  padding: 1.5rem;


  border-radius: 15px;


  box-shadow: var(--shadow-soft);


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 1rem;


  transition: all 0.3s ease;


}





.certification-badge:hover {


  transform: translateY(-5px);


  box-shadow: var(--shadow-strong);


}





.certification-badge img {


  height: 80px;


  width: auto;


}





.certification-badge p {


  color: var(--text-dark);


  font-weight: 600;


  margin: 0;


}





.certification-badge span {


  color: var(--text-light);


  font-size: 0.9rem;


}





/* Lawyer Section - Single Profile */


.lawyer {


  padding: 60px 2rem;


  background: var(--white);


  position: relative;


  overflow: hidden;


}





.lawyer::before {


  content: '';


  position: absolute;


  top: -50%;


  right: -20%;


  width: 60%;


  height: 200%;


  background: radial-gradient(circle,


      rgba(102, 126, 234, 0.05) 0%,


      transparent 70%);


  animation: float-slow 20s ease-in-out infinite;


}





@keyframes float-slow {


  0%,


  100% {


    transform: translateY(0) rotate(0deg);


  }


  50% {


    transform: translateY(-30px) rotate(180deg);


  }


}





.lawyer-container {


  max-width: 1000px;


  margin: 0 auto;


  position: relative;


  z-index: 1;


}





.lawyer-container .section-header h6 {


  font-family: 'Roboto', sans-serif !important;


  font-weight: 500;


  font-size: 1rem;


  color: #000;


}





.lawyer-content {


  display: grid;


  grid-template-columns: 1fr 2fr;


  gap: 4rem;


}





.lawyer-image {


  position: relative;


}





.lawyer-image-wrapper {


  position: relative;


  width: 100%;


  max-width: 350px;


  margin: 0 auto;


}





.lawyer-image img {


  width: 100%;


  height: auto;


}





.lawyer-badge {


  position: absolute;


  bottom: -20px;


  left: 50%;


  transform: translateX(-50%);


  background: var(--gradient-secondary);


  color: var(--white);


  padding: 0.75rem 1.5rem;


  border-radius: 50px;


  font-weight: 600;


  box-shadow: 0 10px 30px rgba(55, 125, 189, 0.4);


  white-space: nowrap;


}





.lawyer-info h2 {


  font-family: 'Source Serif 4', serif;


  font-size: 2.5rem;


  color: var(--text-dark);


  margin-bottom: 0.5rem;


}





.lawyer-info .role {


  color: var(--primary-color);


  font-size: 1.2rem;


  font-weight: 600;


  margin-bottom: 1.5rem;


}





.credentials-list {


  display: flex;


  gap: 1.5rem;


  margin-bottom: 2rem;


  flex-wrap: wrap;


}





.credential-item {


  display: flex;


  align-items: center;


  gap: 0.5rem;


  padding: 0.5rem 1rem;


  background: rgba(55, 125, 189, 0.1);


  border-radius: 50px;


  font-size: 0.9rem;


  color: var(--text-dark);


}





.credential-item i {


  color: var(--primary-color);


}





.lawyer-bio {


  color: var(--text-light);


  line-height: 1.8;


  margin-bottom: 2rem;


}





.lawyer-bio p {


  margin-bottom: 1rem;


}





.lawyer-stats {


  display: grid;


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


  gap: 1.5rem;


  margin-top: 2rem;


}





.lawyer-stat {


  text-align: center;


  padding: 1rem;


  background: var(--background-light);


  border-radius: 15px;


}





.lawyer-stat-number {


  font-size: 1.8rem;


  font-weight: 700;


  color: var(--primary-color);


  margin-bottom: 0.25rem;


}





.lawyer-stat-label {


  font-size: 0.9rem;


  color: var(--text-light);


}





/* Contact Section */


.contact {


  padding: 60px 2rem;


  background-color: #ede7db;


  position: relative;


  overflow: hidden;


}





.contact::before {


  content: '';


  position: absolute;


  top: -50%;


  right: -30%;


  width: 100%;


  height: 200%;


  background: radial-gradient(circle,


      rgba(255, 255, 255, 0.1) 0%,


      transparent 50%);


  animation: float-slow 20s ease-in-out infinite;


}





.contact-container {


  max-width: 1200px;


  margin: 0 auto;


  position: relative;


  z-index: 1;


}





.contact-header {


  text-align: center;


  margin-bottom: 4rem;


}





.contact-header h2 {


  font-family: 'Source Serif 4', serif;


  font-size: 3rem;


  color: #0d1b3e;


  margin-bottom: 1rem;


}





.contact-header p {


  font-size: 1.2rem;


  color: #0d1b3e;


}





.contact-content {


  display: grid;


  grid-template-columns: 1fr 1fr 1fr 1fr;


  gap: 1rem;


  align-items: start;


}





.contact-info {


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


  backdrop-filter: blur(20px);


  border: 1px solid rgba(255, 255, 255, 0.2);


  padding: 3rem;


  border-radius: 20px;


}





.contact-item {


  display: flex;


  flex-direction: column;


  align-items: center;


  text-align: center;


}





.contact-icon {


  width: 50px;


  height: 50px;


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


  margin-bottom: 1rem;


  border-radius: 15px;


  display: flex;


  align-items: center;


  justify-content: center;


  color: #0d1b3e;


  font-size: 1.5rem;


  flex-shrink: 0;


}





.contact-details h4 {


  color: #0d1b3e;


  margin-bottom: 0.5rem;


  font-size: 1.1rem;


}





.contact-details p,


.contact-details a {


  color: #0d1b3e;


  text-decoration: none;


  transition: color 0.3s ease;


}





.contact-details a:hover {


  color: #0d1b3e;


}





/* Ultra Modern Contact Form */


.contact-form {


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


  backdrop-filter: blur(30px);


  border: 1px solid rgba(255, 255, 255, 0.1);


  padding: 3rem;


  border-radius: 30px;


  position: relative;


  overflow: hidden;


}





.contact-form::before {


  content: '';


  position: absolute;


  top: -2px;


  left: -2px;


  right: -2px;


  bottom: -2px;


  background: linear-gradient(45deg,


      rgba(255, 255, 255, 0.3),


      transparent,


      rgba(255, 255, 255, 0.3),


      transparent,


      rgba(255, 255, 255, 0.3));


  border-radius: 30px;


  opacity: 0;


  transition: opacity 0.3s ease;


  z-index: -1;


}





.contact-form:hover::before {


  opacity: 1;


}





.form-row {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 1.5rem;


}





.form-group {


  margin-bottom: 2rem;


  position: relative;


}





.form-group.full-width {


  grid-column: 1 / -1;


}





.input-wrapper {


  position: relative;


}





.input-icon {


  position: absolute;


  left: 1rem;


  top: 50%;


  transform: translateY(-50%);


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


  font-size: 1.2rem;


  transition: all 0.3s ease;


  pointer-events: none;


}





.form-control {


  width: 100%;


  padding: 1.2rem 1rem 1.2rem 3rem;


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


  border: 2px solid transparent;


  border-radius: 15px;


  color: var(--white);


  font-size: 1rem;


  transition: all 0.3s ease;


  font-family: 'Poppins', sans-serif;


}





select.form-control {


  cursor: pointer;


  appearance: none;


  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");


  background-repeat: no-repeat;


  background-position: right 1rem center;


  background-size: 1.5em;


  padding-right: 3rem;


}





select.form-control option {


  background: var(--primary-color);


  color: var(--white);


}





.form-control:focus {


  outline: none;


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


  border-color: rgba(255, 255, 255, 0.3);


  transform: translateY(-2px);


}





.form-control:focus+.input-icon {


  color: var(--white);


  transform: translateY(-50%) scale(1.1);


}





.floating-label {


  position: absolute;


  left: 3rem;


  top: 1.2rem;


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


  font-size: 1rem;


  transition: all 0.3s ease;


  pointer-events: none;


  background: transparent;


}





.form-control:focus~.floating-label,


.form-control:not(:placeholder-shown)~.floating-label,


select.form-control:valid~.floating-label {


  top: -0.5rem;


  left: 2.5rem;


  font-size: 0.85rem;


  color: var(--white);


  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


  padding: 0 0.5rem;


}





.form-control::placeholder {


  opacity: 0;


}





textarea.form-control {


  resize: vertical;


  min-height: 120px;


  padding-top: 1.5rem;


}





textarea.form-control~.floating-label {


  top: 1.5rem;


}





textarea.form-control~.input-icon {


  top: 1.5rem;


  transform: translateY(0);


}





textarea.form-control:focus~.input-icon {


  transform: translateY(0) scale(1.1);


}





.btn-submit {


  width: 100%;


  padding: 1.2rem 2rem;


  background: linear-gradient(135deg,


      rgba(255, 255, 255, 0.95) 0%,


      rgba(255, 255, 255, 0.85) 100%);


  color: var(--primary-color);


  border: none;


  border-radius: 15px;


  font-size: 1.1rem;


  font-weight: 600;


  cursor: pointer;


  transition: all 0.3s ease;


  position: relative;


  overflow: hidden;


  text-transform: uppercase;


  letter-spacing: 1px;


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 0.75rem;


}





.btn-submit::before {


  content: '';


  position: absolute;


  top: 50%;


  left: 50%;


  width: 0;


  height: 0;


  border-radius: 50%;


  background: rgba(55, 125, 189, 0.3);


  transform: translate(-50%, -50%);


  transition: width 0.6s ease, height 0.6s ease;


}





.btn-submit:hover::before {


  width: 300%;


  height: 300%;


}





.btn-submit:hover {


  transform: translateY(-3px);


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


}





.btn-submit span {


  position: relative;


  z-index: 1;


}





.btn-submit i {


  position: relative;


  z-index: 1;


  transition: transform 0.3s ease;


}





.btn-submit:hover i {


  transform: translateX(5px);


}





.form-footer {


  margin-top: 1.5rem;


  text-align: center;


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


  font-size: 0.9rem;


}





.form-footer i {


  color: var(--gold-accent);


  margin: 0 0.25rem;


}





/* Footer */


.footer {


  background: #0d1b3e;


  color: var(--white);


  padding: 3rem 2rem 2rem;


  text-align: center;


}





.footer-content {


  max-width: 1200px;


  margin: 0 auto;


}





.footer-logo {


  max-width: 200px;


}





.footer-links {


  display: flex;


  justify-content: center;


  gap: 2rem;


  margin: 2rem 0;


  flex-wrap: wrap;


}





.footer-link {


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


  text-decoration: none;


  transition: color 0.3s ease;


}





.footer-link:hover {


  color: var(--white);


}





.footer-social {


  display: flex;


  justify-content: center;


  gap: 1rem;


  margin: 2rem 0;


}





.social-link {


  width: 45px;


  height: 45px;


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


  border: 1px solid rgba(255, 255, 255, 0.2);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--white);


  text-decoration: none;


  transition: all 0.3s ease;


  font-size: 1.2rem;


}





.social-link:hover {


  background: var(--primary-color);


  transform: translateY(-5px);


  box-shadow: 0 10px 20px rgba(55, 125, 189, 0.3);


}





.footer-divider {


  height: 1px;


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


  margin: 2rem 0;


}





.footer-copyright {


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


  font-size: 0.9rem;


}





/* Legal Disclaimer Modal */


.modal {


  display: none;


  position: fixed;


  z-index: 10000;


  left: 0;


  top: 0;


  width: 100%;


  height: 100%;


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


  backdrop-filter: blur(5px);


}





.modal-content {


  background: var(--white);


  margin: 5% auto;


  padding: 2rem;


  border-radius: 20px;


  width: 90%;


  max-width: 600px;


  max-height: 80vh;


  overflow-y: auto;


  animation: slideUp 0.3s ease;


}





@keyframes slideUp {


  from {


    transform: translateY(50px);


    opacity: 0;


  }


  to {


    transform: translateY(0);


    opacity: 1;


  }


}





.modal-header {


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-bottom: 1.5rem;


  border-bottom: 2px solid var(--border-color);


  padding-bottom: 1rem;


}





.modal-header h2 {


  font-family: 'Source Serif 4', serif;


  color: var(--text-dark);


}





.modal-close {


  font-size: 2rem;


  cursor: pointer;


  color: var(--text-light);


  transition: color 0.3s ease;


  background: none;


  border: none;


}





.modal-close:hover {


  color: var(--text-dark);


}





.modal-body {


  color: var(--text-light);


  line-height: 1.8;


}





.modal-body h3 {


  color: var(--text-dark);


  margin: 1.5rem 0 1rem;


}





/* Cookie Banner */


.cookie-banner {


  position: fixed;


  bottom: 0;


  left: 0;


  right: 0;


  background: var(--white);


  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);


  padding: 1.5rem;


  z-index: 9999;


  display: none;


  animation: slideUp 0.5s ease;


}





.cookie-banner.show {


  display: block;


}





.cookie-content {


  max-width: 1200px;


  margin: 0 auto;


  display: flex;


  justify-content: space-between;


  align-items: center;


  gap: 2rem;


  flex-wrap: wrap;


}





.cookie-text {


  flex: 1;


  color: var(--text-dark);


}





.cookie-text a {


  color: var(--primary-color);


  text-decoration: none;


  font-weight: 600;


}





.cookie-buttons {


  display: flex;


  gap: 1rem;


}





.cookie-btn {


  padding: 0.75rem 1.5rem;


  border: none;


  border-radius: 50px;


  font-weight: 600;


  cursor: pointer;


  transition: all 0.3s ease;


}





.cookie-accept {


  background: var(--gradient-secondary);


  color: var(--white);


}





.cookie-accept:hover {


  transform: translateY(-2px);


  box-shadow: 0 5px 15px rgba(55, 125, 189, 0.3);


}





.cookie-settings {


  background: transparent;


  color: var(--text-dark);


  border: 2px solid var(--border-color);


}





.cookie-settings:hover {


  border-color: var(--primary-color);


  color: var(--primary-color);


}





/* Animations */


@keyframes fadeInUp {


  from {


    opacity: 0;


    transform: translateY(30px);


  }


  to {


    opacity: 1;


    transform: translateY(0);


  }


}





@keyframes fadeInDown {


  from {


    opacity: 0;


    transform: translateY(-30px);


  }


  to {


    opacity: 1;


    transform: translateY(0);


  }


}





@keyframes fadeIn {


  from {


    opacity: 0;


  }


  to {


    opacity: 1;


  }


}





/* Scroll Animations */


.fade-in {


  opacity: 0;


  transform: translateY(30px);


  transition: all 0.8s ease;


}





.fade-in.visible {


  opacity: 1;


  transform: translateY(0);


}





/* Back to Top Button */


.back-to-top {


  position: fixed;


  bottom: 30px;


  right: 30px;


  width: 50px;


  height: 50px;


  background: black;


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--white);


  font-size: 1.5rem;


  cursor: pointer;


  opacity: 0;


  visibility: hidden;


  transition: all 0.3s ease;


  z-index: 1000;


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


}





.back-to-top.show {


  opacity: 1;


  visibility: visible;


}





.back-to-top:hover {


  transform: translateY(-5px);


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


}





/* Progress Bar */


.progress-bar {


  position: fixed;


  top: 0;


  left: 0;


  height: 3px;


  background: var(--gradient-secondary);


  z-index: 10000;


  transition: width 0.1s ease;


}





/* Responsive Design */


@media (max-width: 768px) {


  .nav-menu {


    position: fixed;


    top: 70px;


    left: -100%;


    width: 100%;


    height: calc(100vh - 70px);


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


    backdrop-filter: blur(20px);


    flex-direction: column;


    justify-content: start;


    align-items: center;


    transition: left 0.3s ease;


    padding: 2rem 0;


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


  }





  .nav-menu.active {


    left: 0;


  }





  .mobile-menu-toggle {


    display: flex;


  }





  .mobile-menu-toggle.active span:nth-child(1) {


    transform: rotate(-45deg) translate(-5px, 6px);


  }





  .mobile-menu-toggle.active span:nth-child(2) {


    opacity: 0;


  }





  .mobile-menu-toggle.active span:nth-child(3) {


    transform: rotate(45deg) translate(-5px, -6px);


  }





  .hero h1 {


    font-size: 2.5rem;


  }





  .hero-buttons {


    flex-direction: column;


    align-items: center;


  }





  .stats-grid {


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


  }





  .services-grid {


    grid-template-columns: 1fr;


  }





  .testimonials-grid {


    grid-template-columns: 1fr;


  }





  .contact-content {


    grid-template-columns: 1fr;


  }





  .form-row {


    grid-template-columns: 1fr;


  }





  .lawyer-content {


    grid-template-columns: 1fr;


    text-align: center;


  }





  .lawyer-stats {


    grid-template-columns: 1fr;


  }





  .cookie-content {


    flex-direction: column;


    text-align: center;


  }


}





/* Smooth scrolling */


html {


  scroll-behavior: smooth;


}





/*


    quick adjusts


*/





p,


a,


li {


  font-family: 'Roboto', sans-serif !important;


}





h1,


h2,


h3,


h4,


h5,


h6 {


  font-family: 'Source Serif 4', serif !important;


}





.gray-background {


  background-color: #f4f4f4 !important;


}