@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');

body {
    font-family: 'Work Sans', sans-serif;
    color: #1a1a1a;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

#spacing {
    margin-top: 8%;
}

/* navbar */
#topbar {
    background-color: #ff8c00;
}

.topbar-contact {
    gap: 1rem;
    font-weight: 600;
    height: 30px;
}

.topbar-contact a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: left;
    gap: 0.5rem;
    transition: color 0.3s;
    margin-top: -2px;
}

.topbar-contact a i {
    background-color: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: -6px;
}

.topbar-contact a:hover {
    color: #000;
}

.navbar {
    position: sticky;
    z-index: 10;
    top: 0;
}

.navbar-brand img {
    max-height: 80px;
}

#navbarNav #navlink {
    position: relative;
    color: #000;
    font-weight: 600;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    transition: color 0.3s;
}

#navbarNav #navlink::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 0;
    height: 3px;
    background-color: #f36817;
    transition: width 0.3s ease;
}

#navbarNav #navlink:hover::after,
#navbarNav #navlink.active::after {
    width: 70%;
    /* background-color: #f36817; */
}

.navbar-nav .nav-item {
    position: relative;
}

.nav-link {
    color: #000 !important;
    font-weight: 600;
}

.services-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    width: 600px;
    padding: 20px;
}

.dropdown-column {
    display: flex;
    gap: 30px;
}

.services-list {
    width: 250px;
    border-right: 1px solid #eee;
}

.services-list .service-item {
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.services-list .service-item:hover,
.services-list .service-item.active {
    background-color: #f1f1f1;
    color: #f36817;
    font-weight: 500;
}

.subservices-list>div {
    display: none;
}

.subservices-list a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #333;
}

.subservices-list a:hover {
    text-decoration: none;
    color: #f36817;
}

#service-head h3,
#service-head .card-title {
    color: #f36817;
}

#service-head .card {
    transition: background-color 0.3s ease, color 0.3s ease;
}

#service-head .card:hover {
    background-color: #f36817;
    color: #fff;
}

#service-head .card:hover .card-title,
#service-head .card:hover .card-text {
    color: #fff;
}



#service-head h3 {
    font-weight: bold;
}

#service-form input {

    border: 2px solid gray;
}

#service-form .btn {
    color: #fff;
    background-color: #f36817;
}

.contact-info {
    gap: 1rem;
    font-weight: 600;
}

.contact-info a {
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: left;
    gap: 0.5rem;
    transition: color 0.3s;
    margin-top: -2px;
}

.contact-info a i {
    background-color: #eff0eb;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: -6px;
}

.contact-info a:hover {
    color: #f36817;
}

.contact-info .btn {
    color: #fff;
    width: fit-content;
    background-color: #f36817;
    border: none;
    margin-top: -1.5%;
    margin-bottom: 1%;
    border-radius: 3px;
}

.contact-info .btn:hover {
    color: #000;
}

/* footer */
footer {
    background-color: #000;
    color: rgb(210, 210, 210);
    padding: 50px 0 20px;
    margin-top: auto;
}

.footer-column {
    margin-bottom: 30px;
    /* margin-left: 30px; */
}

.footer-description {
    color: #bdc3c7;
    line-height: 1.5;
    margin-bottom: 20px;
}

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

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    background-color: #f36817;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(219, 166, 52, 0.3);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-top: 25px;
}

.footer-links a {
    color: #bdc3c7;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #f36817;
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(210, 210, 210);
    margin-top: 0px;
    padding-top: 20px;
    text-align: center;
    color: #bdc3c7;
}

/* banner */
.banner {
    background-image: url("../images/homebanner.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 575px;
}

.banner form {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}

.banner input,
.banner select {
    border: 2px solid gray;
}

.fillcircle {
    margin-left: 100%;
}

.banner h1 {
    font-size: 60px;
    font-weight: 500;
}

.banner .btn {
    color: #fff;
    background-color: #f36817;
    transition: 0.3s ease;
}

.banner .btn:hover {
    color: #000;
}

/* legal services */
#legalservice .service-box {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 80%;
    height: 90%;
}

#legalservice a {
    background-color: #000;
}

#legalservice a:hover {
    background-color: #f36817;
}

.service-box h5 {
    font-weight: bold;
}

.service-box:hover {
    background-color: #f36817;
    color: #fff;
}

.service1:hover img {
    content: url('../images/a1w.png');
}

.service2:hover img {
    content: url('../images/a2w.png');
}

.service3:hover img {
    content: url('../images/a3w.png');
}

.service4:hover img {
    content: url('../images/a4w.png');
}

.service-box img {
    width: 50px;
    height: 50px;
}

/* legal firm */
#legalfirm {
    position: relative;
    height: 680px;
    background-color: #f3f3f3;
}

.quick {
    background-color: #f36817;
    width: 170px;
    position: absolute;
    bottom: -50px;
    right: 13%;
}

.quick:hover,
.quickarrow {
    transform: scale(0.9);
}

.quickarrow {
    position: absolute;
    bottom: 15px;
    right: 23%;

}

/* legal action cards */
.step-card img {
    background-color: #f36817;
    border-radius: 50%;
    padding: 10px;
}

.step-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0 24px 24px;
    height: 100%;
    background-color: white;
    overflow: hidden;
    transition: all ease 0.3s;
    border: none;
}

.stepcount {
    background-color: #f36817;
    color: white;
    font-weight: normal;
    padding: 25px 0;
    margin: 0 -30px;
    font-size: 18px;
}

.step-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #f36817;
    transition: all ease 0.3s;
}

.step-card:hover {
    color: #f36817;
}

/* 
.card1:hover img {
    content: url('../images/b1o.png');
}

.card2:hover img {
    content: url('../images/b2o.png');
}

.card3:hover img {
    content: url('../images/b3o.png');
}

.card4:hover img {
    content: url('../images/b4o.png');
} */

/* legal specials */
/* .special {
    background-image: url('../images/Group\ 156.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 600px;
    position: relative;
} */

/* .special h1 {
    margin-top: -2%;
    margin-bottom: -1%;
} */

#features {
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
    transition: all ease 0.2s;
}

#features img {
    width: 50px;
}

.feature-box {
    padding: 20px 15px;
    margin-left: 20px;
    width: 30%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.divider {
    width: 40%;
    height: 4px;
    position: relative;
    margin: auto;
    background-color: #e0e0e0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background-color: #f36817;
}

.feature-box:hover h5 {
    color: #f36817;
}

.feature-box:hover .feature-box .small {
    color: #000;
}

/* .feature1:hover img {
    content: url('../images/c1o.png');
}

.feature2:hover img {
    content: url('../images/c2o.png');
}

.feature3:hover img {
    content: url('../images/c3o.png');
}

.feature4:hover img {
    content: url('../images/c4o.png');
}

.feature5:hover img {
    content: url('../images/c5o.png');
}

.feature6:hover img {
    content: url('../images/c6o.png');
} */

/* testimonial carousel */
/* #testimonial {
    margin-top: 500px;
} */

#testimonial #quote {
    background-image: url('../images/quote.png');
    background-size: contain;
    width: 60px;
    height: 60px;
}

#demo {
    background-color: #000;
    height: 350px;
}

#testcaption {
    position: initial;
    z-index: 10;
    padding: 5rem 8rem;
    text-align: center;
    font-size: 1.25rem;
    line-height: 2rem;
}

/* #testcaption img {
    width: 6rem;
    border-radius: 5rem;
    margin-top: 2rem;
} */

#image-caption {
    font-style: bold;
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.carousel-control-prev {
    justify-content: flex-start;
}

.carousel-control-next {
    justify-content: flex-end;
}

.carousel-control-prev,
.carousel-control-next {
    transition: none;
    opacity: unset;
}

/* pricing */
#pricing {
    background-color: #f36817;
}

.pricing .card ul li i,
.pricing-card-title {
    color: #f36817;
}

.pricing .card ul li i {
    margin-top: -0.4rem;
}

.pricing .card {
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.card .btn {
    border: 1px solid black;
}

.pricing .more-service {
    text-decoration: none;
    color: #FF5722;
    font-weight: 500;
    cursor: pointer;
    transition: text-decoration 0.3s;
}

.pricing .more-service:hover {
    text-decoration: underline;
}

/* .card.box-shadow:hover {
    box-shadow: 0 0 20px rgba(243, 104, 23, 0.3);
    border: 1px solid #f36817;
} */

.card:hover .btn {
    background-color: #f36817 !important;
    border: none;
    color: #fff;
}

#amount {
    text-align: center;
}

/* complaint registration */
#com-reg {
    background-image: url('../images/formbanner.png');
    background-size: cover;
    background-position: center;
    /* height: 600px; */
}

.com-reg form {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}

.com-reg input,
.com-reg select {
    border: 2px solid gray;
}

.com-reg .btn {
    background-color: #f36817;
    color: #fff;
}

/* accordion */
#accordion-button {
    background-color: transparent !important;
    font-size: large;
}

#accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
    color: #000 !important;
}

#accordionFlushExample {
    width: 90%;
}

#accordion-button.collapsed::after {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' stroke='black' stroke-width='1'/%3E%3Cpath d='M13 10 L18 16 L13 22' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#accordion-button:not(.collapsed)::after {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23f36817'/%3E%3Cpath d='M19 10 L14 16 L19 22' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


.accordion-item {
    border-bottom: 1px solid #000;
}

.ellipse {
    z-index: 0;
    /* Behind content */
}

.ellipse.left {
    top: 10%;
    left: 95%;
    /* Half of the ellipse width */
}

.ellipse.right {
    top: 10%;
    right: 95%;
}

/* contact information */
#contactinfo {
    background-color: #f36817;
    color: #fff;
}

.message {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.message input,
.message textarea {
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.get-started-btn {
    text-decoration: none;
    color: #fff;
    background-color: #f36817;
    border: none;
}

.get-started-btn:hover {
    color: #000;
    background-color: #f36817;
    border: none;
}

.btn-submit {
    color: #fff;
    background-color: #000;
}

.btn-submit:hover {
    background-color: #f36817;
    color: #fff;
}

/* services page */
#servicebanner {
    background-image: url('../images/servicebanner.jpg');
    background-size: cover;
    height: 500px;
}

#servicebanner h1 {
    font-size: 72px;
}

#costbanner {
    background-image: url('../images/costbanner.jpg');
    background-size: cover;
    height: 500px;
}

#costbanner h1 {
    font-size: 72px;
}

#serviceleft {
    border-right: 1px solid rgba(210, 210, 210);
}

/* Scrollable buttons */
.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    flex-grow: 1;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-button {
    min-width: 180px;
    flex-shrink: 0;
    font-size: 1.15rem;
    background-color: transparent;
    border: none;
    color: #000;
}

/* .scroll-button:hover, */
.scroll-button.active {
    border: 2px solid #f36817;
    color: #f36817;
}

.arrow-btn {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-block;
}

.button-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Hidden content divs */
.content-div {
    display: none;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.content-div.active {
    display: block;
}

/* Card grid inside content */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card-option {
    width: 23.5%;
    border-radius: 15px;
    padding: 20px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    min-height: 100px;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* flex: 1 1 calc(25% - 20px); */
}

.card-option:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    background-color: #f36817;
    color: white;
}

/* Main container */
.tabs-container {
    display: flex;
    background: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Left-side tab navigation */
.tab-nav>.tab-list {
    display: flex;
    flex-direction: column;
    width: 500px;
    border-right: 2px solid #ddd;
    padding: 20px;
}

.tab-nav>.tab-list .nav-link {
    margin-bottom: 10px;
    border: none;
    padding: 12px 15px;
    color: #444;
    background: #f9f9f9;
    text-align: left;
    position: relative;
    font-weight: normal;
    transition: background 0.3s ease;
}

.tab-nav>.tab-list .nav-link:hover {
    background: #f0f0f0;
}

.tab-nav>.tab-list .nav-link.active {
    background: #f36817;
    color: #fff !important;
    font-weight: bold;
}

/* Tab content styles */
.tab-content {
    flex-grow: 1;
    padding: 40px;
    border-left: 2px solid #ddd;
    background: #fff;
}

.tab-pane {
    width: 100%;
    margin-top: 60px;
}

/* Hide tab-pane-mobile on desktop */
.tab-pane-mobile {
    display: none;
}

/* privacy policy */
.privacy h2,
.privacy h4,
.privacy h6 {
    margin-bottom: 1rem;
    font-weight: bold;
}

.privacy p,.privacy li{
    margin-bottom: 1rem;
}

.privacy hr{
    /* border: 2px solid #000; */
    height: 2px;
    background-color: #000;
}



/* media query */
@media (max-width: 767px) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px;
    }

    section {
        width: 100%;
    }

    body {
        overflow-x: hidden;
    }

    [data-aos] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .topbar-contact {
        justify-content: center !important;
        gap: 0rem;
        text-align: center;
        height: 90px;
    }

    .navbar-brand img {
        max-height: 50px;
    }

    .navbar-nav .nav-link {
        margin: 0 -1.0rem;
    }

    #navbarNav #navlink::after {
        left: 0%;
    }

    #navbarNav #navlink:hover::after,
    #navbarNav #navlink.active::after {
        width: 70%;
    }

    #servicesNavItem {
        margin: 0 2rem;
    }

    .services-dropdown {
        position: static;
        width: 100%;
        box-shadow: none;
        padding: 10px 15px;
        display: none;
        flex-direction: column;
        border-radius: 0;
    }

    .dropdown-column {
        flex-direction: column;
        gap: 20px;
    }

    .services-list {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .services-list .service-item {
        padding: 10px 0;
    }

    .subservices-list {
        width: 100%;
    }

    .subservices-list>div {
        display: none;
    }

    .subservices-list a {
        padding: 5px 0 5px 15px;
    }

    .contact-info {
        margin-left: 20px;
        justify-content: flex-start;
        flex-direction: column;
    }

    .contact-info a {

        color: #000;
    }

    .banner {
        flex-direction: column;
        height: auto;
        background-size: cover;
        background-size: auto;
    }

    .herobanner h1 {
        font-size: 36px;
    }

    .herobanner p {
        display: none;
    }

    .banner-text {
        width: 50%;
    }

    .banner-text h1 {
        font-size: 30px;
    }

    #legalfirm {
        height: 100%;
    }

    #legalfirm img {
        margin-left: 15px;
    }

    #testcaption {
        position: initial;
        z-index: 10;
        padding: 3rem 2rem;
        text-align: center;
        font-size: 0.7rem;
        /* font-style: italic; */
        /* font-weight: bold; */
        line-height: 1rem;
    }

    /* #testcaption img {
        width: 4rem;
        border-radius: 4rem;
        margin-top: 1rem;
    } */

    #image-caption {
        font-style: bold;
        font-size: 1rem;
        line-height: normal;
        margin-top: 0.5rem;
    }

    .carousel-control-prev,
    .carousel-control-next {
        justify-content: center;
        margin-top: 80px;
    }

    footer {
        padding: 30px 0 15px;
    }

    .footer-column {
        margin-bottom: 25px;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 25px;
    }

    #legalservice {
        margin-top: -8%;
    }

    #legalcard {
        padding-left: 18%;
    }

    .divider {
        width: 40%;
        height: 4px;
        position: relative;
        margin: auto;
        background-color: #e0e0e0;
    }

    .divider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: #f36817;
    }

    .feature-box {
        margin-left: 10%;
        margin-top: 5%;
        width: 80%;
    }

    .feature-box p {
        line-height: 1.2rem;
    }

    /* #testimonial {
        margin-top: 100px;
    } */

    /* #com-reg .hero-text {
        margin-left: 50px;
    } */

    #com-reg h2 {
        font-size: medium;
    }

    #com-reg p {
        font-size: small;
    }

    /* #accordion {
        margin-top: 400px;
    } */
    .ellipse {
        display: none;
    }

    #servicebanner {
        background-size: cover;
        background-position: center;
        height: 350px;
    }

    #servicebanner h1 {
        font-size: 35px;
    }

    #serviceleft {
        border-right: 1px solid #fff;
    }

    .si img {
        margin-left: -15px;
    }

    #costbanner {
        height: 350px;
    }

    #costbanner h1 {
        font-size: 35px;
    }

    .image-section {
        padding-left: 10%;
    }

    .quick {
        width: 90px;
        position: absolute;
        bottom: 0%;
        left: 60%;
    }

    .quickarrow {
        width: 26px;
        position: absolute;
        bottom: 13%;
        left: 68.5%;

    }

    .special {
        height: 500px;
    }

    #features {
        top: 250px;
        left: 0;
    }

    #features h5 {
        font-size: 18px;
    }

    #contactinfo {
        margin-left: -2px;
    }

    #legalprocess {
        margin-top: -5px;
    }

    .card-option {
        flex: 1 1 100%;
    }

    .scroll-button {
        min-width: 140px;
    }

    .tabs-container {
        flex-direction: column;
        padding: 0;
    }

    .tab-nav>.tab-list {
        flex-direction: column;
        width: 100%;
        border-right: none;
        border-bottom: none;
        padding: 0;
    }

    .tab-nav>.tab-list .nav-link {
        width: 100%;
        border-bottom: 1px solid gray;
        border-top: 1px solid gray;
        margin-bottom: 0;
        text-align: center;
        padding: 15px;
    }

    /* Hide main right-side content on mobile */
    .tab-content {
        display: none;
    }

    /* Show tab content right below each tab on mobile */
    .tab-pane-mobile {
        display: none;
        padding: 15px;
        background: #fff;
        border-top: 1px solid #ddd;
    }

    .tab-pane-mobile.active {
        display: block;
    }
}