nav {
    position: relative;
    z-index: 99;
    width: 100%;
    background: #fff;
}

.container-xl {
    max-width: 1250px !important;
}

.desktop-item.active{
    color: #bd0a0c;
}

.mobile-item.active{
    color: #bd0a0c !important;
}

nav .wrapper {
    position: relative;
    /*max-width: 1200px;*/
   /* padding: 0px 0px; */
    /* height: 70px; */
    line-height: 55px;
    /* margin: auto; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .logo a {
    color: #f2f2f2;
    font-size: 30px;
    font-weight: 600;
    text-decoration: none;
}

.wrapper .nav-links {
    display: inline-flex;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-links li {
    list-style: none;
}

.desktop-item.active{
    color: #bd0a0c;
}

.nav-links li a {
    color: #242424;
    text-decoration: none;
    font-size: 12pt;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.nav-links li a:hover {
    background: transparent;
    /* color: #cc75df; */
}

.nav-links .mobile-item {
    display: none;
}

.nav-links .drop-menu {
    position: absolute;
    background: #fff;
    width: 180px;
    line-height: 45px;
    top: 85px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    padding-left: 0;
    border-radius: 10px;
    padding-bottom: 10px;
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
    transition: all 0.3s ease;
    top: 70px;
    opacity: 1;
    visibility: visible;
}

.drop-menu li a {
    width: 100%;
    display: block;
    padding: 0 0 0 15px;
    font-weight: 400;
    border-radius: 0px;
}

.mega-box {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 0px;
    top: 85px;
    opacity: 0;
    visibility: hidden;
}

.mega-box .content {
    background: #fff;
    padding: 25px 20px;
    display: flex;
    gap: 40px;
    width: 100%;
    justify-content: start;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.mega-box .content .row {
    width: calc(25% - 30px);
    line-height: 45px;
}

.content .row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content .row header {
    color: #000;
    font-size: 20px;
    font-weight: 500;
}

.content .row .mega-links {
    margin-left: 0px;
    border-left: 1px solid #141619;
}

.row .mega-links li {
    padding: 0 20px;
}

.row .mega-links li a {
    padding: 0px;
    padding: 0 20px;
    color: #000;
    font-size: 17px;
    display: block;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.row .mega-links li a:hover {
    color: #D51519;
}

.wrapper .btn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

.wrapper .btn-primary {
    background-color: #9957a4;
    padding: 8px 35px;
    border-radius: 100px;
    font-family: "Urbanist";
    font-weight: 500;
    display: block;
    color: #fff;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 12pt;
}

.wrapper .btn-primary:hover {
    background-color: #01103d;
    border-color: #01103d;
}


.nav-links li {
    position: relative;
    overflow: visible; 
    line-height: 40px;
}


.nav-links li > a.desktop-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: #9957a4;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

/* hover */
.nav-links li:hover > a.desktop-item::after {
    transform: scaleX(1);
    transform-origin: left;
}



.wrapper .btn.close-btn {
    position: absolute;
    right: 30px;
    top: 10px;
}


/* offer-sec start */
section.offer-sec {
  padding-top: 20px;
  padding-bottom: 80px;
}
section.offer-sec p {
  font-size: 14px;
  color: #1d1d1d;
  font-family: "urbanist";
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
}
section.offer-sec h6 {
  font-size: 60px;
  color: #0e1933;
  font-family: "urbanist";
  font-weight: 600;
}
section.offer-sec span.legal-team {
  font-family: "DM Serif Display";
  font-style: italic;
  color: #9957a4;
  font-weight: 400;
  font-size: 60px;
}
.offer-image {
  align-items: self-end;
}
.offer-img {
  position: relative;
}
.offer-image img:hover {
  position: relative;
  animation: moveCardShape 6s ease-in-out infinite;
}
/* accordian css start */
section.offer-sec ul {
  display: flex;
  min-height: 440px;
  max-height: 440px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}
section.offer-sec ul li {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  width: 15%;
  border-radius: 30px;
  margin: 10px;
  background: #9957a4;
  cursor: pointer;
  transition: all 0.5s ease;
}
section.offer-sec ul li:hover {
  background: darken(#e74c3c, 3);
}
section.offer-sec ul li.active {
  flex: 5;
  background: #9957a4;
  padding: 20px 30px;
  cursor: default;
  color: #fff;
  display: flex;
  flex-direction: column;
}
section.offer-sec ul li.active h5 {
  color: #fff;
  transform: rotate(0deg);
  font-family: "urbanist";
  font-weight: 600;
  font-size: 30px;
  text-transform: capitalize;
}
section.offer-sec ul li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #fff;
}
section.offer-sec ul li.active .section-content p {
  color: #fff;
  font-family: "urbanist";
  font-weight: 300;
  font-size: 17px;
  text-transform: none;
}
section.offer-sec ul li.active .section-title h5 span {
  transform: rotate(0deg);
  display: block;
  font-family: "urbanist";
  font-weight: bold;
  font-size: 60px;
  position: relative;
  left: 0;
  margin-bottom: 20px;
}

section.offer-sec ul li.active .section-content p {
  display: block;
}
section.offer-sec ul li.active .section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.section-content p {
  color: #fff;
  font-family: "urbanist";
  font-weight: 300;
  font-size: 17px;
  text-transform: none;
  display: none;
}
section.offer-sec ul li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
  color: #fff;
}
.section-title h5 span {
  transform: rotate(90deg);
  display: block;
  position: absolute;
  right: -65px;
  font-family: "urbanist";
  font-weight: bold;
  font-size: 26px;
}
.section-title h5 {
  margin: 0;
  transform: rotate(90deg);
  white-space: nowrap;
  font-family: "urbanist";
  font-weight: 500;
  font-size: 22px;
  text-transform: none;
}
.section-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  color: white;
  position: relative;
}
.section-title h5 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
/* accordian  css end*/

/* offer-sec start */
section.offer-sec {
  padding-top: 20px;
  padding-bottom: 80px;
}
section.offer-sec p {
  font-size: 14px;
  color: #1d1d1d;
  font-family: "urbanist";
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
}
section.offer-sec h6 {
  font-size: 60px;
  color: #0e1933;
  font-family: "urbanist";
  font-weight: 600;
}
section.offer-sec span.legal-team {
  font-family: "DM Serif Display";
  font-style: italic;
  color: #9957a4;
  font-weight: 400;
  font-size: 60px;
}
.offer-image {
  align-items: self-end;
}
.offer-img {
  position: relative;
}
.offer-image img:hover {
  position: relative;
  animation: moveCardShape 6s ease-in-out infinite;
}
/* accordian css start */
section.offer-sec ul {
  display: flex;
  min-height: 440px;
  max-height: 440px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}
section.offer-sec ul li {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  width: 15%;
  border-radius: 30px;
  margin: 10px;
  background: #9957a4;
  cursor: pointer;
  transition: all 0.5s ease;
}
section.offer-sec ul li:hover {
  background: darken(#e74c3c, 3);
}
section.offer-sec ul li.active {
  flex: 5;
  background: #9957a4;
  padding: 20px 30px;
  cursor: default;
  color: #fff;
  display: flex;
  flex-direction: column;
}
section.offer-sec ul li.active h5 {
  color: #fff;
  transform: rotate(0deg);
  font-family: "urbanist";
  font-weight: 600;
  font-size: 30px;
  text-transform: capitalize;
}
section.offer-sec ul li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #fff;
}
section.offer-sec ul li.active .section-content p {
  color: #fff;
  font-family: "urbanist";
  font-weight: 300;
  font-size: 17px;
  text-transform: none;
}
section.offer-sec ul li.active .section-title h5 span {
  transform: rotate(0deg);
  display: block;
  font-family: "urbanist";
  font-weight: bold;
  font-size: 60px;
  position: relative;
  left: 0;
  margin-bottom: 20px;
}

section.offer-sec ul li.active .section-content p {
  display: block;
}
section.offer-sec ul li.active .section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.section-content p {
  color: #fff;
  font-family: "urbanist";
  font-weight: 300;
  font-size: 17px;
  text-transform: none;
  display: none;
}
section.offer-sec ul li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
  color: #fff;
}
.section-title h5 span {
  transform: rotate(90deg);
  display: block;
  position: absolute;
  right: -65px;
  font-family: "urbanist";
  font-weight: bold;
  font-size: 26px;
}
.section-title h5 {
  margin: 0;
  transform: rotate(90deg);
  white-space: nowrap;
  font-family: "urbanist";
  font-weight: 500;
  font-size: 22px;
  text-transform: none;
}
.section-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  color: white;
  position: relative;
}
.section-title h5 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
/* accordian  css end*/

/* offer-sec end */

/* footer css start*/
footer {
    background-image: url("https://legalaidbilling.co.uk/assets/Image/footerwithoutline.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
  }
  .footer_logo {
    width: 200px;
  }
  .mid-footer {
    margin-top: 50px;
  }
  .ftr-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ftr-1 h6 {
    font-size: 60px;
    font-family: "Urbanist";
    color: #202124;
    font-weight: bold;
  }
  .ftr-1 span.start {
    font-size: 60px;
    font-family: "DM Serif Display";
    font-style: italic;
    color: #202124;
    font-weight: 400;
  }
  .ftr-1 a {
    background-color: #9957a4;
    padding: 15px 30px;
    border-radius: 100px;
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .ftr-1 a:hover {
    background-color: #01103d;
  }
  h6.ftr-2 {
    font-size: 22px;
    font-weight: 600;
    font-family: "Urbanist";
    color: #202124;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .icon-list {
    margin-bottom: 10px;
  }
  .icon-list a {
    color: #4f5055;
    text-decoration: none;
    margin-left: 10px;
    font-size: 20px;
    font-family: "DM Serif Display";
  }
  i.fa-duotone.fa-solid.fa-phone-volume,
  i.fa-solid.fa-message {
    color: #4f5055;
  }
  .menu-list li {
    list-style: none;
    margin-bottom: 10px;
  }
  .menu-list li a {
    font-size: 16px;
    font-weight: 500;
    font-family: "Urbanist";
    color: #595b62;
    text-decoration: none;
  }
  .newsletter {
    position: relative;
  }
  input#emails {
    width: 100%;
    padding: 15px;
    border-radius: 100px;
    border: none;
    background-image: url(https://legalaidbilling.co.uk/assets/Image/news.png);
    background-position: 6%;
    background-repeat: no-repeat;
    text-indent: 40px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  input::placeholder {
    font-size: 16px;
    color: #82868c;
    font-weight: 400;
    font-family: "Urbanist";
  }
  i.fa-solid.fa-chevron-right {
    background-color: #9957a4;
    padding: 10px 13px;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 9px;
    right: 10px;
    cursor: pointer;
  }
  .newsletter h5 {
    font-size: 18px;
    margin-top: 30px;
    font-weight: 600;
    font-family: "Urbanist";
    color: #202124;
    margin-bottom: 20px;
  }
  .social-icons i.fa-brands.fa-facebook {
    background-color: #fff;
    color: #9957a4;
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
    margin-right: 20px;
  }
  .social-icons i.fa-brands.fa-x-twitter {
    background-color: #fff;
    color: #9957a4;
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
    margin-right: 20px;
  }
  .social-icons i.fa-brands.fa-instagram {
    background-color: #fff;
    color: #9957a4;
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
  }
  .bottom-line {
    margin-top: 80px;
    text-align: center;
    border-top: 1px solid #e0e2e8;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .bottom-line p {
    font-size: 22px;
    font-weight: 500;
    font-family: "Urbanist";
    color: #9c9c9c;
    margin: 0px;
  }
  
  /* footer css end*/

@media screen and (max-width: 1199px) {
    /*nav .wrapper {
        max-width: 100%;
        padding: 0px 10px;
    }*/
    .nav-links li a{
        font-size: 16px;
        padding: 10px;
    }
}
@media screen and (max-width: 1074px) {
    .nav-links li a{
        font-size:14px;
        padding:0px 5px;
    }
}
@media screen and (max-width: 970px) {
    .theme-btn {
        padding: 4px 8px !important;
        border-radius: 10px !important;
        
    }
    .ftco-section {
        padding-bottom: 0px !important;
        padding-top: 20px !important;
    }
    .contact-section {
        padding-bottom: 0px !important;
        padding-top: 20px !important;
    }
    .innersection {
        padding-bottom: 0px !important;
        padding-top: 20px !important;
    }
    #newpages-innersection--0 table td,
    #newpages-innersection--3 table td{
        display: block;
        max-width: 100%;
        width: 100%;
    }
    .innersection table colgroup col {
        display: block;
    }
    #custom-column {
        padding: 5px;
    }
    .wrapper .btn {
        display: block;
        color: #141619;
    }

    .m-logo {
        position: absolute;
        left: 20px;
        top: 10px;
    }

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

    .wrapper .nav-links {
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 350px;
        top: 0;
        left: -100%;
        background: #ffffff;
        display: block;
        padding: 50px 10px;
        line-height: 50px;
        overflow-y: auto;
        box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
        transition: all 0.3s ease;
    }

    /* custom scroll bar */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #242526;
    }

    ::-webkit-scrollbar-thumb {
        background: #3A3B3C;
    }

    #menu-btn:checked~.nav-links {
        left: 0%;
    }

    #menu-btn:checked~.btn.menu-btn {
        display: none;
    }

    #close-btn:checked~.btn.menu-btn {
        display: block;
    }

    .nav-links li {
        margin: 15px 10px;
    }

    .nav-links li a {
        padding: 0;
        display: block;
        font-size: 20px;
        color: #fff;
    }

    .row .mega-links li a {
        color: #fff;
        font-size: 16px;
    }

    /*#showMega:checked~.mega-box {
        max-height: 100%;
    }*/

    .showMega:checked ~ .mega-box {
        max-height: 100%;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #fff;
    }

    .nav-links .desktop-item {
        display: none;
    }

    .nav-links .mobile-item {
        display: block;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        padding-left: 0px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .nav-links .mobile-item:hover {
        background: transparent;
    }

    .mega-box {
        position: static;
        top: 65px;
        opacity: 1;
        visibility: visible;
        padding: 0 20px;
        max-height: 0px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .mega-box .content {
        box-shadow: none;
        flex-direction: column;
        padding: 20px 0px 0px;
        background: transparent;
        gap: 0;
    }

    .wrapper #menu-btn:checked~.nav-links .btn-primary {
        display: block;
        color: #fff;
    }

    .mega-box .content .row {
        width: 100%;
        margin-bottom: 15px;
        border-top: 1px solid #f8f9fa;
        padding-top: 15px;
    }

    .mega-box .content .row:nth-child(1),
    .mega-box .content .row:nth-child(2) {
        border-top: 0px;
    }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 0px;
    }

    .row .mega-links li {
        margin: 0;
        padding-left: 0;
    }

    .content .row header {
        font-size: 18px;
        color: #fff;
    }

    .wrapper .btn.close-btn {
        color: #fff;
    }
}
nav input {
    display: none;
}

.body-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    padding: 0 30px;
}

.body-text div {
    font-size: 45px;
    font-weight: 600;
}

.package-table th:not(:last-child),
.package-table td:not(:last-child) {
    border-right: 3px solid #d721266e;
}
.package-table td{
    border-top: 2px solid #7dc45738;
}

.row > [class*='col-'] {
  padding-right: 12px;
  padding-left: 12px;
}


/* Table responsive */
.package-table {
    width: 100%;
    border-collapse: collapse;
}

/* Make table horizontally scrollable on small screens */
@media (max-width: 768px) {
    .package-table {
        display: block;
        overflow-x: hidden;
        white-space: nowrap;
        overflow-y: hidden;
    }

    /* Adjust table cells for better readability */
    .package-table th,
    .package-table td {
        padding: 8px;
        font-size: 14px;
        width: 100%;
    }
}

/* Optional: make text wrap nicely on very small screens */
@media (max-width: 480px) {
    .package-table th,
    .package-table td {
        /* font-size: 12px; */
        padding: 6px;
    }
}

.imageboxs {
    transition: all 0.5s ease; /* smooth hover effect */
}
.imageboxs:hover {
    -webkit-box-shadow: 4px 4px 15px -4px #000;
    box-shadow: 4px 4px 15px -4px #000;
    border-radius: 15px;
    -ms-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    color: #000;
}

.mega-box {
    display: none;
}

.gallery-container img {
    height: 100% !important;
}

/* Loader background */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Circle spinner */
.loader {
    width: 60px;
    height: 60px;
    border: 6px solid #ddd;
    border-top: 6px solid #9957a4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.nav-link:nth-child(1) {
    animation-delay: 0.2s;
  }
  .nav-link:nth-child(2) {
    animation-delay: 0.4s;
  }
  .nav-link:nth-child(3) {
    animation-delay: 0.6s;
  }
  .nav-link:nth-child(4) {
    animation-delay: 0.8s;
  }
  @keyframes navFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-section h1 {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-in-out forwards;
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-section p {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.5s ease-in-out forwards;
  }
  .hero-section h1 .simpler {
    animation: colorChange 2s infinite alternate;
  }
  @keyframes colorChange {
    from {
      color: #9957a4;
    }
    to {
      color: #807dfb;
    }
  }
  .hero-section a:hover {
    box-shadow: 0 0 15px rgba(153, 87, 164, 0.7);
  }
  .hero-section a {
    transition: box-shadow 0.3s ease, color 0.3s ease;
  }
  .shape-1 {
    position: absolute;
    z-index: 10;
    animation: floatShape2 4s ease-in-out infinite;
    top: 20px;
    left: 5%;
  }
  .shape-2 {
    position: absolute;
    z-index: 10;
    animation: floatShape 4s ease-in-out infinite;
    bottom: 20px;
    right: 5%;
  }
  @keyframes floatShape {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatShape2 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes continuousMove {
    0% {
      transform: scale(1) translateY(-7px);
    }
    50% {
      transform: scale(1.03) translateY(-10px); /* Slight zoom and move */
    }
    100% {
      transform: scale(1) translateY(-7px); /* Return to original size */
    }
  }
  @keyframes moveCardShape {
    0% {
      transform: translateY(0); /* Start position */
    }
    50% {
      transform: translateY(-20px); /* Move up */
    }
    100% {
      transform: translateY(0); /* Return to start position */
    }
  }
  /* animation css end */
  
  /* modal css start */
  .fade-scale {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
  }
  
  .fade-scale.show {
    opacity: 1;
    transform: scale(1);
  }
  .modal-dialog.modal-dialog-centered {
    max-width: 700px;
  }
  .modal-header {
    border-bottom: none;
  }
  .modal-body {
    text-align: center;
  }
  .demomodal h5 {
    font-size: 44px;
    font-family: "Urbanist";
    font-weight: 600;
    color: #01103d;
    margin-top: 0;
    line-height: 1.2em;
  }
  
  .demomodal p {
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 400;
    color: #595b62;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  .demomodal input::placeholder {
    text-align: left;
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 400;
    color: #595b62;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: capitalize;
  }
  
  .demomodal input {
    border-radius: 100px;
    height: 44px;
    padding: 12px 20px;
    text-align: left;
  }
  
  .demomodal input:hover,
  .demomodal input:focus {
    box-shadow: none;
    border-color: #9957a4;
  }
  
  .demomodal textarea {
    border-radius: 30px;
    height: 150px;
    padding: 12px 20px;
    text-align: left;
  }
  .demomodal textarea:hover,
  .demomodal textarea:focus {
    box-shadow: none;
    border-color: #9957a4;
  }
  .demomodal .invalid-feedback {
    text-align: left;
    padding-left: 15px;
  }
  .demomodal .modal-body {
    padding-bottom: 50px;
  }
  .demomodal .submit-btn {
    background-color: #9957a4;
    padding: 8px 35px;
    border-radius: 100px;
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 500;
    color: #fff;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    border: none;
    outline: none;
  }
  
  .demomodal .submit-btn:hover {
    background-color: #01103d;
  }
  .demomodal .modal-content {
    border-radius: 20px;
    padding: 20px 10px;
  }
  /* modal css end */
  
  /* header css start */
  
  header {
    background-image: url("https://legalaidbilling.co.uk/assets/Image/coloroverly.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 12px;
    height: auto;
    margin-bottom: 50px;
  }
  .bg-light {
    background-color: #f8f9fa00 !important;
  }
  ul.navbar-nav.me-auto.mb-2.mb-lg-0 {
    margin: 0 auto;
  }
  a.nav-link {
    font-size: 16px !important;
    color: #202124 !important;
    font-family: "Urbanist";
    font-weight: 500;
    margin: 0px 18px;
    text-transform: capitalize;
  }
  /* div#navbarSupportedContent {
    text-align: end;
  } */
  .demo-btn {
    background-color: #9957a4;
    padding: 8px 35px;
    border-radius: 100px;
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 500;
    color: #fff;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    border: none;
    outline: none;
  }
  .demo-btn:hover {
    background-color: #01103d;
  }
  
  /* header css end*/
  
  /* hero section css end*/
  .hero-section {
    text-align: center;
    width: 77%;
    margin: 0 auto;
  }
  .hero-section h1 {
    font-size: 86px;
    font-family: "Urbanist";
    font-weight: 600;
    color: #01103d;
    margin-top: 50px;
    line-height: 6rem;
  }
  span.simpler {
    font-family: "DM Serif Display";
    font-style: italic;
    font-weight: bold;
  }
  .hero-section p {
    font-size: 20px;
    font-family: "Urbanist";
    font-weight: 400;
    color: #595b62;
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .hero-section a {
    font-size: 16px;
    background-color: transparent;
    text-decoration: none;
    font-family: "Urbanist";
    border: 1px solid #9957a4;
    color: #9957a4;
    border-radius: 100px;
    font-weight: 500;
    padding: 18px 80px;
  }
  /* hero section css end*/
  
  /* video section css start */
  
  section.video-sec {
    position: relative;
    height: 670px;
    text-align: center;
    margin-top: -20px;
    overflow: hidden;
  }
  section.video-sec::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://legalaidbilling.co.uk/assets/Image/Group1000001010.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
    width: 960px;
    height: 635px;
    animation: continuousMove 20s ease-in-out infinite;
    margin: 0 auto;
  }
  video#background-video {
    width: 80%;
    border-radius: 35px;
    margin-top: 50px;
  }
  section.video-sec .container {
    position: relative;
  }
  img.shape-1 {
    position: absolute;
    left: 11%;
    top: -2%;
  }
  img.shape-2 {
    position: absolute;
    right: 2%;
    top: 40%;
  }
  img.video {
    width: 75%;
    margin: 0 auto;
    margin-top: 60px;
  }
  /* video section css end */
  
  /* steps-sec section css start */
  section.steps-sec {
    padding-top: 50px;
    position: relative;
    padding: 50px 0;
    overflow: hidden;
  }
  section.steps-sec h2 {
    text-align: center;
    font-size: 50px;
    font-family: "Urbanist";
    color: #01103d;
    font-weight: bold;
    word-spacing: -2px;
    margin-bottom: 40px;
  }
  .cards {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 50px 30px 40px 30px;
    border-radius: 20px;
    height: 270px;
    margin: 0px 10px;
    background-color: #fff;
  }
  .cards:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
      rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: 0.5s;
  }
  .cards:hover i.fa-solid.fa-arrow-right {
    background-color: #9957a4;
    color: #fff;
    transition: 0.5s;
  }
  img.card-img {
    width: 40px;
  }
  .cards h5 {
    font-size: 24px;
    font-family: "Urbanist";
    color: #01103d;
    font-weight: bold;
    margin-top: 20px;
  }
  i.fa-solid.fa-arrow-right {
    background-color: #eee3f0;
    border-radius: 50%;
    color: #9957a4;
    padding: 10px 12px;
    margin-top: 40px;
  }
  img.card-shape {
    width: 100%;
    position: relative;
    z-index: 1;
    top: 0px;
    animation: moveCardShape 6s ease-in-out infinite;
  }
  /* steps-sec section css end */
  
  /* legal-team-sec start */
  section.legal-team-sec {
    padding-bottom: 50px;
  }
  section.legal-team-sec h3 {
    font-size: 65px;
    font-family: "Urbanist";
    color: #01103d;
    font-weight: 600;
    margin-bottom: 25px;
  }
  section.legal-team-sec a {
    text-decoration: none;
    background-color: #9957a4;
    color: #fff;
    border-radius: 10px;
    padding: 12px 25px;
    font-family: "Urbanist";
    font-size: 16px;
    font-weight: 500;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  section.legal-team-sec a:hover {
    background-color: #01103d;
  }
  .legal-team-image {
    text-align: center;
    margin-top: -20px;
  }
  .legal-team-image img {
    position: relative;
    animation: moveCardShape 6s ease-in-out infinite;
  }
  .accordion-item {
    background-color: #fff;
    border-bottom: 1px solid #ebecf0;
  }
  button.accordion-button.collapsed {
    color: #01103d;
    font-size: 20px;
    font-family: "urbanist";
    font-weight: 500;
    border-bottom: 1px solid #ebecf0;
  }
  .accordion-body {
    font-size: 16px;
    color: #5f6168;
    font-family: "urbanist";
    border-radius: 0px 0px 10px 10px;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-bottom: 13px;
  }
  .accordion-button:not(.collapsed) {
    color: #9957a4;
    background-color: #ffffff;
    font-size: 20px;
    font-family: "urbanist";
    font-weight: 500;
    box-shadow: 0px !important;
  }
  .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
  .accordion-button:focus {
    z-index: 3;
    border-color: #fff !important;
    outline: 0;
    box-shadow: 0 0 0 0rem rgb(255 255 255 / 25%);
  }
  .accordion-button {
    box-shadow: 0 0 0 0rem rgb(255 255 255 / 25%) !important;
  }
  .accordion-item {
    border: 0px solid !important;
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url(https://legalaidbilling.co.uk/assets/Image/icon-a.png);
    transform: rotate(-180deg);
  }
  .accordion-button::after {
    background-image: url(https://legalaidbilling.co.uk/assets/Image/icon-b.png);
  }
  /* legal-team-sec end */
  
  /* feature-sec start */
  section.feature-sec {
    padding-bottom: 50px;
  }
  .feature-back {
    background-image: url(https://legalaidbilling.co.uk/assets/Image/background.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    border-radius: 100px;
    padding-bottom: 50px;
  }
  .slick-slide {
    height: 470px !important;
  }
  .slick-slide.slick-active {
    height: 470px !important;
    display: flex !important;
    align-items: center !important;
  }
  .feature-head h5 {
    font-size: 60px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-family: "DM Serif Display";
    font-style: italic;
    font-weight: 400;
  }
  .feature-head p {
    font-size: 42px;
    color: #fff;
    text-align: center;
    font-family: "urbanist";
    font-weight: 600;
    margin-bottom: 40px;
  }
  .row.slides-sec {
    align-items: center;
  }
  .slider-section {
    border: 2px solid #d0d0d0;
    border-radius: 30px;
    background-color: #000;
    opacity: 0.6;
    padding: 30px;
    width: 85%;
    margin: 0 auto;
    margin-left: 100px;
  }
  .row.item-1 {
    align-items: center;
  }
  .slider-section h5 {
    font-size: 30px;
    font-weight: 600;
    font-family: "urbanist";
    text-align: left;
  }
  .slider-section p {
    font-size: 22px;
    font-weight: 500;
    font-family: "urbanist";
    text-align: left;
  }
  .slider-section {
    border: 2px solid #8d8585;
    border-radius: 30px;
    background-color: rgb(84 84 84 / 50%);
    padding: 30px;
    width: 85%;
    opacity: 0.9;
    margin: 0 auto;
    margin-left: 100px;
  }
  .arrows {
    display: flex;
    flex-direction: column;
    width: 30%;
  }
  button.btn-prev.slick-arrow {
    background-color: #fff;
    border-radius: 50%;
    padding: 13px 15px;
    border: none;
    color: #000;
    margin-bottom: 10px;
  }
  button.btn-next.slick-arrow {
    background-color: transparent;
    border-radius: 50%;
    padding: 13px 15px;
    border: none;
    color: #fff;
    border: 1px solid #000;
  }
  button.btn-next.slick-arrow:hover {
    background-color: #fff;
    color: #000;
  }
  /* feature-sec end */
  
  /* offer-sec start */
  section.offer-sec {
    padding-top: 20px;
    padding-bottom: 80px;
  }
  section.offer-sec p {
    font-size: 14px;
    color: #1d1d1d;
    font-family: "urbanist";
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0px;
  }
  section.offer-sec h6 {
    font-size: 60px;
    color: #0e1933;
    font-family: "urbanist";
    font-weight: 600;
  }
  section.offer-sec span.legal-team {
    font-family: "DM Serif Display";
    font-style: italic;
    color: #9957a4;
    font-weight: 400;
    font-size: 60px;
  }
  .offer-image {
    align-items: self-end;
  }
  .offer-img {
    position: relative;
  }
  .offer-image img:hover {
    position: relative;
    animation: moveCardShape 6s ease-in-out infinite;
  }
  /* accordian css start */
  section.offer-sec ul {
    display: flex;
    min-height: 440px;
    max-height: 440px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
  }
  section.offer-sec ul li {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px;
    width: 15%;
    border-radius: 30px;
    margin: 10px;
    background: #9957a4;
    cursor: pointer;
    transition: all 0.5s ease;
  }
  section.offer-sec ul li:hover {
    background: darken(#e74c3c, 3);
  }
  section.offer-sec ul li.active {
    flex: 5;
    background: #9957a4;
    padding: 20px 30px;
    cursor: default;
    color: #fff;
    display: flex;
    flex-direction: column;
  }
  section.offer-sec ul li.active h5 {
    color: #fff;
    transform: rotate(0deg);
    font-family: "urbanist";
    font-weight: 600;
    font-size: 30px;
    text-transform: capitalize;
  }
  section.offer-sec ul li.active .section-content {
    flex: 4;
    opacity: 1;
    transform: scaleX(1);
    color: #fff;
  }
  section.offer-sec ul li.active .section-content p {
    color: #fff;
    font-family: "urbanist";
    font-weight: 300;
    font-size: 17px;
    text-transform: none;
  }
  section.offer-sec ul li.active .section-title h5 span {
    transform: rotate(0deg);
    display: block;
    font-family: "urbanist";
    font-weight: bold;
    font-size: 60px;
    position: relative;
    left: 0;
    margin-bottom: 20px;
  }
  
  section.offer-sec ul li.active .section-content p {
    display: block;
  }
  section.offer-sec ul li.active .section-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .section-content p {
    color: #fff;
    font-family: "urbanist";
    font-weight: 300;
    font-size: 17px;
    text-transform: none;
    display: none;
  }
  section.offer-sec ul li .section-content {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all 0.25s 0.1s ease-out;
    color: #fff;
  }
  .section-title h5 span {
    transform: rotate(90deg);
    display: block;
    position: absolute;
    right: -65px;
    font-family: "urbanist";
    font-weight: bold;
    font-size: 26px;
  }
  .section-title h5 {
    margin: 0;
    transform: rotate(90deg);
    white-space: nowrap;
    font-family: "urbanist";
    font-weight: 500;
    font-size: 22px;
    text-transform: none;
  }
  .section-title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    position: relative;
  }
  .section-title h5 {
    margin: 0;
    transform: rotate(-90deg);
    white-space: nowrap;
  }
  /* accordian  css end*/


  
  
  /* offer-sec end */
  /* footer css start*/
  footer {
    background-image: url("https://legalaidbilling.co.uk/assets/Image/footerwithoutline.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
  }
  .footer_logo {
    width: 200px;
  }
  .mid-footer {
    margin-top: 50px;
  }
  .ftr-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ftr-1 h6 {
    font-size: 60px;
    font-family: "Urbanist";
    color: #202124;
    font-weight: bold;
  }
  .ftr-1 span.start {
    font-size: 60px;
    font-family: "DM Serif Display";
    font-style: italic;
    color: #202124;
    font-weight: 400;
  }
  .ftr-1 a {
    background-color: #9957a4;
    padding: 15px 30px;
    border-radius: 100px;
    font-size: 16px;
    font-family: "Urbanist";
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .ftr-1 a:hover {
    background-color: #01103d;
  }
  h6.ftr-2 {
    font-size: 22px;
    font-weight: 600;
    font-family: "Urbanist";
    color: #202124;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .icon-list {
    margin-bottom: 10px;
  }
  .icon-list a {
    color: #4f5055;
    text-decoration: none;
    margin-left: 10px;
    font-size: 20px;
    font-family: "DM Serif Display";
  }
  i.fa-duotone.fa-solid.fa-phone-volume,
  i.fa-solid.fa-message {
    color: #4f5055;
  }
  .menu-list li {
    list-style: none;
    margin-bottom: 10px;
  }
  .menu-list li a {
    font-size: 16px;
    font-weight: 500;
    font-family: "Urbanist";
    color: #595b62;
    text-decoration: none;
  }
  .newsletter {
    position: relative;
  }
  input#emails {
    width: 100%;
    padding: 15px;
    border-radius: 100px;
    border: none;
    background-image: url(https://legalaidbilling.co.uk/assets/Image/news.png);
    background-position: 6%;
    background-repeat: no-repeat;
    text-indent: 40px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  input::placeholder {
    font-size: 16px;
    color: #82868c;
    font-weight: 400;
    font-family: "Urbanist";
  }
  i.fa-solid.fa-chevron-right {
    background-color: #9957a4;
    padding: 10px 13px;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 9px;
    right: 10px;
    cursor: pointer;
  }
  .newsletter h5 {
    font-size: 18px;
    margin-top: 30px;
    font-weight: 600;
    font-family: "Urbanist";
    color: #202124;
    margin-bottom: 20px;
  }
  .bottom-line {
    margin-top: 80px;
    text-align: center;
    border-top: 1px solid #e0e2e8;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .bottom-line p {
    font-size: 22px;
    font-weight: 500;
    font-family: "Urbanist";
    color: #9c9c9c;
    margin: 0px;
  }
  
  /* footer css end*/
  /* media query start*/
  /* media query start 1200px*/
  @media screen and (max-width: 1200px) {
    .hero-section h1 {
      font-size: 70px;
      line-height: 5rem;
    }
    section.steps-sec h2 {
      font-size: 40px;
    }
    section.legal-team-sec h3 {
      font-size: 50px;
    }
    .feature-head p {
      font-size: 35px;
      margin-bottom: 30px;
    }
    .row.item-1 p {
      font-size: 20px;
    }
    section.offer-sec h6 {
      font-size: 50px;
    }
    section.offer-sec span.legal-team {
      font-size: 50px;
    }
    section.offer-sec ul li.active h5 {
      font-size: 24px;
    }
    section.offer-sec ul li.active .section-title h5 span {
      font-size: 40px;
      margin-bottom: 15px;
    }
    .ftr-1 h6 {
      font-size: 50px;
    }
    .ftr-1 span.start {
      font-size: 50px;
    }
    footer {
      padding-top: 60px;
    }
    .bottom-line {
      margin-top: 50px;
    }
    .bottom-line p {
      font-size: 18px;
    }
  }
  /* media query 1200px end*/
  
  /* media query start 991px*/
  @media screen and (max-width: 991px) {
    header {
      position: relative;
    }
    #navbarSupportedContent {
      position: absolute;
      width: 100%;
      top: 60px;
      left: 0px;
      right: 0px;
      border-radius: 10px;
      z-index: 99;
      text-align: left;
      background: rgb(255, 255, 255) !important;
      box-shadow: 5px 7px 15px 3px #00000078;
      padding: 25px 0px 30px 0px;
    }
    section.video-sec::before {
      width: 100%;
      height: auto;
      top: 17px;
    }
    button.demo-btn {
      margin-left: 10px;
    }
    .hero-section h1 {
      font-size: 60px;
      line-height: 5rem;
    }
    .hero-section a {
      padding: 15px 60px;
    }
    header {
      height: auto;
    }
    section.video-sec {
      height: auto;
    }
    video#background-video {
      margin-bottom: 50px;
    }
    .cards {
      padding: 30px 20px 30px 20px;
      height: 270px;
      margin: 0px 5px;
    }
    section.steps-sec {
      padding-bottom: 0px;
    }
    section.legal-team-sec h3 {
      font-size: 40px;
    }
    .accordion-body {
      font-size: 14px;
    }
    .feature-head h5 {
      font-size: 50px;
    }
    .feature-head p {
      font-size: 30px;
      margin-bottom: 20px;
    }
    .row.item-1 p {
      font-size: 17px;
    }
    .slider-section h5 {
      font-size: 24px;
    }
    .slider-section {
      padding: 20px;
      width: 85%;
      margin: 0 auto !important;
    }
    button.btn-prev.slick-arrow {
      padding: 10px 12px;
    }
    button.btn-next.slick-arrow {
      padding: 10px 12px;
    }
    .arrows {
      width: 40%;
    }
    .offer-img {
      text-align: center;
    }
    img.offer-image {
      width: 250px;
    }
    .feature-back {
      height: auto;
    }
    section.offer-sec h6 {
      font-size: 40px;
    }
    section.offer-sec span.legal-team {
      font-size: 40px;
    }
    section.offer-sec ul li {
      padding: 10px;
      width: 15%;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 14px;
    }
    section.offer-sec ul li.active {
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
    }
    .ftr-1 h6 {
      font-size: 40px;
    }
    .ftr-1 span.start {
      font-size: 40px;
    }
    .icon-list a {
      font-size: 18px;
    }
    footer {
      padding-top: 40px;
    }
    .bottom-line {
      margin-top: 40px;
    }
    .bottom-line p {
      font-size: 15px;
    }
    h6.ftr-2 {
      font-size: 20px;
    }
    .mid-footer {
      margin-top: 30px;
    }
  }
  /* media query 991px end*/
  
  /* media query min-width: 576px) and (max-width: 795px) start*/
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero-section h1 {
      font-size: 50px;
      line-height: 4rem;
    }
    .feature-head p {
      font-size: 26px;
    }
    .slider-section {
      padding: 10px;
      width: 95%;
    }
    .row.item-1 {
      display: flex;
      flex-direction: column-reverse;
    }
    .row.item-1 img {
      width: 40%;
    }
    .arrows {
      width: 15%;
      display: flex;
      flex-direction: row;
      margin: 0 auto;
      margin-top: 25px;
    }
    button.btn-prev.slick-arrow {
      padding: 10px 15px;
      margin-bottom: 0px;
      margin-right: 5px;
    }
    button.btn-next.slick-arrow {
      padding: 10px 15px;
      margin-left: 15px;
    }
    h6.ftr-2 {
      font-size: 18px;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 15px;
    }
    .ftr-1 {
      display: flex;
      flex-direction: column;
    }
  }
  /* media query min-width: 576px) and (max-width: 795px) start*/
  
  /* media query 575px start*/
  @media screen and (max-width: 575px) {
    .hero-section h1 {
      font-size: 40px;
      line-height: 3rem;
    }
    .hero-section p {
      font-size: 16px;
      margin-bottom: 35px;
    }
    header {
      height: auto;
    }
    section.video-sec {
      height: 350px;
    }
    section.steps-sec h2 {
      font-size: 30px;
    }
    .cards {
      height: 240px;
      margin: 10px 30px;
    }
    .legal-team-image {
      text-align: right;
    }
    .feature-head h5 {
      font-size: 30px;
    }
    .feature-head p {
      font-size: 15px;
    }
    .feature-head h5 {
      font-size: 24px;
      text-align: center;
    }
    .row.item-1 p {
      font-size: 15px;
      text-align: center;
    }
    .row.item-1 img {
      width: 50%;
      margin: 0 auto;
    }
    .feature-back {
      height: auto;
    }
    .row.item-1 {
      display: flex;
      flex-direction: column-reverse;
    }
    .arrows {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
    button.btn-prev.slick-arrow {
      margin-bottom: 0px;
    }
    .arrows {
      margin-top: 20px;
    }
    button.btn-prev.slick-arrow {
      margin-right: 20px;
    }
    .offer-img {
      text-align: center;
    }
    img.offer-image {
      width: 230px;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 13px;
    }
    section.offer-sec ul li.active h5 {
      font-size: 20px;
    }
    input#emails {
      width: 80%;
    }
    i.fa-solid.fa-chevron-right {
      right: 22%;
    }
    i.fa-solid.fa-arrow-right {
      margin-top: 20px;
    }
    .ftr-1 {
      display: flex;
      flex-direction: column;
    }
    .demomodal .modal-content {
      border-radius: 20px;
      padding: 10px 10px;
      margin: 15px;
    }
    .demomodal h5 {
      font-size: 30px;
    }
    .demomodal p {
      font-size: 15px;
    }
  }
  /* media query 575px end*/
  
  /* media query 450px start*/
  @media screen and (max-width: 450px) {
    .hero-section h1 {
      font-size: 30px;
      line-height: 2.2rem;
    }
    .hero-section p {
      font-size: 13px;
      margin-bottom: 35px;
    }
    header {
      height: auto;
    }
    section.video-sec {
      height: 294px;
      margin-top: 0;
    }
    section.steps-sec h2 {
      margin-bottom: 15px;
    }
    section.legal-team-sec h3 {
      font-size: 30px;
    }
    .legal-team-image {
      text-align: center;
    }
    .feature-head p {
      font-size: 15px;
    }
    .feature-head h5 {
      font-size: 20px;
    }
    section.offer-sec h6 {
      font-size: 30px;
    }
    section.offer-sec span.legal-team {
      font-size: 30px;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 12px;
    }
    section.offer-sec ul li.active h5 {
      font-size: 17px;
    }
    section.offer-sec ul li.active .section-title h5 span {
      font-size: 24px;
      margin-bottom: 15px;
    }
    .section-title h5 {
      font-size: 18px;
    }
    .section-title h5 span {
      font-size: 18px;
    }
    .ftr-1 h6 {
      font-size: 26px;
    }
    .ftr-1 span.start {
      font-size: 26px;
    }
    .ftr-1 a {
      padding: 13px 24px;
      font-size: 15px;
    }
    input#emails {
      width: 100%;
    }
    i.fa-solid.fa-chevron-right {
      right: 2%;
    }
    i.fa-solid.fa-arrow-right {
      margin-top: 20px;
    }
    section.offer-sec {
      padding-bottom: 30px;
    }
    .demomodal p {
      font-size: 11px;
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .modal-header {
      padding: 0.5rem 0.5rem;
    }
    .demomodal .modal-content {
      padding: 6px 6px;
      margin: 10px;
    }
  }
  /* media query 450px end*/
  
  /* media query 320px start*/
  @media screen and (max-width: 320px) {
    .hero-section h1 {
      font-size: 22px;
      line-height: 1.8rem;
    }
    section.video-sec {
      height: 250px;
      margin-top: 0;
    }
    img.shape-1 {
      width: 50px;
    }
    img.shape-2 {
      width: 40px;
    }
    section.steps-sec {
      padding-top: 20px;
    }
    section.steps-sec h2 {
      font-size: 24px;
    }
    .cards h5 {
      font-size: 18px;
    }
    section.legal-team-sec h3 {
      font-size: 24px;
    }
    .legal-team-image img {
      width: 160px;
    }
    .legal-team-image {
      text-align: right;
    }
    .feature-head p {
      line-height: 1rem;
    }
    .feature-head h5 {
      font-size: 18px;
    }
    .row.item-1 p {
      font-size: 14px;
      line-height: 1.5rem;
    }
    section.offer-sec h6 {
      font-size: 24px;
    }
    section.offer-sec span.legal-team {
      font-size: 24px;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 11px;
    }
    section.offer-sec ul li.active h5 {
      font-size: 13px;
    }
    section.offer-sec ul li.active .section-title h5 span {
      font-size: 16px;
      margin-bottom: 6px;
    }
    section.offer-sec ul li.active {
      padding: 12px 10px;
    }
    section.offer-sec ul li.active .section-content p {
      font-size: 11px;
      line-height: 0.9rem;
    }
    .ftr-1 {
      display: flex;
      flex-direction: column;
    }
    .bottom-line p {
      font-size: 13px;
    }
    .demomodal h5 {
      font-size: 24px;
    }
    .demomodal .modal-content {
      padding: 6px 6px;
      margin: 10px;
    }
  }
  /* media query 320px end*/

  /*modal css*/

  /* Responsive CSS for the modal from 1024px to 320px */
/* Note: This builds on your existing modal CSS. You can keep the desktop styles (e.g., .fade-scale, .modal-dialog.modal-dialog-centered, etc.) and add these media queries below them. 
   If there are conflicts (e.g., in the existing media queries like @media (max-width: 575px)), you can remove or override those specific modal rules. 
   The existing modal styles are mostly fine, but the responsive adjustments were limited, so these additions will enhance mobile usability without major removals. */

@media (max-width: 1024px) {
  .demomodal .modal-dialog {
    max-width: 600px; /* Slightly smaller for tablets */
  }
  .demomodal h5 {
    font-size: 36px; /* Reduce heading size */
  }
  .demomodal p {
    font-size: 14px; /* Smaller description */
    margin-bottom: 25px;
  }
  .demomodal input,
  .demomodal textarea {
    height: 40px; /* Adjust input height */
    padding: 10px 18px;
  }
  .demomodal textarea {
    height: 120px; /* Smaller textarea */
  }
  .demomodal .submit-btn {
    padding: 6px 30px;
    font-size: 14px;
  }
  .demomodal .modal-content {
    padding: 15px 8px; /* Reduce padding */
  }
}

@media (max-width: 768px) {
  .demomodal .modal-dialog {
    max-width: 500px; /* Further reduce width for small tablets */
  }
  .demomodal h5 {
    font-size: 32px;
  }
  .demomodal p {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .demomodal input,
  .demomodal textarea {
    height: 38px;
    padding: 8px 16px;
    font-size: 14px; /* Smaller font for inputs */
  }
  .demomodal textarea {
    height: 100px;
  }
  .demomodal .submit-btn {
    padding: 5px 25px !important;
    font-size: 13px !important;
  }
  .demomodal .modal-content {
    padding: 12px 6px;
    border-radius: 15px; /* Slightly smaller radius */
  }
  .demomodal .modal-body {
    padding-bottom: 40px; /* Reduce bottom padding */
  }
}

@media (max-width: 576px) {
  .demomodal .modal-dialog {
    max-width: 90vw; /* Use viewport width for better fit on mobile */
    margin: 10px auto; /* Center with margin */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .demomodal h5 {
    font-size: 28px;
  }
  .demomodal p br{display:none;}
  .demomodal p {
    font-size: 12px;
    margin-bottom: 15px;
  }
  .demomodal .row.g-3 {
    --bs-gutter-x: 0.5rem; /* Reduce gap between columns */
    --bs-gutter-y: 0.5rem;
  }
  .demomodal input,
  .demomodal textarea {
    height: 36px;
    padding: 6px 14px;
    font-size: 13px;
  }
  .demomodal textarea {
    height: 80px;
  }
  .demomodal .submit-btn {
    padding: 4px 20px !important;
    font-size: 12px !important;
    width: 100%; /* Full-width button on small screens */
  }
  .demomodal .modal-content {
    padding: 10px 5px;
    border-radius: 12px;
    margin: 0;
  }
  .demomodal .modal-body {
    padding-bottom: 30px;
  }
  .demomodal .modal-header {
    padding: 0.25rem 0.5rem; /* Smaller header padding */
  }
}

@media (max-width: 450px) {
  .demomodal .modal-dialog {
    max-width: 95vw; /* Even more responsive */
    margin: 5px auto;
  }
  .demomodal h5 {
    font-size: 24px;
  }
  .demomodal p br{display:none;}
  .demomodal p {
    font-size: 11px;
    margin-top: 8px;
    margin-bottom: 15px;
  }
  .demomodal input::placeholder,
  .demomodal textarea::placeholder {
    font-size: 12px; /* Smaller placeholder */
  }
  .demomodal input,
  .demomodal textarea {
    height: 34px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 80px; /* Keep rounded but adjust if needed */
  }
  .demomodal textarea {
    height: 70px;
    border-radius: 20px; /* Less rounded for textarea */
  }
  .demomodal .submit-btn {
    padding: 3px 18px;
    font-size: 11px;
  }
  .demomodal .modal-content {
    padding: 8px 4px;
    border-radius: 10px;
    margin: 8px;
  }
  .demomodal .modal-body {
    padding-bottom: 25px;
  }
  .demomodal .invalid-feedback {
    font-size: 11px; /* Smaller error text */
    padding-left: 12px;
  }
}

@media (max-width: 320px) {
  .demomodal .modal-dialog {
    max-width: 98vw; /* Almost full width */
    margin: 2px auto;
  }
  .demomodal h5 {
    font-size: 20px;
  }
  .demomodal p {
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    line-height: 1.3; /* Tighter line height */
  }
  .demomodal p br{display:none;}
  .demomodal .row.g-3 {
    --bs-gutter-x: 0.25rem;
    --bs-gutter-y: 0.25rem;
  }
  .demomodal input,
  .demomodal textarea {
    height: 32px;
    padding: 4px 10px;
    font-size: 11px;
  }
  .demomodal textarea {
    height: 60px;
  }
  .demomodal .submit-btn {
    padding: 2px 15px;
    font-size: 10px;
  }
  .demomodal .modal-content {
    padding: 6px 3px;
    border-radius: 8px;
    margin: 5px;
  }
  .demomodal .modal-body {
    padding-bottom: 20px;
  }
  .demomodal .modal-header {
    padding: 0.125rem 0.25rem;
  }
  .demomodal .invalid-feedback {
    font-size: 10px;
    padding-left: 10px;
  }
}