.history{
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    'left right';
  font-family: "Cormorant", sans-serif;
  font-weight: 500;
  z-index: 1;
  color: rgb(255, 255, 255);
  gap: 2rem;
}

.history-container-left-text{
    grid-area: left;
    text-align: center;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    font-weight: 500;
    font-size: clamp(1.5rem, calc(5vw + 0.1rem), 2rem);
    color: white;
}

.history-container-right-photo{
    grid-area: right;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: .01rem;     
    border-top-right-radius: 3rem;   
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: .01rem;
}


/* Desktop container utility class */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* gap: clamp(0.2rem, 6vw, 0.5rem); */
  }
  
  /* 2xl (1536px) */
@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
  .history{
    display: flex;
    flex-direction: column;
  }
  .history-container-left-text{
    top: 0rem;
    right: 0rem;
  }
  
}

/* xl (1280px) */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
   .history{
    padding-top: 10rem;
   }
  
}

/* lg (1024px) */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
}

/* md (768px) */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
   
}

/* sm (640px) */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs (475px) */
@media (max-width: 29.6875rem) {
  /* .container {
    width: 100%;
} */
}

 
 
 .bio{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        'left right';
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
 }

 .bio-photo{
    will-change: transform;
    margin-left: 5rem;
    grid-area: left;
    position: absolute;
    background: transparent;
    margin-left: 10rem;
    transform: translateY(0);
    overflow: visible;
    display: inline-block;
    transition: transform 2.5s ease-out; 
    &:hover {
          transform: translateY(-15px) scale(1.01);
 }
}

 .background-image{
    will-change: transform;
    grid-column: 2;
    position: absolute;
    background: transparent;
    margin-left: 10rem;
    transform: translateY(0);
    padding-top: 15px;
    margin-top: 60px;
    overflow: visible;
    display: inline-block;
    transition: transform 2.5s ease-out; 
    &:hover {
          transform: translateY(-15px) scale(1.01);
  }
}

 .bio-text{
    grid-area: right;
    color: white;
    font-family: "Bebas Neue", serif;
    font-size: 2rem;
 }

 .background-image-bio {
  position: fixed;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
      url('/assets/images/lawfirm/gavelbackground.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
 /* Desktop container utility class */
 .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    /* gap: clamp(3.2px, 6vw, 8px); */
  }
  
  /* 2xl */
  @media (max-width: 1536px) {
    .container {
      max-width: 1280px;
    }
    .bio-photo{
      margin-left: 1rem;
    }
  }
  
  /* xl */
  @media (max-width: 1280px) {
    .container {
      max-width: 1024px;
    }
    .bio-photo{
      margin-left: 0;
      margin-right: 2rem;
    }
  }
  
  /* lg */
  @media (max-width: 1024px) {
    .container {
      max-width: 768px;
    }
    .bio{
      display: flex;
      flex-direction: column;
    }
    .bio-photo{
      position: relative;
    }
  }
  
  /* md */
  @media (max-width: 768px) {
    .container {
      max-width: 640px;
    }
  }
  
  /* sm */
  @media (max-width: 640px) {
    .container {
      max-width: 475px;
    }
  }
  
  /* xs */
  @media (max-width: 475px) {
    .container {
      /* width: 100%; */
  }
  }
  

/* Contact form */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding-left: 3rem;
  padding-right: 3rem;

}

.contact-form-container {
    padding: 0 2rem;
    grid-column: 2;
    font-family: "Bebas Neue", serif;
  }
  
  .contact-form {
    background: white;
    padding: 32px;
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
  }
  
  .form-group {
    margin-bottom: 24px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
  }
  
  .form-group input {
    width: 100%;
    padding: 12px;
    border: .0625rem solid #ddd;
    border-radius: .25rem;
    font-size: 16px;
  }
  

  
  /*    Contact Us Page    */
  
  .content-left {
    /* padding: 4rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    color: white;
    padding-left: 20rem;
    position: relative;
    animation: leftfadeIn 1s ease-in forwards;
  }
  
  @keyframes leftfadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .contact-title {
    font-size: clamp(2.5rem, calc(3vw + 1rem), 4rem);
    margin-bottom: 5rem;
    font-weight: 500;
    font-family: "Bebas Neue", serif;
    color: var(--accent-color);
  }
  
  .contact-subtitle {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    font-family: "Bebas Neue", serif;
  }
  
  .features {
    list-style: none;
    padding: 0;
    margin-bottom: 48px;
  }
  
  .features li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 17.6px;
  }
  
  .features li::before {
    content: "✓";
    color: #3182ce;
    margin-right: 16px;
  }
  
  .trusted-section {
    margin-top: 32px;
  }
  
  .contact-logo-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  
  .contact-logo {
    background: #333;
    padding: 8px 16px;
    border-radius: 8px;
  }
  
  .text-changer{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 650;
    font-size: 80px;
    font-size: clamp(2.2rem, calc(5vw + 0.5rem), 5rem);
    letter-spacing: .3rem;
    letter-spacing: clamp(0px, calc(9vw + 2rem), .3rem);
    text-align: center;
    color:white;
    box-sizing: content-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    position: relative;
  
   }
   .intro-text{
    margin-top: -2px;
    
   }
   .roles-container{
    overflow: hidden;
    position: relative;
    height: 96px;
   }
   .role{
    will-change: transform;
    display: block;
    height: 100%;
    padding-left: 8px;
    padding-right: 8px;
    /* color: red; */
    color: var(--accent-color);
    animation: role-change 4s infinite;
    animation-delay: 1.8s;
   }
   p.large{
    font-size: 80px;
   }
   @keyframes role-change{
    10%{
      transform: translateY(-102%);
    }
    25%{
      transform: translateY(-100%);
    }
    35%{
      transform: translateY(-202%);
    }
    50%{
      transform: translateY(-200%);
    }
    60%{
      transform: translateY(-302%);
    }
    75%{
      transform: translateY(-300%);
    }
    85%{
      transform: translateY(-402%);
    }
    100%{
      transform: translateY(-400%);
    }
   }
   
  
   .awards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
    position: relative;
    gap: clamp(0.5rem, calc(2vw + .5rem), 6rem);
    /* gap: 96px; */
    opacity: 0.9;
    /* align-items: center; */
    padding-bottom: 3rem;
    
   }
  .law-award img{
    will-change: transform;
    height: clamp(5rem, calc(8vw + .5rem), 9.375rem);
    width: clamp(5rem, calc(8vw + .5rem), 9.375rem);
  }
  .law-award:nth-child(2){
    transition-delay: 200ms;
  }
  .law-award:nth-child(3){
    transition-delay: 400ms;
  }
  .law-award:nth-child(4){
    transition-delay: 600ms;
  }
  .law-award:nth-child(5){
    transition-delay: 800ms;
  }
  .law-award:nth-child(6){
    transition-delay: 1s;
  }

  .lottie-animation-loop{
    width: 150px;
    height: 150px;
    top: 68px;
    right: 2px;
    position: absolute;
  }

  /* Desktop container utility class */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    /* gap: clamp(3.2px, 6vw, 8px); */
  }
  
  /* 2xl */
  @media (max-width: 1536px) {
    .container {
      max-width: 1280px;
    }
    .awards{
      margin-top: 3rem;
    }
    .text-changer{
      /* margin-top: auto; */
    }
  }
  
  /* xl */
  @media (max-width: 1280px) {
    .container {
      max-width: 1024px;
    }
    .awards{
      margin-top: 4rem;
    }
    .content-left{
      padding-left: 5rem; 
    }
  }
  
  /* lg */
  @media (max-width: 1024px) {
    .container {
      max-width: 768px;
    }
    .content-left{
      padding: 2rem;
    }
    .contact{
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 3rem;
    }
    .awards{
      margin-top: 5rem;
    }
  }
  
  /* md */
  @media (max-width: 768px) {
    .container {
      max-width: 640px;
    }
    .content-left{
      display: none;
    }
    .contact{
      display: flex;
      padding-top: 2rem;
    }
    .contact-form-container{
      width: 100%;
    }
    .footer{
      display: none;
    }
   
  }
  
  /* sm */
  @media (max-width: 640px) {
    .container {
      max-width: 475px;
    }
  }
  
  /* xs */
  @media (max-width: 475px) {
    .container {
      /* width: 100%; */
  }
  }
  

  

/* Footer styles */
.footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-areas: 
    'company socials services team';
  color: white;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .1rem;
  font-size: clamp(1rem, calc(2vw + 0.1rem), 1.8rem);
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
                    url("/assets/images/lawfirm/footer.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* padding: 3rem; */
  width: 100%;
  height: 100%;
  max-width: 100%;
}



.company-footer{
  grid-area: company;
  color: var(--accent-color);
  position: relative;
  margin-top: 2rem;
}

.company-footer-title{
  margin-left: 2.2rem;
  font-size: clamp(1rem, calc(2vw + 0.1rem), 2.2rem);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.social-media-footer{
  grid-area: socials;
  color: var(--accent-color);
  margin-top: 2rem;
}
.social-footer-title{
  margin-left: 2.2rem;
  font-size: clamp(1rem, calc(2vw + 0.1rem), 2.2rem);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.services-footer{
  grid-area: services;
  color: var(--accent-color);
  margin-top: 2rem;
}
.services-footer-title{
  margin-left: 2.2rem;
  font-size: clamp(1rem, calc(2vw + 0.1rem), 2.2rem);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.team-footer{
  grid-area: team;
  color: var(--accent-color);
  margin-top: 2rem;
}
.team-footer-title{
  margin-left: 2.2rem;
  font-size: clamp(1rem, calc(2vw + 0.1rem), 2.2rem);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.locations-footer{
  grid-area: locations;
  color: var(--accent-color);
  margin-top: 2rem;
}

.company-info-footer{
  list-style: none;
  color: white;
  position: relative;
  margin-left: 3rem;
}

.social-links{
  list-style: none;
}

.services-links{
  list-style: none;
}

.team-links{
  list-style: none;

}
.locations-links{
  list-style: none;
}

.social-links a, .services-links a, .team-links a, .locations-links a, .company-info-footer li:hover {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
}

.social-links a:hover, .services-links a:hover, .team-links a:hover, .locations-links a:hover, .company-info-footer li:hover {
  color: var(--accent-color);
}

.social-logo{
  margin-right: .5rem;
}

.social-logo:hover{
  filter: brightness(0) saturate(100%) invert(77%) sepia(64%) saturate(381%) hue-rotate(347deg) brightness(104%) contrast(101%);
}

.logo-footer{
  position: absolute;
  width: clamp(2rem, 6vw, 3.5rem);
  height: auto;
  left: -2rem;
}

.back-to-top {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--accent-color);
  color: rgb(0, 0, 0);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  margin-left: 4rem;
}

.back-to-top:hover {
  background-color: var(--dark-grey);
  color: rgb(255, 255, 255);
}
  /* Desktop container utility class */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* gap: clamp(0.2rem, 6vw, 0.5rem); */
  }
  
  /* 2xl */
  @media (max-width: 96rem) {
    .container {
      max-width: 80rem;
    }
    
  }
  
  /* xl */
  @media (max-width: 80rem) {
    .container {
      max-width: 64rem;
    }
   
    
  }
  
  /* lg */
  @media (max-width: 64rem) {
    .container {
      max-width: 48rem;
    }
  }
  
  /* md */
  @media (max-width: 48rem) {
    .container {
      max-width: 40rem;
    }
   
  }
  
  /* sm */
  @media (max-width: 40rem) {
    .container {
      max-width: 29.6875rem;
    }
  }
  
  /* xs */
  @media (max-width: 29.6875rem) {
    .container {
      /* width: 100%; */
  }
  }



/* General Overview Styles */
:root{
    --accent-color: #feda6a;
    /* --accent-color: #eb5e28; */
    --orange: #eb5e28;
    --dark-grey: #252422;
    --slate-gray: #403d39;
    --light-grey: #ccc5b9;
    --off-white: #fffcf2;
    --main-font: "Bebas Neue", sans-serif;
}
*, *:before, *:after {
  box-sizing: border-box;

}

.content{
  margin-bottom: 10rem;
}


.full-background-image {
  position: fixed;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
      url('/assets/images/lawfirm/library.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  z-index: -2;
}




* {
  /* outline: 1px solid red !important; */
  /* margin: 0 !important;
  padding: 0 !important; */
}
/* img {
  max-width: 100%;
  height: auto;
  display: block; 
} */


body{
    margin: 0;
    padding: 0;
} 

/* .spacer{
  padding-bottom: 10rem;
} */

/* img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
} */

.emphasis{
  color: red;
}
.emphasis2{
  color: var(--accent-color);
}

/* Global Animations */

.zoom-into-view{opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease;}
.zoom-into-view.animate{opacity: 1;}
.fadeIn{opacity: 0; transition: opacity ease 2s;}
.fadeIn.animate{opacity: 1;  transition-delay: 1.7s;}
.accolade-item::before{opacity: 0; transition: opacity ease 2s;}
.accolade-item::after{opacity: 0; transition: opacity ease 2s;}
.accolade-item.animate::before{opacity: 1; transition-delay: 1.7s;}
.accolade-item.animate::after{opacity: 1; transition-delay: 1.7s;}
.slideUp{opacity: 0; transform: translateY(3.25rem); transition: opacity 1.5s ease-out, transform 1s ease-out;}
.slideUp.animate{opacity: 1; transform: translateY(-1.7rem);}
.staggerReveal{opacity: 0; filter: blur(5px); transform: translateX(-100%); transition: all 1s;}
.staggerReveal.animate{opacity:1; filter: blur(0); transform: translateX(0);}
/* .slideRight{opacity: 0; transform: translateX(10.25rem); transition: opacity 0.3s ease-out, transform .3s ease-out;}
.slideRight.animate{opacity: 1; transform: translateX(0);}
.slideFromRight {transform: translateX(5.25rem); transition: transform .7s ease-out, opacity 0.5s ease-out; opacity: 0;}
.slideFromRight.animate {transform: translateX(0); opacity: 1;}
.slideLeft{opacity: 0; transform: translateX(-10.25rem); transition: opacity 0.3s ease-out, transform .3s ease-out;}
.slideLeft.animate{opacity: 1; transform: translateX(0);} */
.hero-slideLeft{opacity: 0; transform: translateX(-10%); transition: transform 1s ease-out, opacity 1s ease-in;}
.hero-slideLeft.animate{opacity: 1; transform: translateX(0);}



@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
 
}

/* xl */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
  .content{
    margin-bottom: 5rem;
  }
  
}

/* lg */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
  .content{
    margin-bottom: 2rem;
  }
 

}

/* md */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
}

/* sm */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs */
@media (max-width: 29.6875rem) {
  .container {
    /* width: 100%; */
}
}


.header{
  width: 100%;
  position: sticky;
  /* backdrop-filter: blur(50px); */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: 'Cormorant', sans-serif;
  z-index: 100;
}
.company-container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.2rem, calc(3vw + 0.2rem), 0.5rem);
}
.navbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.logo{
  position: relative;
  width: clamp(2rem, 6vw, 3.5rem);
  height: auto;
}

.menu-icon{
  display: none;
  width: 2.375rem;
  height: 3rem;
}
.site-title {
  position: relative;
  text-align: center;
  font-size: clamp(1.3rem, calc(4vw + 0.2rem), 2.2rem);
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: .1875rem;
}

.nav-item {
  background: transparent;
  color: #ffffff;
  padding: .625rem 1.875rem;
  font-size: 1.375rem;
  cursor: pointer;
  transition: color 0.5s ease;
  position: relative;
}

.nav-item:hover {
  color: var(--accent-color);
}

.nav-item-with-dropdown {
  background: transparent;
  color: #ffffff;
  padding: .625rem 1.875rem;
  font-size: 1.375rem;
  cursor: pointer;
  transition: color 0.5s ease;
  position: relative;
}
.nav-item-with-dropdown, .nav-item{ 
  font-size: clamp(1rem, calc(2vw + 0.1rem), 1.375rem);
}

.nav-item-with-dropdown:hover {
  color: var(--accent-color);
}
.nav-item-with-dropdown::after {
  content: '';
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
  top: .25rem;
  left: .1rem;
  background-color: #ffffff;
  mask: url('/assets/images/lawfirm/arrow.svg') no-repeat center;
  mask-size: contain;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav-item-with-dropdown:hover::after {
  background-color: var(--accent-color);
  transform: translateY(0.2rem);
}

.dropdown{
  list-style: none;
  position: absolute;
  left: 30%;
  top: calc(100% + 0.1rem);
  background-color: rgb(28, 28, 28);
  padding: 0 .75rem;
  border-radius: .25rem;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
  z-index: 4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: max-height 0.2s ease-out, 
              opacity 150ms ease-in-out, 
              transform 150ms ease-in-out;
}

.dropdown-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding: .75rem;
}

.dropdown li{
  margin-bottom: 8px;
}
.dropdown a{
  text-decoration: none;
  white-space: nowrap;
  color: rgb(255, 255, 255);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color ease;
}
.dropdown a:hover{
  color: var(--accent-color);
}



.info-topbar{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  font-size: 1.125rem;
  gap: 5rem;
  font-family: 'Cormorant', sans-serif;
  font-size: clamp(1rem, 0.1rem + 2vw, 1.375rem);
  margin-bottom: 1rem;
  padding: 0.5rem;
}
/* Top-Container Children Start--------------------------------*/

.company-info-text{
  color: white;
  position: relative;
}

.email-text{
  color: white;
  position: relative;
  margin-right: auto;
}
.email-text::before{
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('/assets/images/lawfirm/email.svg');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.email-text:hover::before{
  animation: email 1s ease-in-out forwards;
  animation-duration: 0.3s;
}

@keyframes email{
  0% { transform: scale(1); }
  25% { transform: scale(1.5); }
  50% { transform: scale(2); }
  75% { transform: scale(0.5); }
  100% { transform: scale(1); }
}


.location{
  color: white;
  border-left: .0625rem solid rgba(255, 255, 255, 0.3);
}
.location-text{
  color: white;
  margin-left: auto;
  position: relative;
}
.location-text::before{
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('/assets/images/lawfirm/location.svg');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.location-text:hover::before{
  animation: location 1s ease-in-out forwards;
  animation-duration: 0.6s;
}
@keyframes location{
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.contact-number{
  color: white;
  letter-spacing: .125rem;
  position: relative;
}
.contact-number::before{
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('/assets/images/lawfirm/phone.svg');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.contact-number:hover::before{
  animation: ring 1s ease-in-out infinite;
  animation-duration: 0.3s;
}
.contact-number:hover{
  animation: scale-once 1s ease-in-out forwards;
  animation-duration: 0.3s;
}
@keyframes scale-once {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes ring{
  0% { 
      transform: rotateZ(0);
      
  }
  25% { 
      transform: rotateZ(10deg);
      
  }
  50% { 
      transform: rotateZ(-10deg);
        
  }
  100% {
       transform: rotateZ(0); 
      }
}

/* Desktop container utility class */
.container {
 margin-left: auto;
 margin-right: auto;
 padding-left: 0.5rem;
 padding-right: 0.5rem;
 /* gap: clamp(0.5rem, 6vw, 1rem); */
 }
 
 @media (max-width: 1536px) {
 .container {
 max-width: 1280px;
  }
 }

 @media (max-width: 1280px) {
 .container {
 max-width: 1024px;
  }
 .header{
 justify-content: center;
  }
 }

 @media (max-width: 1024px) {
 .container {
 max-width: 768px;
  }
 .company-container{
 width: 100%;
  }
 .menu-icon{
  display: block;
  margin-left: auto;
  }
 .navbar{
 display: flex;
 /* position: absolute; */
 position: fixed; /* Changed to fixed */
 top: 0;
 right: 0;
 align-items: start;
 padding-left: 1rem;
 padding-right: 1rem;
 background-color: rgb(28, 28, 28);
 flex-direction: column;
 height: 100vh;
 width: 40%;
 transform: translateX(100%);
 opacity: 0;
 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 .navbar.navbar-open{
 transform: translateX(0%);
 opacity: 1;
 }
 .nav-item, .nav-item-with-dropdown{
 text-align: left;
 }
 .dropdown{
 left: 0;
 top: 25%;
 }
 .info-topbar{
  display: none;
 }
 }
 @media (max-width: 768px) {
 .container {
 max-width: 640px;
  }
 .navbar{
 padding-left: 0.1rem;
 padding-right: 0.1rem;
  }
 }
 @media (max-width: 640px) {
 .container {
 max-width: 475px;
  }
 .company-container{
 align-items: center;
  }
 .nav-item-with-dropdown::after{
 left: .1rem;
 width: 1rem;
 height: 1rem;
 }
 .navbar{
  width: 60%;
   }
 }
 @media (max-width: 475px) {
 /* .container {
  max-width: 475px;
  } */
 
 .navbar{
 /* padding-left: 3rem;
 padding-right: 3rem; */
 padding-left: 0rem;
 padding-right: 0rem;
  }

  .company-container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
 }


/* HERO SECTION ANIMATIONS */

  @keyframes rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
  @keyframes tagline-fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes plus-spin {
    to {
      transform:translateY(-50%) rotateY(360deg);
    }
  }
  @keyframes sub-fadeIn {
    to {
      opacity: 1;
    }
  }
  .hero {
    display: grid; 
    grid-template-columns: 1fr 4fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 
      'left-top right-top'
      'left-mid right-mid'
      'left-bottom right-bottom';
    position: relative;
    font-family: "Cormorant", serif;
    z-index: 1;
    padding-top: 15rem;
    margin-bottom: 15rem;
  }

  .hero::before {
    content: '';
    display: block;
    position: absolute;
    grid-area: right-mid;
    width: 30.0625rem;
    height: 31.5rem;
    left: 50%;
    top: -180%;
    background-image: url('/assets/images/lawfirm/hero.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: tagline-fadeIn 1.2s ease-in forwards;
    animation-delay: 3.2s;
    opacity: 0;
    z-index: 3;
  }
  .hero-left-text{
    grid-area: left-mid;
    justify-self: center;
    align-self: center;
    color: white;
    font-family: "Cormorant", serif;
    position: relative;
    font-size: 1.875rem;
    opacity: 0;
    animation: tagline-fadeIn 1.2s ease-in forwards;
    animation-delay: 4s;
  }
  .hero-left-text::before{
    content: '';
    display: block;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    position: absolute;
    background-image: url('/assets/images/lawfirm/dotted-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center;
    animation: rotate 20s linear infinite;
  }
  .hero-left-subtext{
    grid-area: left-mid;
    justify-self: center;
    align-self: end;
    color: rgb(212, 212, 212);
    font-family: "Cormorant", serif;
    position: relative;
    font-size: 1.125rem;
    opacity: 0;
    animation: tagline-fadeIn 1.2s ease-in forwards;
    animation-delay: 4s;
  }
  .subtitle {
    grid-area: right-mid;
    align-self: start;
    color: var(--accent-color);
    font-size: 1.375rem;
    font-size: clamp(1rem, calc(2vw + 0.1rem), 1.375rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .125rem;
    position: relative;
    margin-bottom: clamp(0rem, calc(6vw + 0.3rem), 5.5rem);
  }
  .subtitle span{
    opacity: 0;
    animation: sub-fadeIn 2.4s ease-in forwards;
  }
  .subtitle .part1{
    animation-delay: 1.6s;
  }
  .subtitle .part2{
    animation-delay: 2.8s;
  }

  .hero-title {
    grid-area: right-mid;
    align-self: end;
    font-size: clamp(3rem, calc(6vw + 0.1rem), 5rem);
    font-weight: 400;
    /* line-height: 1.1; */
    letter-spacing: .125rem;
    position: relative;
    color: white;
  }
  .cta-button {
    grid-area: right-bottom;
    align-self: start;
    background: var(--accent-color);
    color: rgb(0, 0, 0);
    padding: .5rem .9375rem .5rem 2.1875rem;
    border: none;
    font-weight: 650;
    font-size: .875rem;
    cursor: pointer;
    width: 13.4375rem;
    height: 3.125rem;
    border-top-left-radius: .625rem;     
    border-top-right-radius: .125rem;   
    border-bottom-left-radius: .125rem; 
    border-bottom-right-radius: .625rem; 
    position: relative;
    transition: transform 0.3s ease;
  }
  .cta-button::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375rem;
    height: 1.375rem;
    background-image: url('/assets/images/lawfirm/plus.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
  }
  
  .cta-button:hover::before {
    animation: plus-spin 0.5s ease-in-out;
    color: black;
  }
  .cta-button {
    animation-delay: 0.4s;
  }
  .hero-text-under{
    grid-area: right-bottom;
    display: flex;
  }
 
  .tagline-part1{
    grid-area: right-bottom;
    color: rgb(212, 212, 212);
    position: relative;
    font-size: 1.25rem;
    margin-left: 0.3rem;
  }
  .divider-icon{
    width: 1rem;
    height: 2.9688rem;
    background-image: url("/assets/images/lawfirm/divider.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.25rem;
  }
 .tagline-part2{
    grid-area: right-bottom;
    align-self: center;
    color: rgb(212, 212, 212);
    position: relative;
    font-size: 1.25rem;
  }

  /* Staggered delays */
  .hero-title {
    animation-delay: 0s;
  }
  
  .tagline-1 {
    animation-delay: 0.6s; 
  }
  
  .tagline-2 {
    animation-delay: 0.6s; 
  }
  
  /* Desktop container utility class */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* gap: clamp(0.2rem, 6vw, 0.5rem); */
}

/* 2xl */
@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
  .hero::before{
    left: 60%;
    top: -100%;
  }
}

/* xl */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
  .hero{
    grid-template-columns: 1fr 2fr;
    justify-items: start;
    margin-bottom: 5rem;
  }
  .hero::before{
    display: none;
  }
  
}

/* lg */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
  .hero{
    padding-top: 10rem;
  }

}

/* md */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
  .hero{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-items: center;
    align-items: center;
    text-align: center;
  }
  .hero-title, .subtitle{
    align-self: center;
  }
  .subtitle{
    margin-bottom: 0;
  }
  .hero-left-text, .hero-left-subtext, .hero-left-text::before{
    display: none;
  }
  .hero-text-under{
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
  }
  .divider-icon{
    display: none;
  }
  .cta-button{
    align-self: center;
    margin-bottom: auto;
  }
}

/* sm */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs */
@media (max-width: 29.6875rem) {
  .container {
    /* width: 100%; */
}
}


  
  
.results{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        'one two three'
        'four five six';
    gap: 4rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    /* padding-bottom: 20rem; */
  }
  
  .results-title{
    font-family: "Bebas Neue", sans-serif;
    color: var(--accent-color);
    font-size: 5rem;
    text-align: center;
    padding-bottom: 3rem;
    text-transform: uppercase; 
    letter-spacing: 2px;
  }
  .result-description-title{
    font-size: 1.875rem;
    font-weight: 600;
    position: relative;
    margin-top: 8rem;
  }
  
  .result1{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: one;
    position: relative;
    color: white;
    min-width: 5rem;
    min-height: 10rem;
  }
  
  
  .result2{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: two;
    position: relative;
    /* width: 200px;
    height: 300px; */
    color: white;
  }
  
  .result3{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: three;
    position: relative;
    /* width: 200px;
    height: 300px; */
    color: white;
  }
  .result4{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: four;
    position: relative;
    /* width: 200px;
    height: 300px; */
    color: white;
  }
  
  
  .result5{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: five;
    position: relative;
    /* width: 200px;
    height: 300px; */
    color: white;
  }
  
  
  .result6{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    grid-area: six;
    position: relative;
    /* width: 200px;
    height: 300px; */
    color: white;
  }
  
  .result-card{
    /* border-top-left-radius: 16px;    
    border-top-right-radius: 16px;  
    border-bottom-left-radius: 16px; 
    border-bottom-right-radius: 16px; */
    /* background-color: grey;  */
    /* width: 100px;
    height: 100px; */
  }
  
  
  .result-description{
    font-size: 1.25rem;
  }
  
  /* .result-title{
    font-weight: 600;
    font-size: 40px;
    white-space: nowrap;
  } */
  
  
  .lottie-animation{
    width: 280px;
    height: 280px;
    place-self: center;
    position: absolute;
    /* filter: brightness(0) saturate(100%) invert(76%) sepia(79%) saturate(324%) hue-rotate(346deg) brightness(104%) contrast(99%); */
  }
  
  /* Desktop container utility class */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* gap: clamp(0.2rem, 6vw, 0.5rem); */
  }
  
  /* 2xl */
  @media (max-width: 96rem) {
    .container {
      max-width: 80rem;
    }
    .results{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
            'one two'
            'three four'
            'five six';
    }
    .result1{
        grid-area: one;
    }
    .result2{
        grid-area: two;
    }
    .result3{
        grid-area: three;
    }
    .result4{
        grid-area: four;
    }
    .result5{
        grid-area: five;
    }
    .result6{
        grid-area: six;
    }
    
  }
  
  /* xl */
  @media (max-width: 80rem) {
    .container {
      max-width: 64rem;
    }
   
    
  }
  
  /* lg (1024px) */
  @media (max-width: 64rem) {
    .container {
      max-width: 48rem;
    }
    .results{
        display: flex;
        flex-direction: column;
    }
  }
  
  /* md  (768px) */
  @media (max-width: 48rem) {
    .container {
      max-width: 40rem;
    }
   
  }
  
  /* sm (640px) */
  @media (max-width: 40rem) {
    .container {
      max-width: 29.6875rem;
    }
  }
  
  /* xs (475px) */
  @media (max-width: 29.6875rem) {
    .container {
      /* width: 100%; */
  }
  }


  .practice-detail{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    font-family: "Cormorant", sans-serif;
    font-weight: 500;
    z-index: 1;
    color: rgb(255, 255, 255);
    width: 100vw;
    gap: 3rem;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.practice-detail1-text{
    font-size: clamp(1.5rem, calc(5vw + 0.1rem), 2rem);
}

.practice-detail1-photo{
    width: 100%;
    height: auto;
    max-width: 100%;
    border-top-left-radius: 3rem;     
    border-top-right-radius: .01rem;   
    border-bottom-left-radius: .01rem;
    border-bottom-right-radius: 3rem;
}

.practice-detail2-photo{
    width: 100%;
    height: auto;
    max-width: 100%;
    border-top-left-radius: .01rem;    
    border-top-right-radius: 3rem;   
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: .01rem; 
}

.practice-detail2-text{
    font-size: clamp(1.5rem, calc(5vw + 0.1rem), 2rem);
}

.practice-detail3-text{
    font-size: clamp(1.5rem, calc(5vw + 0.1rem), 2rem);
}

.practice-detail3-photo{
    width: 100%;
    height: auto;
    max-width: 100%;
    border-top-left-radius: 3rem;     
    border-top-right-radius: .01rem;   
    border-bottom-left-radius: .01rem;
    border-bottom-right-radius: 3rem; 
}

.background-image-practice-detail {
    position: fixed;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
        url('/assets/images/lawfirm/building.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    z-index: -2;
  }
  

    

/* Desktop container utility class */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* gap: clamp(0.2rem, 6vw, 0.5rem); */
  }
  
  /* 2xl (1536px) */
@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
  .practice-detail{
    display: flex;
    flex-direction: column;
  }
}

/* xl (1280px) */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
   
}

/* lg (1024px) */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
}

/* md (768px) */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
   
}

/* sm (640px) */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs (475px) */
@media (max-width: 29.6875rem) {
  /* .container {
    width: 100%;
} */
}


.practice-title{
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    position: relative;
    font-size: 5rem;
    /* font-size: clamp(2.5rem, calc(6vw + 0.1rem), 4.25rem); */
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 6.4px;
    
  }
  .practice{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 1rem 0;
    /* font-size: 20px; */
    font-family: "Roboto", serif;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.6),
    3px 3px 6px rgba(0, 0, 0, 0.4);
    font-size: clamp(1.3rem, calc(5vw + 0.1rem), 2rem);
    margin-bottom: 10rem;
    /* margin-left: 2rem;
    margin-right: 2rem; */
    /* background-color: var(--light-grey); */
  }


  .scrolling .card-hover-zone{
    pointer-events: none;
  }
  .scrolling .card-content{
    transition: none !important;
  }
.card-hover-zone{
  padding: 16px;
  margin: -16px;
}
.card-hover-zone:hover .card-content{
  transform: translate(0, -50%);
}
.card-hover-zone:hover .original-text{
  opacity: 0;
  transform: translateX(-1.25rem);
}
.card-hover-zone:hover .practice-card::before{
    transform: scale(1.2);
    filter: blur(1px);
}


/* .p-card1 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
}
.p-card2 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card3 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card4 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card5 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card6 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card7 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card8 {
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.p-card9 {
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
} */

.practice-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 480px; */
  /* height: 256px; */
  width: clamp(10rem, calc(50vw + 6rem), 30rem);
  height: clamp(5.33rem, calc(50vw + 6rem), 16rem);
  z-index: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  overflow: hidden;
  border-top-left-radius: 16px;    
  border-top-right-radius: 16px;  
  border-bottom-left-radius: 16px; 
  border-bottom-right-radius: 16px;
  /* Add these background properties: */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background-size: cover;
  background-position: center;
}
/* .practice-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: 100ms ease-in-out transform,
              100ms ease-in-out filter;
  z-index: -1;
} */

.card-content{
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
  background-color: rgba(254, 218, 106, 0.8);
  padding: 32px;
  color: white;
  text-align: right;
  transition: 100ms ease transform;
}
.card-title{
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  font-size: 35px;
  font-size: clamp(1.5rem, calc(5vw + 0.1rem), 2.188rem);
}
.line{
  width: 70px;
  height: 5px;
  background-color: white;
  margin: 16px 0 16px auto;
}
p.small{
  font-size: 18px;
  text-shadow: 0 0 3.2px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
}
.learn-more-button{
  position: relative;
  bottom: 15px;
  padding: .3rem 1.5rem;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #fff;
  color: white;
  border-radius: .5rem;
  cursor: pointer;
  transition: 200ms ease-in-out background-color,
              200ms ease-in-out color;
}
.learn-more-button:hover{
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}


  /* Desktop container utility class */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* gap: clamp(0.2rem, 6vw, 0.5rem); */
}

/* 2xl (1536px) */
@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
  .practice{
    display: flex;
    flex-direction: column;
  }

}

/* xl (1280px) */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
}

/* lg (1024px) */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
}

/* md (768px) */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
}

/* sm (640px) */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs (475px) */
@media (max-width: 29.6875rem) {
  /* .container {
    width: 100%;
} */
 /* .accolade-item{
  font-size: 1.25rem;
 } */
 /* .accolades-section{
  gap: 5rem;
 } */
}



  .team{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
    margin-bottom: 15rem;
    /* background-color: var(--orange); */
  }
  .lawyer-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .lawyer-card img{
    will-change: transform;
    width: clamp(13.8847rem, calc(40vw + 15rem), 19.013rem);
    height: clamp(16.85405rem, calc(40vw + 15rem), 23.078rem);
    transition: transform 0.3s ease;
    /* padding: 48px; */
  }

  .lawyer-card img:hover{
    transform: translateY(-16px);
  }

  .learn-more-lawyer-button{
    display: flex; 
    justify-content: center;
    align-items: center; 
    position: absolute;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    /* text-transform: uppercase; */
    bottom: -3rem;
    width: 10rem;
    height: 2rem;
    font-size: 1.15rem;
    letter-spacing: .125rem;
    /* border: .125rem solid #fff; */
    color: rgb(0, 0, 0);
    background-color: var(--accent-color);
    border-radius: 8px;
    cursor: pointer;
    transition: 200ms ease-in-out background-color,
                200ms ease-in-out color,
                200ms ease-in-out transform;
    /* border-top-left-radius: 1rem;    
    border-top-right-radius: 1rem;  
    border-bottom-left-radius: 1rem; 
    border-bottom-right-radius: 1rem;  */
  }
  .learn-more-lawyer-button:hover{
    /* background-color: var(--accent-color); */
    transform: scale(0.9);
  }
  

  .scrolling .lawyer-card{
    pointer-events: none;
    transition: none !important;
  }
 
.lawyer-card-hover-zone{
  padding: 1rem;
  margin: -1rem;
}
/* .lawyer-card:hover .lawyer-card-content{
  transform: translate(0, -50%);
} */
/* .lawyer-card-hover-zone:hover{
  opacity: 0;
  transform: translateX(-20px);
}
.lawyer-card-hover-zone:hover .lawyer-card::before{
    transform: scale(1.2);
    filter: blur(.0625rem);
} */

/* .lawyer-card-content{
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
  background-color: rgba(254, 218, 106, 0.8);
  padding: 2rem;
  color: white;
  text-align: right;
  transition: 100ms ease transform;
} */
/* .lawyer-card-title{
  text-shadow: 0 0 .5rem rgba(0, 0, 0, 0.5);
  font-size: 2.1875rem;
  font-size: clamp(24px, calc(5vw + 1.6px), 35.008px);
}
.line{
  width: 4.375rem;
  height: .3125rem;
  background-color: white;
  margin: 1rem 0 1rem auto;
}
p.small{
  font-size: 1.125rem;
  text-shadow: 0 0 .2rem rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
}
  */

  .team-title{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 650;
    font-size: 5rem;
    /* font-size: clamp(40px, calc(6vw + 1.6px), 68px); */
    color: var(--accent-color);
    letter-spacing: .3125rem;
    text-align: center;
    position: relative;
    padding-bottom: 3rem;
    z-index: 3;
  }
  
  .lawyer-container{
    display: grid;
    grid-template-rows: 3fr 1fr;
    grid-template-areas: 
      'photo'
      'thumbnails';
    position: relative;
    
  }
  .background-photo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 40rem; 
    height: 33.875rem; 
    object-fit: cover; 
    z-index: -1;
  }
  
  .bio-selector{
    display: block;
    position: relative;
    top: 4.375rem;
    height: 17.8125rem;
    width: 6.25rem;
    border: .0625rem solid red;
  }
  
  
  .lawyer-aboutme-container{
    grid-column-start: 2;
    /* padding: 88px; */
    color:white;
    font-weight: 650;
    font-size: 28.8px;
    letter-spacing: .125rem;
    position: relative;
  }
  
  .lawyer-thumbnails{
    grid-area: thumbnails;
    display: flex;
    justify-content: center;
    color: white;
    gap: 16px;
  }
  
  .lawyer-thumbnail{
    transition: all 0.3s ease;
    opacity: 0.9;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 9.375rem;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: .0313rem;
    font-size: .875rem;
  }
  
  
  .lawyer-thumbnail img{
    height: 7.5rem;
    width: 6.875rem;
    transition: transform 3s ease;
  }
  .lawyer-thumbnail:hover {
    border-color: #fff;
    transform: scale(1.1);
  }
  .lawyer-thumbnail.active {
    border-color: #007bff;
    transform: scale(1.1);
  }
  
  
  .preload-images {
    position: absolute;
    left: -624.9375rem;
    opacity: 0;
    pointer-events: none;
    display: none;
  }
  
  
  

  #mainImage {
    display: block; 
    transition: opacity 1.5s ease-out, transform 1s ease-out;
  }
  
  
  #memberName {
    transition: opacity 0.5s ease-out, transform .5s ease-in-out;
    font-family: "Bebas Neue", serif;
  }
  
  #memberBio {
    transition: opacity 0.5s ease-out, transform .5s ease-in-out;
  }
 
   
  .main-photo{
    cursor: pointer;
  }
  .main-photo:hover {
    transform: scale(1.02);
  }
  
  .main-photo img {
    grid-area: photo;
    position: relative;
    top: .625rem;
    left: 6.875rem;
    width: 22.4375rem;
    height: 43.25rem;
    
  }
  
  
  
  .memberBio {
    grid-column: 2;
    grid-row: 1;
    /* padding: 1.875rem; */
    border-radius: .5rem;
    overflow-y: auto;
  }
  
  #memberName {
    color: var(--accent-color);
    font-size: 48px;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .0625rem;
  }
  
  #memberBio p{
    line-height: 1.5;
    margin-bottom: 1.25rem;
    color:white;
    font-family: "Cormorant", sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
  }
  
  .close:hover {
    color: #ccc;
  }

    /* Desktop container utility class */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: .5rem;
  padding-right: .5rem;
  /* gap: clamp(3.2px, 6vw, 8px); */
}

/* 2xl (96rem) */
@media (max-width: 1536px) {
  .container {
    max-width: 1280px;
  }

}

/* xl (80rem) */
@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
  .team{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .lawyer-card{
    padding-bottom: 3rem;
  }
  .learn-more-lawyer-button{
    bottom: -0.1rem;
  }
}

/* lg (64rem) */
@media (max-width: 1024px) {
  .container {
    max-width: 768px;
  }
}

/* md (48rem) */
@media (max-width: 768px) {
  .container {
    max-width: 640px;
  }
}

/* sm (40rem) */
@media (max-width: 640px) {
  .container {
    max-width: 475px;
  }
  .team{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
  }
}

/* xs (29.6875rem) */
@media (max-width: 475px) {
  /* .container {
    width: 100%;
} */
}




.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        '1 2 3'
        '4 5 6';
    justify-content: center;
    align-items: center;
    font-family: var(--main-font);
    font-weight: 500;
    text-align: center;
    color: white;
    gap: 1rem;
    max-width: 100%;
}
.testimonial-title{
    font-family: var(--main-font);
    color: var(--accent-color);
    font-size: 5rem;
    text-align: center;
    padding-bottom: 3rem;
    text-transform: uppercase; 
    letter-spacing: 2px;
}
.testimonial-card{
    position: relative;
    text-align: center;
    color: white;
    font-size: 1.875rem;
    /* padding: 5rem; */
    padding: clamp(3rem, calc(8vw + 0.5rem), 4.5rem);
    border: 1px solid var(--accent-color);
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-color: var(--dark-grey);
    letter-spacing: 1px;
}
.testimonial-card::before{
    content: url("/assets/images/lawfirm/testimonial-topper.svg");
    /* position: absolute; */
}

.testimonials:nth-child(1){
    grid-area: one;
}
.testimonials:nth-child(2){
    grid-area: two;
}
.testimonials:nth-child(3){
    grid-area: three;
}
.testimonials:nth-child(4){
    grid-area: four;
}
.testimonials:nth-child(5){
    grid-area: five;
}
.testimonials:nth-child(6){
    grid-area: six;
}

  
  /* Desktop container utility class */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* gap: clamp(0.2rem, 6vw, 0.5rem); */
  }
  
  /* 2xl */
  @media (max-width: 96rem) {
    .container {
      max-width: 80rem;
    }
    .testimonials{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
            'one two'
            'three four'
            'five six';
    }
    .testimonials:nth-child(1){
        grid-area: one;
    }
    .testimonials:nth-child(2){
        grid-area: two;
    }
    .testimonials:nth-child(3){
        grid-area: three;
    }
    .testimonials:nth-child(4){
        grid-area: four;
    }
    .testimonials:nth-child(5){
        grid-area: five;
    }
    .testimonials:nth-child(6){
        grid-area: six;
    }
  }
  
  /* xl */
  @media (max-width: 80rem) {
    .container {
      max-width: 64rem;
    }
    
  }
  
  /* lg */
  @media (max-width: 64rem) {
    .container {
      max-width: 48rem;
    }
    .testimonials{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        /* grid-template-columns: 1fr; */
        padding: 6rem;
    }
  }
  
  /* md */
  @media (max-width: 48rem) {
    .container {
      max-width: 40rem;
    }
    .testimonials{
        padding: 3rem;
    }
  }
  
  /* sm */
  @media (max-width: 40rem) {
    .container {
      max-width: 29.6875rem;
    }
    .testimonials{
        padding: 0rem;
    }
    .testimonial-card{
        padding: 2rem;
    }
  }
  
  /* xs */
  @media (max-width: 29.6875rem) {
    .container {
      /* width: 100%; */
  }
  .testimonial-card{
    padding: 1rem;
    font-size: 1.5rem;
  }
  .testimonial-card::before{
    display: none;
  }
  }



.trust{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      'accolades accolades'
      'bottom-left bottom-right';
    font-family: "Cormorant", sans-serif;
    font-weight: 500;
    z-index: 1;
    gap: 2rem;
    color: rgb(255, 255, 255);
    /* padding-top: 5rem; */
    /* width: 100vw; */
    /* background-color: var(--dark-grey); */
    /* padding-bottom: 5rem; */
  }

  .accolades-section{
    grid-area: accolades;
    font-family: "Bebas Neue", serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9rem;
    font-size: 1.5rem;
    /* padding-bottom: 5rem; */
    width: 100%;
    height: auto;
    max-width: 100%;
    /* font-size: clamp(1.25rem, calc(2vw + 0.1rem), 1.5rem);  */
  }
  .accolade-item{
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .accolade-item::before{
    content: "";
    position: absolute;
    left: calc(-1 * clamp(2rem, 8vw, 2.5rem));
    top: -30%;
    width: 5rem;
    height: 5rem;
    background-image: url('/assets/images/lawfirm/wreath-left.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .accolade-item::after{
    content: "";
    position: absolute;
    right: calc(-1 * clamp(2rem, 8vw, 2.5rem));
    top: -30%;
    width: 5rem;
    height: 5rem;
    background-image: url('/assets/images/lawfirm/wreath-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

 
/* Staggered delays */
.accolade-item:nth-child(1) .accolade-item-bottom,
.accolade-item:nth-child(1) .accolade-item-top {
    transition-delay: 0.1s;
}

.accolade-item:nth-child(2) .accolade-item-bottom,
.accolade-item:nth-child(2) .accolade-item-top {
    transition-delay: 0.3s;
}

.accolade-item:nth-child(3) .accolade-item-bottom,
 .accolade-item:nth-child(3) .accolade-item-top {
    transition-delay: 0.6s;
}

.accolade-item:nth-child(4) .accolade-item-bottom,
.accolade-item:nth-child(4) .accolade-item-top {
    transition-delay: 0.9s;
}


  .team-photo{
    grid-area: bottom-left;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* width: clamp(20.3125rem, 50vw, 40.625rem);
    aspect-ratio: 1.498; */
    /* justify-self: stretch; */
    border-top-left-radius: 3rem;     
    border-top-right-radius: .01rem;   
    border-bottom-left-radius: .01rem;
    border-bottom-right-radius: 3rem;
    object-fit: cover;
    object-position: center;
  }

  /* The font size clamp was causing overflow for the entire page */
  .about-section{
    grid-area: bottom-right;
    width: 100%;
    height: auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    font-weight: 500;
    font-size: clamp(1.5rem, calc(5vw + 0.1rem), 1.8rem);
    color: white;
    /* overflow-wrap: break-word; 
    word-wrap: break-word;     
    hyphens: auto;   */
  } 


/* Desktop container utility class */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* gap: clamp(0.2rem, 6vw, 0.5rem); */
}

/* 2xl (1536px) */
@media (max-width: 96rem) {
  .container {
    max-width: 80rem;
  }
  .trust{
    display: flex;
    flex-direction: column;
  }
  .about-section{
    top: 0rem;
    right: 0rem;
  }
}

/* xl (1280px) */
@media (max-width: 80rem) {
  .container {
    max-width: 64rem;
  }
   .trust{
    padding-top: 10rem;
   }
   .content{
    margin-bottom: 5rem;
  }
  
}

/* lg (1024px) */
@media (max-width: 64rem) {
  .container {
    max-width: 48rem;
  }
  .accolades-section{
    gap: 6rem;
  }
}

/* md (768px) */
@media (max-width: 48rem) {
  .container {
    max-width: 40rem;
  }
   .accolades-section{
    gap: 4rem;
   }
}

/* sm (640px) */
@media (max-width: 40rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* xs (475px) */
@media (max-width: 29.6875rem) {
  /* .container {
    width: 100%;
} */
}