:root {
    --primary-orange: #C09A45;
    --dark-blue: #0D0D09;
    --light-gray: #F0F2F4;
    --text-color: #0D0D09;
    --card-bg: #fff;
    --border-color: #eee;
    --gray-bg-sections: #f7f7f7;
    --dark-section-bg: #333;
    --green-check: #28a745;
    --dark-brown: #3e311f;
}

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

@font-face {
  font-family: "Alexandria";
  src: url("../fonts/Alexandria-Regular.ttf");
}

body {
    font-family: Alexandria;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-gray);
    overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  transition: all 0.3s;
}

a:focus,
a:hover {
  text-decoration: none;
}

.btn {
    background-color: var(--primary-orange);
    color: #fff;
    border-radius: 50px;
    height: 40px;
    border: 1px solid var(--primary-orange);
    line-height: 40px;
    padding: 0 30px;
    font-size: 14px;
    transition: all .3s ease-in-out;
    max-width: 100%;
}

.btn:hover, .btn:focus {
    color: var(--primary-orange) !important;
    background-color: #fff !important;
    border: 1px solid var(--primary-orange) !important;
}

.btn-white{
    background: #fff;
    color: var(--primary-orange);
    border: 1px solid var(--primary-orange) !important;
}

.btn-white:hover, .btn-white:focus {
    color: #fff !important;
    background-color: var(--primary-orange) !important;
    border: 1px solid var(--primary-orange) !important;
}

.gap-15{
    gap: 15px;
}

.nav_btn{
    padding: 0 15px;
}

.navbar {
    padding: 10px 0;
}

.navbar-brand {
  margin: 0;
}

.navbar-brand img{
    width: 75px;
}

.nav-link {
    color: #000000;
    margin: 0 6px;
    font-size: 14px;
}

.nav-link:hover {
  color: #C09A45;
}

.lang_btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 14px;
}

.user_img{
    width: 50px;
    height: 50px;
    border-radius: 15px;
}

/* Header */
header {
    background-color: #fff;
}

.auth-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.auth-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.auth-buttons .lang-toggle {
    background-color: var(--light-gray);
    color: var(--dark-blue);
}

.auth-buttons .lang-toggle:hover {
    background-color: #e0e0e0;
}

.auth-buttons .register-new {
    background-color: var(--light-gray);
    color: var(--dark-blue);
}

.auth-buttons .register-new:hover {
    background-color: #e0e0e0;
}

.auth-buttons .login {
    background-color: var(--primary-orange);
    color: #fff;
}

.auth-buttons .login:hover {
    background-color: #c08f44;
}

/* Hero Section (Smiling Lawyer) */
.hero-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 60px 5%;
    position: relative;
    min-height: 700px;
    overflow: hidden;
}

.hero-content {
    /*flex: 1;*/
    width: 50%;
    max-width: 550px;
    z-index: 2;
}

[dir="rtl"] .hero-content {
    text-align: right;
    padding-left: 20px;
}

[dir="ltr"] .hero-content {
    text-align: left;
    padding-right: 20px;
}

.hero-content .subtitle {
    color: #0D0D09;
    font-size: 13px;
    border: 1px solid var(--primary-orange);
    margin-bottom: 10px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
}

.hero-content h1 {
    font-size: 3.5em;
    color: var(--dark-blue);
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: 600;
}

.hero-content p {
    font-size: 16px;
    color: #0D0D09;
    margin-bottom: 30px;
}

.call-to-action {
    min-width: 140px;
}

.hero-content .call-to-action:hover {
    background-color: #c08f44;
}

.hero-image-and-cards {
     /*flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* min-height: 500px; */
    height: 650px;
    width: 50%;
    z-index: 1;
}

.hero-image-and-cards img {
    width: 100%;
    /* height: auto; */
    border-radius: 24px;
    position: relative;
    z-index: 2;
    object-fit: cover;
    object-position: center bottom;
}
/* Cards positioned relative to the hero-image-and-cards container */
.card {
    background: #FFFFFF;
    border-radius: 19.5931px;
    padding: 12px;
    position: absolute;
    /* width: 180px; */
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: #0D0D09;
    border: none;
    z-index: 3;
}

.card p {
    margin: 0;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 400px;
}

.card .number {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 5px;
}

.card button {
    background-color: var(--primary-orange);
    background-color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid #c08f44;
    color: #c08f44;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.card button:hover {
    background-color: #c08f44;
    color: #fff;
}

/* Card Positioning (Adjust these values based on your image and desired layout) */
.card-1 {
    top: 20%;
}

[dir="rtl"] .card-1 {
    /* right: calc(50% + 50px); */
    transform: translateX(30%);
    right: 0%;
}

[dir="ltr"] .card-1 {
    transform: translateX(-30%);
    left: 0%;
}

.card img{
    width: 75px;
    height: 75px;
}

.card-2 {
    bottom: 15%;
}

[dir="rtl"] .card-2 {
    /* left: calc(50% + 50px); */
    transform: translateX(50%);
    right: 0;
}

[dir="ltr"] .card-2 {
    transform: translateX(-50%);
    left: 0;
}

.card-3 {
    bottom: 20%;
}

[dir="rtl"] .card-3 {
    /* right: calc(50% + 70px); */
    transform: translateX(-70%);
}

[dir="ltr"] .card-3 {
    transform: translateX(70%);
}

.card-4 {
    top: 20%;
}

[dir="rtl"] .card-4 {
    left: -10%;
}

[dir="ltr"] .card-4 {
    right: -10%;
}

.hero-section .card{
    flex-direction: row;
}

/* Courtroom Section */
.courtroom-section {
    padding: 60px 7%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 550px;
}

[dir="rtl"] .courtroom-section {
    padding-right: 10px;
}

[dir="ltr"] .courtroom-section {
    padding-left: 10px;
}

.courtroom-content {
    width: 40%;
}

[dir="rtl"] .courtroom-content {
    /*max-width: 550px;*/
    text-align: right;
}

[dir="ltr"] .courtroom-content {
    text-align: left;
}

.courtroom-content h2 {
    font-size: 2.5em;
    color: var(--dark-blue);
    margin-bottom: 20px;
    line-height: 1.5;
}

.courtroom-content p {
    font-size: 16px;
    color: #0D0D09;
    margin-bottom: 30px;
}

.courtroom-image {
    /*flex: 1;*/
    /*max-width: 600px;*/
    width: 60%;
}

.courtroom-image img {
    max-width: 100%;
    height: auto;
}

[dir="rtl"] .courtroom-image img {
    border-radius: 24px 0 0 24px;
}

[dir="ltr"] .courtroom-image img {
    border-radius: 0 24px 24px 0;
}

.links{

}

.links div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #C1BFB9;
    padding: 40px 5%;
    font-size: 26px;
    font-weight: 600;
}

.links div:hover {
    background-image: url(../images/Hover.png);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.links div .btn{
    opacity: 0;
    transition: all 0s !important;
}

.links div:hover .btn{
    opacity: 1;
}
/* Scrolling Text Section */
.scrolling-text-section {
    background-color: var(--light-gray);
    padding: 30px 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2.2em;
    font-weight: 700;
    color: rgba(1, 29, 46, 0.1);
    text-transform: uppercase;
    margin-bottom: 40px;
    /* background-color: var(--green-check); */
}

.scrolling-text-content {
    display: flex;
    align-items: center;
    animation: scrollText 30s linear infinite;
    /* background-color: red; */
}

[dir="rtl"] .scrolling-text-content {
    padding-right: 50px;
}

[dir="ltr"] .scrolling-text-content {
    padding-left: 50px;
}

.scrolling-text-content span {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 50px;
    padding-left: 50px;
}

.scrolling-text-content .diamond {
    color: var(--primary-orange);
    font-size: 0.5em;
    position: relative;
    top: -2px;
}

.text_dark{
    color: black
}

.text_outline{
    outline-color: black;
}

@keyframes scrollText {
    from { transform: translateX(0); }

    to { transform: translateX(-100%); }
}

/* Financial Business / Bottom Hero */
.financial-business-section {
    position: relative;
    background-image: url('https://i.imgur.com/your-financial-business-bg.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 400px;
}

[dir="rtl"] .financial-business-section {
    text-align: right;
}

[dir="ltr"] .financial-business-section {
    text-align: left;
}

.financial-business-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.financial-business-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    max-width: 600px;
}

.financial-business-content h2 {
    font-size: 3em;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.financial-business-content .call-to-action {
    background-color: var(--primary-orange);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-end;
}

.financial-business-content .call-to-action:hover {
    background-color: #c08f44;
}

/* Features / Why Choose Us */
.features-section-1 {
    background-color: var(--gray-bg-sections);
    padding: 80px 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}

.about{
    padding: 80px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; 
}

.features-main-content {
    width: 50%;
}

.features-main-content .top-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #0D0D09;
    font-weight: 600;
    margin-bottom: 20px;
}

.features-main-content .top-info i {
    font-size: 1.2em;
    color: var(--primary-orange);
}

.features-main-content h2 {
    font-size: 2.5em;
    color: var(--dark-blue);
    margin-bottom: 20px;
    line-height: 1.5;
}

.features-main-content p {
    font-size: 16px;
    color: #0D0D09;
    margin-bottom: 30px;
}

.feature-cards-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 600px;
    width: 50%;
}

.feature-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
}

[dir="rtl"] .feature-card {
    text-align: right;
}

[dir="ltr"] .feature-card {
    text-align: left;
}

.main_subtitle {
    color: #0D0D09;
    font-size: 13px;
    border: 1px solid var(--primary-orange);
    margin: 30px auto;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    width: 80%;
    text-align: center;
}

.feature-card .icon {
    font-size: 2.5em;
    color: var(--primary-orange);
    margin-bottom: 10px;
}

.feature-card h3 {
    font-size: 1.4em;
    color: var(--dark-blue);
    margin-bottom: 5px;
}

.feature-card p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Partners Section */
.partners-section {
    padding: 40px 5%;
    overflow: hidden;
}

.partners-section img {
    height: 40px;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.partners-section img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

    .logo-carousel {
      width: 100%;
      margin: 0 auto;
    }

        .swiper-slide {
      text-align: center;
      /*width: 100% !important;*/
    }

    .swiper-slide img {
      max-width: 100%;
      height: auto;
    }

/* Testimonials Section */
.testimonials-section {
    background-color: #EEEEEE;
    padding: 80px 5%;
    margin: 30px 0%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.testimonials-section::before,
.testimonials-section::after {
    content: "\201C";
    position: absolute;
    font-size: 20em;
    color: #fff;
    line-height: 0.8;
    z-index: 0;
    pointer-events: none;
    font-family: Arial, sans-serif;
}

.testimonials-section::before {
    top: 20px;
    transform: scaleX(-1);
}

[dir="rtl"] .testimonials-section::before {
    left: -50px;
}

[dir="ltr"] .testimonials-section::before {
    right: -50px;
}

.testimonials-section::after {
    content: "\201D";
    bottom: 20px;
}

[dir="rtl"] .testimonials-section::after {
    right: -50px;
}

[dir="ltr"] .testimonials-section::after {
    left: -50px;
}

.testimonials-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.testimonials-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: var(--primary-orange);
    font-weight: 600;
}

.testimonials-header .diamond {
    font-size: 0.5em;
    position: relative;
    top: -2px;
}

.testimonials-content h2 {
    font-size: 3em;
    color: var(--dark-blue);
    margin-bottom: 20px;
}

.rating {
    margin-top: 30px;
    margin-bottom: 20px;
}

.rating .fa-star {
    color: var(--primary-orange);
    font-size: 1.5em;
    margin: 0 5px;
}

.testimonial-text {
    font-size: 1.4em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.author-info h4 {
    font-size: 1.3em;
    color: var(--dark-blue);
    margin-bottom: 5px;
}

.author-info p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 20px;
}

.avatar-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.avatar-row img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-orange);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.avatar-row img:hover {
    transform: translateY(-5px);
}

.testimonials_slider{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.testimonials_slider .swiper-wrapper{
    width: 100%;
    max-width: 100%;
}

.testimonials_slider .swiper-pagination {
      position: absolute;
      bottom: 10px;
      /*transform: translateX(-50%);*/
      display: flex;
      gap: 10px;
      justify-content: center;
      display: none;
    }

[dir="rtl"] .testimonials_slider .swiper-pagination {
      left: 50%;
    }

[dir="ltr"] .testimonials_slider .swiper-pagination {
      right: 50%;
    }

    .testimonials_slider .swiper-pagination .swiper-pagination-bullet {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      background-color: transparent;
      border: 2px solid transparent;
      cursor: pointer;
      display: block;
    }

    .testimonials_slider .swiper-pagination .swiper-pagination-bullet-active {
      border-color: #FFD700;
    }

/* Pricing Plans */
.pricing-section {
    padding: 80px 5%;
    text-align: center;
}

.pricing-section .main-title {
    font-size: 3em;
    color: var(--dark-blue);
    margin-bottom: 20px;
}

.pricing-section .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 50px;
}

.pricing-cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background-color: var(--card-bg);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    min-width: 280px;
    max-width: 350px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.pricing-card-highlighted {
    background-color: var(--primary-orange);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.pricing-card-highlighted:hover {
    transform: translateY(-10px) scale(1.08);
}

.pricing-card h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #7F8C89;
}

.pricing-card-highlighted h3 {
    color: #fff;
}

.pricing-card .price {
    font-size: 2.8em;
    font-weight: 700;
    color: var(--primary-orange);
    margin-bottom: 20px;
}

.pricing-card-highlighted .price,.pricing-card-highlighted .price span {
    color: #fff !important;
}

.pricing-card .price span {
    font-size: 0.6em;
    font-weight: 400;
    color: #C1BFB9;
}

[dir="rtl"] .pricing-card .price span {
    margin-right: 5px;
}

[dir="ltr"] .pricing-card .price span {
    margin-left: 5px;
}

.pricing-card .features-list {
    list-style: none;
    width: 100%;
    margin-bottom: 30px;
}

[dir="rtl"] .pricing-card .features-list {
    text-align: right;
}

[dir="ltr"] .pricing-card .features-list {
    text-align: left;
}

.pricing-card .features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.8em;
    color: #0D0D09;
}

.pricing-card-highlighted .features-list li {
    color: #fff;
}

.pricing-card .features-list li i {
    color: var(--green-check);
    font-size: 1.2em;
}

.pricing-card-highlighted .features-list li i {
    color: #fff;
}

.pricing-card .card-button {
    background-color: var(--primary-orange);
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: auto;
}

.pricing-card-highlighted .card-button {
    background-color: #fff;
    color: var(--primary-orange);
}

.pricing-card .card-button:hover {
    background-color: #c08f44;
}

.pricing-card-highlighted .card-button:hover {
    background-color: var(--light-gray);
}

/* Accordion / FAQ */
.faq-section {
    background-color: var(--gray-bg-sections);
    padding: 80px 5%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

[dir="rtl"] .faq-section {
    padding-left: 10px;
}

[dir="ltr"] .faq-section {
    padding-right: 10px;
}

.accordion{border-top: none;}

.accordion-item{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.faq-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;
}

.faq-image-container img {
    max-width: 100%;
    height: auto;
}

[dir="rtl"] .faq-image-container img {
    border-radius: 0 24px 24px 0;
}

[dir="ltr"] .faq-image-container img {
    border-radius: 24px 0 0 24px;
}

.faq-content {
    width: 48%;
}

[dir="rtl"] .faq-content {
    text-align: right;
}

[dir="ltr"] .faq-content {
    text-align: left;
}

.faq-header-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #0D0D09;
    font-weight: 600;
    margin-bottom: 20px;
}

.faq-header-info i {
    font-size: 1.2em;
    color: var(--primary-orange);
}

.faq-content h2 {
    font-size: 3em;
    color: var(--dark-blue);
    margin-bottom: 30px;
    line-height: 1.2;
}

.accordion {
    border-top: 1px solid var(--border-color);
}

.accordion-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--dark-blue);
    font-weight: 600;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: var(--primary-orange);
}

.accordion-header .icon {
    font-size: 1.5em;
    transition: transform 0.3s ease;
    color: #999;
}

.accordion-header.active .icon {
    color: var(--primary-orange);
}

[dir="rtl"] .accordion-header.active .icon {
    transform: rotate(45deg);
}

[dir="ltr"] .accordion-header.active .icon {
    transform: rotate(-45deg);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding-bottom: 0;
}

.accordion-body p {
    padding-bottom: 20px;
    font-size: 1em;
    color: #0D0D09;
    margin-bottom: 0;
}

.accordion-header.active + .accordion-body {
    max-height: 200px; /* Adjust as needed for content length */
    padding-bottom: 20px;
    transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

/* Contact Us */
.contact-us-section {
    padding-bottom: 5%;
    position: relative;
    overflow: hidden;
}

.contact-top-bar {
        background-color: #352A11;
    color: #fff;
    padding: 40px 5%;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.contact-top-bar .header-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
}

.contact-top-bar .header-info i{
    font-size: 1.2em;
    color: var(--primary-orange);
}

.contact-top-bar h2 {
    font-size: 2.1em;
    margin: 20px 0;
    line-height: 1.2;
}

.contact-top-bar p {
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 20px;
}

.contact-top-bar .call-to-action {
    background-color: var(--dark-blue);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.0em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-top-bar .call-to-action:hover {
    background-color: #003366;
}

.contact-main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
    padding: 60px 5%;
}

.contact-form-container {
    padding: 30px;
    border: 1px solid #C1BFB9;
border-radius: 32px;
    width: 45%;
}

[dir="rtl"] .contact-form-container {
    direction: rtl;
}

[dir="ltr"] .contact-form-container {
    direction: ltr;
}

.contact-form-container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--dark-blue);
}

.contact-form-container input,
.contact-form-container textarea {
    height: 50px;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #E3E5EA;
border-radius: 16px;
    font-size: 0.7em;
    color: var(--text-color);
    background-color: #fff;
}

[dir="rtl"] .contact-form-container input,
[dir="rtl"] .contact-form-container textarea {
    text-align: right;
}

[dir="ltr"] .contact-form-container input,
[dir="ltr"] .contact-form-container textarea {
    text-align: left;
}

.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
    color: #999;
}

.contact-form-container textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form-container button {
    background-color: var(--primary-orange);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.contact-form-container button:hover {
    background-color: #c08f44;
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 48%;
}

.contact-info-block .header-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #0D0D09;
    font-weight: 600;
    margin-bottom: 20px;
}

.contact-info-block .header-info i{
    color: var(--primary-orange);
}

.contact-info-block h3 {
    font-size: 2em;
    margin-bottom: 20px;
}

.card_group{
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.info-card {
    background: #FFFFFF;
    box-shadow: 0px 20.9162px 20.9162px -10.4581px rgba(54, 74, 54, 0.06), 0px 0.871508px 1.74302px rgba(87, 92, 86, 0.16), 0px 0px 0px 0.871508px rgba(18, 105, 63, 0.08);
    border-radius: 13.9441px;
    padding: 20px;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 47%;
}

.info-card .icon-wrapper {
    background-color: var(--primary-orange);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    flex-shrink: 0;
}

.info-card .text-content {
    /*flex-grow: 1;*/
}

.info-card h4 {
    font-size: 1.1em;
    margin-bottom: 0;
}

.info-card .text-content p,
.info-card .text-content a {
    font-size: 0.9em;
    color: #1D1F1E;
    margin-bottom: 0;
    text-decoration: none;
}

.info-card .text-content a:hover {
    color: var(--primary-orange);
}

.social-media-icons {
    display: flex;
    gap: 15px;
}

.social-media-icons a {
    width: 41.83px;
height: 41.83px;
border: 0.871508px solid #C09A45;
border-radius: 87.1508px;
    color: #C09A45 !important;
    font-size: 1.8em;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-media-icons a:hover {
    /*color: #fff !important;*/
    transform: translateY(-3px);
}

.contact-bottom-image-container {
margin: auto;
    width: 90%;
    display: flex;
    justify-content: center;
}

.contact-bottom-image-container img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    object-fit: cover;
}

/* Contact Bar (Footer) */
.contact-bar {
    background-color: var(--dark-blue);
    color: #fff;
    padding: 20px 5%;
    text-align: center;
    font-size: 0.95em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 50px; /* Space for the image to overlap */
}

.contact-bar span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-bar a {
    color: var(--primary-orange);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-bar a:hover {
    color: #fff;
}

/* Main Footer */
.main-footer {
    background-color: var(--dark-brown);
    color: #fff;
    padding: 40px 5%;
    padding-bottom: 20px;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.display_flex{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.main-footer .footer-logo img {
    height: 80px;
    margin-bottom: 20px;
}

.main-footer nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-bottom: 20px;
    padding: 0;
}

.main-footer nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-footer nav ul li a:hover {
    color: var(--primary-orange);
}

.main-footer .social-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.main-footer .social-icons a {
    color: #fff;
    font-size: 1.2em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.main-footer .social-icons a:hover {
    color: var(--primary-orange);
    transform: translateY(-3px);
}

.main-footer .copyright-info {
    font-size: 0.9em;
    color: #ccc;
}

.copyright-info img{
    position: relative;
    margin: 0 5px;
}

.main-footer .copyright-info span {
    color: var(--primary-orange);
}

.login,.login_form{
    padding: 40px 5%;
}

.login h2{
    font-weight: bold;
}

.login p{
    margin-bottom: 20px;
}

.login img{border-radius: 24px}

.login_form .contact-form-container{
    width: 100%;
}

.login_form .check input{
    width: auto;
}

[dir="rtl"] .login_form .check input{
    margin-left: 10px;
}

[dir="ltr"] .login_form .check input{
    margin-right: 10px;
}

.login_form h6{
    text-align: center;
    margin-top: 20px;
}

.login_form h6 a{
    color: var(--primary-orange);
}

[dir="rtl"] .login_form h6 a{
    margin-left: 10px;
}

[dir="ltr"] .login_form h6 a{
    margin-right: 10px;
}

.login_form .btn{width: 100% !important}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content h1 { font-size: 3em; }

    .hero-section { padding: 40px 3%; }

    .hero-image-and-cards img { max-width: 90%; }

    .card-1 { top: 15%; }

    [dir="rtl"] .card-1 { right: calc(50% + 30px); }

    [dir="ltr"] .card-1 { left: calc(50% + 30px); }

    .card-2 { top: 30%; bottom: auto;}

    [dir="rtl"] .card-2 { left: calc(50% + 30px);}

    [dir="ltr"] .card-2 { right: calc(50% + 30px);}

    .card-3 { bottom: 15%; }

    [dir="rtl"] .card-3 { right: calc(50% + 50px); }

    [dir="ltr"] .card-3 { left: calc(50% + 50px); }

    .card-4 { bottom: 15%;top:auto; }

    [dir="rtl"] .card-4 { left: calc(50% + 50px); }

    [dir="ltr"] .card-4 { right: calc(50% + 50px); }

    .courtroom-section { flex-direction: column;padding: 40px 5%}

    .courtroom-content { text-align: center; order: 2;width:100% ;}

    .courtroom-image { order: 1; margin-bottom: 30px;width:100%}

.courtroom-image img{border-radius: 24px;width: 100%}

    .financial-business-section { flex-direction: column; text-align: center; padding: 60px 3%; min-height: auto; }

    .financial-business-content { align-items: center; }

    .financial-business-content .call-to-action { align-self: center; }

    .features-section { padding: 60px 3%; flex-direction: column; align-items: center; text-align: center; }

    .features-main-content .top-info { justify-content: center; }

    .feature-cards-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: unset; }

    [dir="rtl"] .feature-card { text-align: right; }

    [dir="ltr"] .feature-card { text-align: left; }

    .testimonials-section { padding: 60px 5%; }

    .testimonials-section::before,
    .testimonials-section::after { font-size: 15em; }

    .testimonial-text { font-size: 1.2em; }

    .pricing-cards-container { gap: 20px; }

    .pricing-card { padding: 30px 20px; min-width: 250px; }

    .pricing-card-highlighted { transform: scale(1.03); }

    .faq-section {
        flex-direction: column;
        align-items: center;
        padding: 60px 3%;
        text-align: center;
    }

    .faq-image-container {
        order: 1;
        margin-bottom: 40px;
        max-width: 90%;
    }

    .faq-content {
        order: 2;
        max-width: 100%;
    }

    .faq-header-info {
        justify-content: center;
    }

    .faq-content h2 {
        font-size: 2.5em;
    }

    /* Contact Us Section */
    .contact-us-section { padding-bottom: 5% }

    .contact-top-bar { padding: 15px 3%; }

    .contact-top-bar h2 { font-size: 2em; }

    .contact-main-content {
        flex-direction: column;
        align-items: center;
        padding: 40px 3%;
    }

    .contact-form-container,
    .contact-info-block {
        min-width: unset;
        width: 100%;
        max-width: 500px;
    }

    .contact-info-block .header-info { justify-content: center; }

    .contact-info-block h3 { text-align: center; }

    .info-card { flex-direction: column; align-items: center; text-align: center; }

    .contact-bottom-image-container { padding-top: 30px; }

    .contact-bottom-image-container img { transform: translateY(30px); }

    .contact-bar { margin-top: 30px; } /* Adjust margin for footer to align with image */

    /* Main Footer */
    
    .main-footer .social-icons { margin-bottom: 15px; }
}

@media (max-width: 991px) {
    .navbar .nav_btn{display: none;}

    .hero-section{
        flex-direction: column-reverse;
        gap: 20px;
    }

    .hero-image-and-cards,.hero-content,
    .features-main-content,.feature-cards-grid,
    .faq-image-container,.faq-content{width: 100%;height: auto;max-width: 100%}

    .hero-content{max-width: unset; padding: 0 5%}

    .about,.faq-section{
        flex-direction: column;
        gap: 20px;
        padding: 20px 5%;
    }

    .faq-image-container img{border-radius: 24px}

    .pricing-section .main-title{font-size: 2em}

    .main-footer nav ul { flex-direction: column; gap: 15px; }

    .main-footer .display_flex{
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hero-section { flex-direction: column; text-align: center; padding: 40px 20px; min-height: auto; }

    .hero-content { order: 2; text-align: center; padding: 0; margin-top: 30px; }

    .hero-image-and-cards { order: 1; min-height: 400px; margin-bottom: 30px; }

    .hero-content h1 { font-size: 2.5em; }

    .hero-image-and-cards img { height: auto; }
    
    [dir="ltr"] .card-1
        {
            left: calc(30% + 30px);
        }
        
    [dir="rtl"] .card-1
        {
            right: calc(30% + 30px);
        }
        
        
        [dir="ltr"] .card-2 {
            transform: translateX(-10%);
            left: 0;
        }
        
        [dir="rtl"] .card-2 {
            transform: translateX(22%);
            right: 0;
        }

    [dir="rtl"] .card-3 {
        right: calc(-36% + 10px);
    }
    
    [dir="ltr"] .card-3 {
        left: calc(-36% + 10px);
    }
    
    [dir="rtl"] .card-4 {
        left: calc(5% + 50px);
    }
    
    [dir="ltr"] .card-4 {
        right: calc(5% + 50px);
    }

    .card { position: relative; width: 90%; max-width: 300px; margin: 15px auto; top: auto; right: auto; bottom: auto; left: auto; transform: none; }

    .hero-image-and-cards { flex-direction: column; }

    .courtroom-content h2 { font-size: 2.2em; }

    .scrolling-text-section { font-size: 1.5em; padding: 20px 0; }

    .scrolling-text-content span { padding-right: 30px; padding-left: 30px; }

    .financial-business-content h2 { font-size: 2.2em; }

    .features-section { padding: 40px 20px; }

    .features-main-content h2 { font-size: 2.2em; }

    .feature-cards-grid { grid-template-columns: 1fr; }

    .partners-section { gap: 20px; padding: 30px 3%; }

    .partners-section img { height: 30px; }

    .testimonials-section { padding: 40px 20px; }

    .testimonials-section::before,
    .testimonials-section::after { font-size: 10em; top: 50px; bottom: 50px; left: -30px; right: -30px; }

    .testimonials-content h2 { font-size: 2.2em; }

    .testimonial-text { font-size: 1.1em; }

    .author-info h4 { font-size: 1.1em; }

    .avatar-row img { width: 40px; height: 40px; }

    .pricing-section .main-title { font-size: 2.2em; }

    .pricing-cards-container { flex-direction: column; align-items: center; gap: 30px; }

    .pricing-card { max-width: 300px; width: 90%; }

    .pricing-card-highlighted { transform: scale(1.0); }

    .faq-content h2 { font-size: 2em; }

    .accordion-header { font-size: 1.1em; padding: 15px 0; }

    .accordion-body p { font-size: 0.95em; padding-bottom: 15px; }

    /* Contact Us Section */
    .contact-top-bar h2 { font-size: 1.8em; }

    .contact-top-bar p { font-size: 0.9em; }

    .contact-top-bar .call-to-action { font-size: 0.9em; padding: 10px 20px; }

    .contact-main-content { padding: 30px 20px; }

    .contact-form-container input,
    .contact-form-container textarea { font-size: 0.9em; }

    .contact-info-block h3 { font-size: 1.8em; }

    .social-media-icons a { font-size: 1.5em; }

    .contact-bottom-image-container { padding-top: 30px; }

    .contact-bottom-image-container img { transform: translateY(30px); }

    .contact-bar { flex-direction: column; gap: 10px; padding: 15px 20px; }

    .feature-cards-grid{gap: 15px}

    .feature-card{min-height: unset;}
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 2em; }

    .hero-content p { font-size: 1em; }

    .auth-buttons button { padding: 8px 15px; font-size: 0.9em; }

    .features-main-content h2 { font-size: 1.8em; }

    .feature-card { padding: 20px; }

    .feature-card h3 { font-size: 1.2em; }

    .feature-card .icon { font-size: 2em; }

    .courtroom-content h2 { font-size: 1.8em; }

    .financial-business-content h2 { font-size: 1.8em; }

    .testimonials-content h2 { font-size: 1.8em; }

    .testimonial-text { font-size: 1em; }

    .pricing-section .main-title { font-size: 1.8em; }

    .pricing-card h3 { font-size: 1.5em; }

    .pricing-card .price { font-size: 2.5em; }

    .faq-content h2 { font-size: 1.8em; }

    .accordion-header { font-size: 1em; }

    .accordion-header .icon { font-size: 1.2em; }

    /* Contact Us Section */
    .contact-top-bar h2 { font-size: 1.5em; }

    .contact-top-bar p { font-size: 0.9em; }

    .contact-top-bar .call-to-action { font-size: 0.9em; padding: 10px 20px; }

    .contact-main-content { padding: 30px 20px; }

    .contact-form-container input,
    .contact-form-container textarea { font-size: 0.9em; }

    .contact-info-block h3 { font-size: 1.5em; }

    .social-media-icons a { font-size: 1.3em; }

    .contact-bottom-image-container { padding-top: 20px; }

    .contact-bottom-image-container img { transform: translateY(20px); }

    .contact-top-bar{flex-direction: column;}

    .info-card h4{font-size: 1em}

    .info-card{width: 100%}
}