/* Mobile Styles */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }
  
  .call-to-action-container {
    padding: 12px 16px;
    justify-content: unset;
  }

  .call-to-action {
    column-gap: unset;
  }

  .call-to-action-text {
    max-width: 172px;
    font-size: 16px;
    font-weight: 700;
  }

  .call-to-action-image-container {
    max-width: 192px;
  }

  .header-right {
    display: none;
  }

  header {
    padding: 8px 16px;
  }

  .header-logo {
    max-width: 54px;
  }

  .header-left {
    column-gap: 12px;
  }

  .header-text-title {
    font-size: 14px;
    font-weight: 700;
  }

  .header-text-subtitle {
    font-size: 10px;
    font-weight: 400;
  }

  .navigation {
    display: none;
  }

  .carousel-slide {
    height: 640px;
  }

  #carousel-1-container {
    max-width: 364px;
    top: 32px;
    transform: translateX(-50%);
  }

  .carousel-1-location {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .carousel-1-description {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
  }

  .carousel-control {
    display: none;
  }

  .service-info-n-contact-button {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    width: fit-content;
  }

  .carousel-1-buttons {
    column-gap: 12px;
    margin-top: 12px;
  }

  .service-info-n-contact-button-line {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
  }

  .service-info-n-contact-button-icon {
    max-width: 16px;
  }

  .service-info-n-contact-button-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .service-info-n-contact-button-line-icon {
    max-width: 16px;
  }

  .service-info-n-contact-button-line-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .service-info-n-contact-button-wrapper {
    margin-top: 0;
    width: fit-content;
  }

  .service-info-n-contact-button-line-wrapper {
    margin-top: 0;
    width: fit-content;
  }

  .carousel-indicators {
    left: 20px;
    transform: unset;
  }

  #carousel-2-container {
    max-width: 364px;
    top: 32px;
    transform: translateX(-50%);
  }

  #carousel-2-title {
    font-size: 28px;
    font-weight: 900;
  }

  .carousel-2-link-wrapper  {
    margin-top: 12px;
  }

  .carousel-2-link {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 24px;
  }

  .carousel-2-location-sp {
    display: block;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
  }

  #carousel-2-description {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
  }

  #carousel-3-container {
    max-width: 384px;
    top: 32px;
    transform: translateX(-50%);
  }

  #carousel-3-title {
    font-size: 28px;
    font-weight: 900;
  }

  #carousel-3-link-wrapper {
    margin-top: 12px;
  }

  .carousel-3-link {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 24px;
  }

  .carousel-3-feature-wrapper {
    padding: 16px;
  }

  .carousel-3-features {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
  }

  #carousel-3-feature-description {
    font-size: 16px;
    font-weight: 500;
  }

  .carousel-3-feature-icon {
    max-width: 16px;
  }

  .carousel-3-feature-icon img {
    width: 16px;
    height: auto;
    object-fit: contain;
  }

  .carousel-3-feature-text {
    font-size: 12px;
    font-weight: 400;
  }

  #carousel-3-description {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    max-width: 219px;
  }

  #carousel-4-container {
    max-width: 388px;
    top: 32px;
    transform: translateX(-50%);
  }
  
  .carousel-4-title {
    font-size: 28px;
    font-weight: 900;
  }

  #carousel-4-title {
    font-size: 28px;
    font-weight: 900;
    color: #FCFAEF;
  }

  #carousel-4-link-wrapper {
    margin-top: 12px;
  }

  .carousel-4-link {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 24px;
  }

  .carousel-4-feature-wrapper {
    margin-top: 12px;
    padding: 16px;
  }

  .carousel-4-features {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
  }

  #carousel-4-feature-description {
    font-size: 16px;
    font-weight: 500;
    color: #FFF4CA;
  }

  .carousel-4-feature-icon {
    max-width: 16px;
  }

  .carousel-4-feature-text {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
  }

  .carousel-4-feature-bottom-text {
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
  }

  #carousel-4-description {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    max-width: 219px;
  }

  /* Youtube */
  .youtube-section {
    padding: 32px 16px;
  }

  .youtube-section-container {
    flex-direction: column;
  }

  .youtube-section-icon {
    max-width: 47px;
  }

  .youtube-section-title {
    font-size: 32px;
    font-weight: 900;
    margin-top: unset;
    flex: 1;
  }

  .youtube-section-header {
    max-width: unset;
    flex-direction: row;
  }

  .youtube-section-description {
    font-size: 16px;
  }

  .youtube-section-icon {
    display: flex;
    align-items: center;
  }

  .youtube-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 16px;
  }

  .youtube-video-card {
    height: 400px;
  }

  .youtube-video-thumbnail iframe {
    height: 223px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    min-height: unset;
  }

  .youtube-video-title {
    font-size: 14px;
    font-weight: 700;
  }
  
  .youtube-video-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 84px;
    padding: 10px 20px 32px 20px;
    min-height: unset;
  }

  .youtube-section-link {
    margin-top: 0;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    display: flex;
    column-gap: 8px;
    align-items: center;
  }

  .youtube-section-link-icon {
    max-width: 20px;
  }

  /* Review Section */
  .review-section {
    padding: 32px 0;
    min-height: 552px;
  }

  .review-section-header {
    flex-direction: column;
    row-gap: 16px;
    padding: 0 16px;
    align-items: flex-start;
  }

  .review-section-icon {
    max-width: 47px;
  }

  .review-select-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 0;
    flex: 1;
  }

  .review-section-header {
    padding-bottom: unset;
  }

  .review-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .review-section-header-select {
    width: 100%;
    padding-bottom: unset;
  }

  .track {
    column-gap: 24px;
  }

  .card.active {
    padding: 24px 16px;
    height: 295px;
    min-height: unset;
  }

  #viewport-youtube-review .card-youtube {
    padding: 16px;
    max-width: 340px;
    border-radius: 24px;
  }

  #viewport-youtube-review .card-youtube .card-youtube-video-title {
    font-size: 16px;
    font-weight: 700;
  }

  .youtube-video-icon {
    width: 24px;
    display: flex;
    align-items: center;
  }

  .youtube-video-text {
    font-size: 14px;
    font-weight: 500;
  }

  .quote {
    max-width: 81px;
    height: unset;
  }

  .quote img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .card {
    border-radius: 24px;
    row-gap: 12px;
    max-width: 340px;
    height: 243px;
  }

  .card.active .quote-content {
    font-size: 16px;
    font-weight: 500;
  }

  .author-avatar {
    max-width: 38px;
  }

  .author {
    gap: 13px;
  }

  .author-name {
    font-size: 20px;
    font-weight: 500;
  }

  .review-section-bottom {
    padding: 0 16px;
  }

  .review-section-more-link {
    padding: 12px 24px;
    column-gap: 8px;
  }

  .review-section-more-text {
    font-size: 16px;
    font-weight: 500;
  }

  .review-section-more-icon {
    max-width: 20px;
  }

  .review-section-more-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Pricing */
  .pricing-section {
    padding: 32px 16px;
  }

  .pricing-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .pricing-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .pricing-card {
    padding: 16px;
  }
  
  .pricing-card-title {
    font-size: 16px;
    font-weight: 700;
  }

  .pricing-card-description {
    font-size: 14px; 
    font-weight: 400;
  }

  .pricing-card-icon {
    max-width: 32px;
  }

  .pricing-section-bottom {
    margin-top: 16px;
  }

  .pricing-section-more-text {
    font-size: 16px;
    font-weight: 500;
  }

  .pricing-section-more-icon {
    max-width: 20px;
  }

  .pricing-section-more-link {
    padding: 12px 24px;
  }

  /* Service section */
  .service-section {
    padding: 32px 16px;
  }

  .service-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .service-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 16px;
  }

  .service-card {
    padding: 12px 16px;
    column-gap: 24px;
  }

  .service-card-title {
    font-size: 20px;
    font-weight: 700;
  }

  .service-card-description {
    font-size: 14px;
    font-weight: 400;
  }

  .service-card-image {
    max-width: 140px;
    aspect-ratio: 140 / 100;
  }

  .service-card-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .service-card-image__caret-icon {
    max-width: 24px;
    height: 24px;
  }

  #service-card-1 {
    order: 1;
  }

  #service-card-2 {
    order: 2;
  }

  #service-card-3 {
    order: 4;
  }

  #service-card-4 {
    order: 3;
  }

  /* Reasons section */
  .reasons-section {
    padding: 32px 16px;
  }

  .reasons-section-container {
    flex-direction: column;
  }

  .reasons-section-title-text {
    font-size: 32px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 16px;
  }

  .reason-card {
    padding: 16px 12px;
    column-gap: 20px;
  }

  .reason-title {
    font-size: 20px;
    font-weight: 700;
  }

  .reason-details {
    font-size: 14px;
    font-weight: 400;
  }

  .reasons-section-more {
    margin-top: 16px;
  }

  .reasons-section-more-link {
    padding: 12px 24px;
    column-gap: 8px;
    display: flex;
    align-items: center;
  }

  .reasons-section-more-text {
    font-size: 16px;
    font-weight: 500;
  }

  .reasons-section-more-icon {
    max-width: 20px;
  }

  /* Case section */
  .case-section {
    padding: 32px 16px;
    min-height: 840px;
  }

  .case-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .case-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 16px;
  }

  .case-card {
    padding: 12px 16px;
    column-gap: 12px;
  }

  .case-card-icon {
    max-width: 32px;
  }

  .case-card-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .case-card-title {
    font-size: 16px;
    font-weight: 700;
  }

  .case-card-description {
    font-size: 14px;
    font-weight: 400;
  }

  .case-section {
    background-image: url('../images/case-section-bg-mobile.webp');
  }

  /* FAQ section */
  .faq-section {
    padding: 32px 16px;
  }

  .faq-container {
    flex-direction: column;
  }

  .faq-title {
    font-size: 32px;
    font-weight: 900;
  }

  .faq-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
  }

  .faq-item {
    padding: 32px 16px;
  }

  .faq-question-text {
    font-size: 16px;
    font-weight: 700;
  }

  .faq-answer {
    font-size: 14px;
    font-weight: 400;
  }

  /* Lawyer section */
  .lawyer-section {
    padding: 32px 16px;
  }

  .lawyer-section-header {
    font-size: 32px;
    font-weight: 900;
  }

  .lawyer-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 16px;
  }

  .lawyer-card {
    padding: 32px 16px;
  }

  .lawyer-avatar {
    max-width: 48px;
  }

  .lawyer-info {
    column-gap: 8px;
  }

  .lawyer-name {
    font-size: 16px;
    font-weight: 700;
  }

  .lawyer-details {
    row-gap: 4px;
  }

  .lawyer-title {
    font-size: 12px;
    font-weight: 400;
  }

  .lawyer-date {
    font-size: 14px;
    font-weight: 400;
  }

  .lawyer-question {
    padding: 16px;
  }

  .lawyer-question-text {
    font-size: 16px;
    font-weight: 700;
  }

  .lawyer-answer {
    font-size: 14px;
    font-weight: 400;
  }

  .lawyer-card-more-link {
    font-size: 14px;
    font-weight: 700;
  }

  .lawyer-section-bottom {
    margin-top: 16px;
    justify-content: flex-start;
  }

  .lawyer-section-more-link {
    padding: 12px 24px;
    column-gap: 8px;
    display: flex;
    align-items: center;
  }

  .lawyer-section-more-text {
    font-size: 16px;
    font-weight: 500;
  }

  .lawyer-section-more-icon {
    max-width: 20px;
  }

  /* Area section */
  .area-section {
    padding: 32px 16px;
  }

  .area-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .area-embedded-map {
    margin-top: 16px;
  }

  .area-links {
    margin-top: 16px;
    row-gap: 12px;
  }

  .area-link {
    font-size: 12px;
    font-weight: 500;
    padding: 15px 12px;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .more-link-location {
    font-size: 14px;
    font-weight: 500;
  }

  .more-link-location__icon {
    max-width: 16px;
  }

  /* Knowledge section */
  .knowledge-section {
    padding: 32px 16px;
  }

  .knowledge-section-container {
    flex-direction: column;
  }

  .knowledge-section-header {
    flex-direction: unset;
    column-gap: 8px;
  }

  .knowledge-section-title {
    font-size: 32px;
    font-weight: 900;
    display: flex;
    align-items: center;
  }

  .knowledge-section-icon {
    max-width: 47px;
    display: flex;
    align-items: center;
  }

  .knowledge-section-content {
    margin-top: 16px;
    row-gap: 16px;
  }

  .knowledge-card {
    padding: 16px;
  }

  .knowledge-date {
    margin-bottom: 8px;
  }

  .knowledge-title {
    font-size: 16px;
    font-weight: 700;
  }

  /* Service Info and Contact Section */
  .service-info-n-contact-container {
    border-radius: 24px;
    background-image: url('../images/service-info-n-contact-bg-mobile.webp');
    height: 494px;
  }

  .service-info-n-contact-section {
    padding: 0px;
    margin-top: 40px;
  }

  .service-info-n-contact-phone {
    padding: 12px 16px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .service-info-n-contact-phone-icon {
    max-width: 24px;
  }

  .service-info-n-contact-phone-number {
    font-size: 24px;
    font-weight: 900;
  }

  .service-info-n-contact-header {
    font-size: 32px;
    font-weight: 900;
  }

  .service-info-n-contact-location {
    font-size: 20px;
    font-weight: 700;
  }

  .service-info-n-contact-wrapper {
    padding: 0 16px;
  }

  .service-info-n-contact-subheader {
    font-size: 16px;
    font-weight: 500;
    margin-top: 12px;
    max-width: 168px;
  }

  .service-and-contact-info-button-container {
    flex-direction: column;
    margin-top: 12px;
    row-gap: 12px;
  }

  /* Footer */
  footer {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }

  .footer-top-container {
    flex-direction: column;
  }
  
  .footer-top-wrapper {
    padding: 40px 16px 32px 16px;
  }

  .footer-logo-text {
    font-size: 24px;
    font-weight: 900;
  }

  .footer-location {
    font-size: 20px;
    font-weight: 700;
  }

  .footer-address {
    margin-top: 16px;
  }

  .footer-address-icon {
    max-width: 20px;
  }

  .footer-address-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-address-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-phone-icon {
    max-width: 20px;
  }

  .footer-phone-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-phone-label {
    font-size: 14px;
    font-weight: 400;
  }

  .footer-phone-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-hours-icon {
    max-width: 20px;
  }

  .footer-hours-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-hours-label {
    font-size: 14px;
    font-weight: 400;
  }

  .footer-hours-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-links-container {
    margin-top: 24px;
  }

  .footer-link {
    font-size: 16px;
    font-weight: 500;
  }

  .footer-bottom-wrapper {
    padding: 24px 16px;
  }

  .footer-bottom-container {
    row-gap: 6px;
  }

  .footer-bottom-header {
    font-size: 16px;
    font-weight: 700;
  }

  .footer-bottom-link {
    font-size: 14px;
    font-weight: 400;
  }
}