/*------------------------------------------------------------------
Table of content
-------------------
1. Start Header Area
2. slider area start
3. features area css start
4. hot deals area css start
5. product
6. categories area
7. testimonial
8. blog
9. shop grid view
10. shop list view
11. product details
12. checkout
13. cart
14. wishlist
15. my account
16. compare
17. login register
18. about us
19. contact us
20. banner
21. modal
22. sidebar
23. footer
-------------------------------------------------------------------*/
/*------ Typography Style Start ------*/
body {
    color: #444444;
    line-height: 1.7;
    font-size: 14px;
    font-weight: 400;
    background-color: #f1f1f1;
    font-family: 'Roboto', sans-serif;
}

a {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    text-decoration: none;
}

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

p {
    margin-bottom: 8px;
}

p:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333333;
    margin-bottom: 0;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

strong,
b {
    font-weight: 700;
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.btn,
button {
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: transparent;
}

.btn:active,
.btn:focus,
button:active,
button:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input,
textarea {
    resize: none;
}

input:focus,
textarea:focus {
    outline: none;
}

::-moz-selection {
    color: #fff;
    background: #dc4734;
}

::selection {
    color: #fff;
    background: #dc4734;
}

::-webkit-input-placeholder {
    color: #999;
    font-size: 13px;
    opacity: 1;
}

::-moz-placeholder {
    color: #999;
    font-size: 13px;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #999;
    font-size: 13px;
    opacity: 1;
}

::-ms-input-placeholder {
    color: #999;
    font-size: 13px;
    opacity: 1;
}

::placeholder {
    color: #999;
    font-size: 13px;
    opacity: 1;
}

/*Custom Scroll (Perfect Scroll)*/
.custom-scroll {
    position: relative;
    overflow: hidden;
}

.custom-scroll.ps .ps__rail-y,
.custom-scroll.ps .ps__rail-x {
    background-color: transparent;
}

.custom-scroll.ps .ps__rail-y [class*='ps__thumb'],
.custom-scroll.ps .ps__rail-x [class*='ps__thumb'] {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.custom-scroll.ps .ps__rail-y {
    width: 3px;
    right: 2px;
}

.custom-scroll.ps .ps__rail-y .ps__thumb-y {
    width: 100%;
    right: 0;
}

.custom-scroll.ps .ps__rail-x {
    height: 6px;
    bottom: 3px;
}

.custom-scroll.ps .ps__rail-x .ps__thumb-x {
    height: 100%;
}

.slick-arrow-style button.slick-arrow {
    top: 50%;
    left: 0;
    color: #333333;
    font-size: 30px;
    cursor: pointer;
    display: block;
    line-height: 1;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.slick-arrow-style button.slick-arrow.slick-next {
    left: auto;
    right: 0;
}

.slick-arrow-style button.slick-arrow:hover {
    color: #dc4734;
}

.slick-track {
    line-height: 1;
}

.slick-row-3 .slick-list {
    margin: 0 -3px;
}

.slick-row-3 .slick-list .slick-slide {
    margin: 0 3px;
}

.slick-row-4 .slick-list {
    margin: 0 -4px;
}

.slick-row-4 .slick-list .slick-slide {
    margin: 0 4px;
}

.slick-row-5 .slick-list {
    margin: 0 -5px;
}

.slick-row-5 .slick-list .slick-slide {
    margin: 0 5px;
}

.slick-row-6 .slick-list {
    margin: 0 -6px;
}

.slick-row-6 .slick-list .slick-slide {
    margin: 0 6px;
}

.slick-row-7 .slick-list {
    margin: 0 -7px;
}

.slick-row-7 .slick-list .slick-slide {
    margin: 0 7px;
}

.slick-row-8 .slick-list {
    margin: 0 -8px;
}

.slick-row-8 .slick-list .slick-slide {
    margin: 0 8px;
}

.slick-row-9 .slick-list {
    margin: 0 -9px;
}

.slick-row-9 .slick-list .slick-slide {
    margin: 0 9px;
}

.slick-row-10 .slick-list {
    margin: 0 -10px;
}

.slick-row-10 .slick-list .slick-slide {
    margin: 0 10px;
}

.slick-row-11 .slick-list {
    margin: 0 -11px;
}

.slick-row-11 .slick-list .slick-slide {
    margin: 0 11px;
}

.slick-row-12 .slick-list {
    margin: 0 -12px;
}

.slick-row-12 .slick-list .slick-slide {
    margin: 0 12px;
}

.slick-row-13 .slick-list {
    margin: 0 -13px;
}

.slick-row-13 .slick-list .slick-slide {
    margin: 0 13px;
}

.slick-row-14 .slick-list {
    margin: 0 -14px;
}

.slick-row-14 .slick-list .slick-slide {
    margin: 0 14px;
}

.slick-row-15 .slick-list {
    margin: 0 -15px;
}

.slick-row-15 .slick-list .slick-slide {
    margin: 0 15px;
}

.slick-row-16 .slick-list {
    margin: 0 -16px;
}

.slick-row-16 .slick-list .slick-slide {
    margin: 0 16px;
}

.slick-row-17 .slick-list {
    margin: 0 -17px;
}

.slick-row-17 .slick-list .slick-slide {
    margin: 0 17px;
}

.slick-row-18 .slick-list {
    margin: 0 -18px;
}

.slick-row-18 .slick-list .slick-slide {
    margin: 0 18px;
}

.slick-row-19 .slick-list {
    margin: 0 -19px;
}

.slick-row-19 .slick-list .slick-slide {
    margin: 0 19px;
}

.slick-row-20 .slick-list {
    margin: 0 -20px;
}

.slick-row-20 .slick-list .slick-slide {
    margin: 0 20px;
}

/* ----scroll to top css start ----*/
.scroll-top {
    bottom: 80px;
    cursor: pointer;
    height: 50px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 50px;
    z-index: 9999;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    border-radius: 50%;
    background-color: #1e2731;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width: 767.98px) {
    .scroll-top {
        display: none;
    }
}

.scroll-top i {
    line-height: 50px;
    color: #fff;
    font-size: 25px;
}

.scroll-top.not-visible {
    bottom: -50px;
    visibility: hidden;
    opacity: 0;
}

.scroll-top:hover {
    background-color: #333333;
}

/* ----scroll to top css end ----*/
.container {
    padding-right: calc(var(--bs-gutter-x) * 0.625);
    padding-left: calc(var(--bs-gutter-x) * 0.625);
}

.desktop-padding-top {
    padding-top: 0 !important;
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 100%;
    }

    .desktop-padding-top {
        padding-top: 20px;
    }

    .mobile-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 600px;
    }

    .mobile-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .container {
        max-width: 500px;
    }

    .mobile-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
}

@media only screen and (max-width: 575.98px) {
    .container {
        max-width: 450px;
    }

    .mobile-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
}

.container-fluid {
    padding-right: calc(var(--bs-gutter-x) * 0.625);
    padding-left: calc(var(--bs-gutter-x) * 0.625);
}

.row {
    --bs-gutter-x: 30px;
}

.row-0 {
    margin-left: 0px;
    margin-right: 0px;
}

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

.row-1 {
    margin-left: -0.5px;
    margin-right: -0.5px;
}

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

.row-2 {
    margin-left: -1px;
    margin-right: -1px;
}

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

.row-3 {
    margin-left: -1.5px;
    margin-right: -1.5px;
}

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

.row-4 {
    margin-left: -2px;
    margin-right: -2px;
}

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

.row-5 {
    margin-left: -2.5px;
    margin-right: -2.5px;
}

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

.row-6 {
    margin-left: -3px;
    margin-right: -3px;
}

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

.row-7 {
    margin-left: -3.5px;
    margin-right: -3.5px;
}

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

.row-8 {
    margin-left: -4px;
    margin-right: -4px;
}

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

.row-9 {
    margin-left: -4.5px;
    margin-right: -4.5px;
}

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

.row-10 {
    margin-left: -5px;
    margin-right: -5px;
}

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

.row-11 {
    margin-left: -5.5px;
    margin-right: -5.5px;
}

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

.row-12 {
    margin-left: -6px;
    margin-right: -6px;
}

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

.row-13 {
    margin-left: -6.5px;
    margin-right: -6.5px;
}

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

.row-14 {
    margin-left: -7px;
    margin-right: -7px;
}

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

.row-15 {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

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

.row-16 {
    margin-left: -8px;
    margin-right: -8px;
}

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

.row-17 {
    margin-left: -8.5px;
    margin-right: -8.5px;
}

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

.row-18 {
    margin-left: -9px;
    margin-right: -9px;
}

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

.row-19 {
    margin-left: -9.5px;
    margin-right: -9.5px;
}

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

.row-20 {
    margin-left: -10px;
    margin-right: -10px;
}

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

.row-21 {
    margin-left: -10.5px;
    margin-right: -10.5px;
}

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

.row-22 {
    margin-left: -11px;
    margin-right: -11px;
}

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

.row-23 {
    margin-left: -11.5px;
    margin-right: -11.5px;
}

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

.row-24 {
    margin-left: -12px;
    margin-right: -12px;
}

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

.row-25 {
    margin-left: -12.5px;
    margin-right: -12.5px;
}

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

.row-26 {
    margin-left: -13px;
    margin-right: -13px;
}

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

.row-27 {
    margin-left: -13.5px;
    margin-right: -13.5px;
}

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

.row-28 {
    margin-left: -14px;
    margin-right: -14px;
}

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

.row-29 {
    margin-left: -14.5px;
    margin-right: -14.5px;
}

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

.row-30 {
    margin-left: -15px;
    margin-right: -15px;
}

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

.lg-backdrop {
    background-color: rgba(51, 51, 51, 0.9);
}

.lg-outer .lg-thumb-outer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*------- short classes start -------*/
.bg-color {
    background-color: #f1f1f1;
}

.pt-20 {
    padding-top: 20px;
}

@media only screen and (max-width: 767.98px) {
    .pt-20 {
        padding-top: 10px;
    }
}

.pt-30 {
    padding-top: 30px;
}

@media only screen and (max-width: 767.98px) {
    .pt-30 {
        padding-top: 10px;
    }
}

.pt-80 {
    padding-top: 80px;
}

.mb-20 {
    margin-bottom: 20px;
}

@media only screen and (max-width: 767.98px) {
    .mb-20 {
        margin-bottom: 10px;
    }
}

.mb-25 {
    margin-bottom: 25px;
}

@media only screen and (max-width: 767.98px) {
    .mb-25 {
        margin-bottom: 12px;
    }
}

.mb-30 {
    margin-bottom: 30px;
}

@media only screen and (max-width: 767.98px) {
    .mb-30 {
        margin-bottom: 15px;
    }
}

.mt-20 {
    margin-top: 20px;
}

@media only screen and (max-width: 767.98px) {
    .mt-20 {
        margin-top: 10px;
    }
}

.mt--20 {
    margin-top: -20px;
}

.mt--30 {
    margin-top: -30px;
}

.plr-80 {
    padding: 0 80px !important;
}

/*------- short classes end -------*/
/*----------------------------------------
            header area start
----------------------------------------*/

.header-top {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #1e2731;
}

.header-top .header-logo {
    padding-top: 20px; /* Adjust the value for top padding */
    padding-bottom: 20px; /* Adjust the value for bottom padding */
    width: 210px; /* Set the desired width */
    height: auto;
}

@media only screen and (max-width: 767.98px) {
    .header-top-navigation {
        text-align: center;
        margin-top: 50px;
    }
}

.header-top-navigation ul li {
    display: inline-block;
    margin-right: 60px;
    position: relative;
    /* &:nth-child(3) {
                @media only screen and (max-width: 479.98px) {
                    padding-right: 0;
                    margin-right: 0;
                    &:before {
                        display: none;
                    }
                }
            } */
}

.header-top-navigation ul li:before {
    top: 50%;
    left: 100%;
    content: '/';
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}

@media only screen and (max-width: 767.98px) {
    .header-top-navigation ul li:before {
        display: block;
    }

    .nav-icons ul li:before {
        display: block;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .header-top-navigation ul li {
        margin-right: 45px;
    }

    .nav-icons ul li {
        margin-right: 45px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .header-top-navigation ul li {
        margin-right: 15px;
        padding-right: 15px;
    }

    .nav-icons ul li {
        margin-right: 15px;
        padding-right: 15px;
    }
}

.header-top-navigation ul li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.header-top-navigation ul li:last-child:before {
    display: none;
}

.header-top-navigation ul li a {
    color: #333333;
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 21px 0;
    text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .header-top-navigation ul li a {
        font-size: 14px;
        font-weight: 500;
        padding: 18px 0;
    }

    .nav-icons ul li a {
        font-size: 14px;
        font-weight: 500;
        padding: 18px 0;
    }
}

@media only screen and (max-width: 767.98px) {
    .header-top-navigation ul li a {
        font-size: 14px;
        font-weight: 500;
        padding: 10px 0;
    }

    .nav-icons ul li a {
        font-size: 14px;
        font-weight: 500;
        padding: 10px 0;
    }
}

.header-top-navigation ul li:hover a,
.header-top-navigation ul li.active a {
    color: #dc4734;
}

.header-top-navigation ul li .message-dropdown {
    top: 100%;
    left: 0;
    width: 500px;
    height: auto;
    padding: 15px;
    position: absolute;
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    z-index: 999;
    display: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.header-top-navigation ul li .message-dropdown li a {
    padding: 0;
}

.dropdown-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.dropdown-title .recent-msg {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #333333;
    text-transform: capitalize;
}

.dropdown-title .message-btn-group button {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #666666;
    margin-left: 20px;
}

.dropdown-title .message-btn-group button:hover {
    color: #dc4734;
    text-decoration: underline;
}

.dropdown-title .message-btn-group button:first-child {
    margin-left: 0;
}

.dropdown-title button:hover {
    color: #dc4734;
}

.msg-dropdown-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.msg-dropdown-footer button {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #666666;
}

.msg-dropdown-footer button:hover {
    color: #dc4734;
    text-decoration: underline;
}

.dropdown-msg-list li {
    margin-right: 0;
}

.dropdown-msg-list li.msg-list-item {
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dddddd;
}

.dropdown-msg-list li.msg-list-item .profile-thumb {
    width: 45px;
}

.dropdown-msg-list li.msg-list-item .msg-content {
    padding-left: 10px;
    width: calc(100% - 150px);
}

.dropdown-msg-list li.msg-list-item .msg-content p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    padding-top: 3px;
}

.dropdown-msg-list li.msg-list-item .msg-content.notification-content a {
    display: inline-block;
    color: #333333;
}

.dropdown-msg-list li.msg-list-item .msg-content.notification-content a:hover {
    color: #dc4734;
}

.dropdown-msg-list li.msg-list-item .msg-content.notification-content p {
    display: inline;
}

.dropdown-msg-list li.msg-list-item .msg-time {
    font-size: 12px;
    color: #666666;
    width: 100px;
    text-align: right;
}

.dropdown-msg-list li.msg-list-item .author a {
    color: #333333;
}

.dropdown-msg-list li.msg-list-item .author a:hover {
    color: #dc4734;
}

.header-top-search {
    margin-right: 25px;
}

.top-search-box {
    min-width: 250px;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.custom-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    border-radius: 50px;
    overflow: hidden;
    height: 30px;
    width: 100%;
}

/* Search icon styling */
.search-icon {
    position: absolute;
    left: 15px; /* Offset for the search icon */
    color: #6c757d;
    font-size: 18px;
    pointer-events: none; /* Prevent interaction with the icon */
}

/* Input styling */
.custom-search-input {
    flex: 1;
    border: none;
    background: transparent;
    height: 100%;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #212529;
    outline: none;
    padding: 0 15px 0 45px; /* Offset for text and placeholder */
    box-sizing: border-box;
}

/* Placeholder styling */
.custom-search-input::placeholder {
    color: #adb5bd;
    font-size: 14px;
}

.custom-search-box select.custom-search-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 45px;
}

.custom-search-box.select-mode::after {
    content: "\25BE";
    position: absolute;
    right: 18px;
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;
}

/* Search Box Media Queries */
@media (max-width: 768px) {
    .custom-search-box {
        height: 45px; /* Reduce height */
        width: 100%; /* Full width on smaller screens */
    }

    .custom-search-input {
        font-size: 12px; /* Smaller font size */
        padding: 0 10px 0 35px; /* Adjust padding for smaller screens */
    }

    .search-icon {
        font-size: 16px; /* Adjust icon size */
        left: 10px; /* Reduce left offset */
    }
}

@media (max-width: 576px) {
    .custom-search-box {
        height: 40px; /* Further reduce height */
    }

    .custom-search-input {
        font-size: 11px;
    }
}

.top-search-btn {
    top: 0;
    right: 0;
    font-size: 20px;
    position: absolute;
    color: #333333;
}

.top-search-btn:hover {
    color: #dc4734;
}

.nav-icons {
    display: flex;
    /* Use flexbox to align items in a row */
    justify-content: center;
    /* Center the icons horizontally */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
    list-style-type: none;
    /* Remove bullet points */
}

.nav-icons-config {
    font-size: 24px;
    color: #a6b7d4;
}

.custom-profile-thumb {
    display: flex;
    /* Make figure a flex container */
    justify-content: center;
    /* Center the image horizontally */
    align-items: center;
    /* Center the image vertically */
    height: 100%;
    /* Allow it to take the full height of the parent */
    margin: auto;
    /* Ensure margins are auto for centering */
}

/*----------------------------------------
            header area end
----------------------------------------*/
/*--------- secondary menu start ---------*/
.secondary-menu-wrapper {
    padding-left: 300px;
    padding-right: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .secondary-menu-wrapper {
        padding-left: 250px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper {
        padding: 0 30px;
    }
}

.secondary-menu-wrapper .header-top-navigation {
    padding-right: 50px;
    text-align: right;
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .secondary-menu-wrapper .header-top-navigation {
        padding-right: 30px;
    }
}

@media only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper .header-top-navigation {
        margin-top: 0;
        text-align: center;
        padding: 20px 0;
    }
}

.secondary-menu-wrapper .header-top-navigation li {
    margin-right: 47px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .secondary-menu-wrapper .header-top-navigation li {
        margin-right: 5px;
    }
}

@media only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper .header-top-navigation li {
        margin-right: 10px;
        padding-right: 10px;
    }

    .secondary-menu-wrapper .header-top-navigation li:before {
        display: none;
    }

    .secondary-menu-wrapper .header-top-navigation li:nth-child(3) {
        margin-right: 10px;
        padding-right: 10px;
    }
}

.secondary-menu-wrapper .header-top-navigation li a {
    font-size: 14px;
    font-weight: 500;
    padding: 28px 0;
    text-transform: capitalize;
}

@media only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper .header-top-navigation li a {
        padding: 0;
    }
}

@media only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper .header-top-navigation li a span {
        display: none;
        padding: 0;
    }
}

.secondary-menu-wrapper .header-top-navigation li a i {
    display: none;
    font-size: 18px;
}

@media only screen and (max-width: 767.98px) {
    .secondary-menu-wrapper .header-top-navigation li a i {
        display: block;
    }
}

.secondary-menu-wrapper .post-settings-bar {
    margin-left: inherit;
}

.page-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    text-transform: capitalize;
}

@media only screen and (max-width: 575.98px) {
    .page-title {
        font-size: 15px;
    }
}

/*--------- secondary menu end ---------*/
/*------ sticky menu style start ------*/
.sticky {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*------ sticky menu style end ------*/
/*--------- mobile header start ---------*/
.mobile-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #1e2731;
    height: 60px;
}

.mobile-header .header-logo {
    padding-top: 5px; /* Adjust the value for top padding */
    padding-bottom: 5px; /* Adjust the value for bottom padding */
    padding-left: 5px;
    width: 50px; /* Set the desired width */
    height: auto;
}

.mobile-logo,
.mobile-header-profile {
    width: 80px;
    height: 100%;
    text-align: center;
    background-color: #1e2731;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mobile-logo .profile-thumb-fixed,
.mobile-header-profile .profile-thumb-fixed {
    border-radius: 0px;
}

.mobile-menu ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.mobile-menu ul .message-list {
    display: inherit;
}

.mobile-menu ul li i {
    font-size: 20px;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.mobile-menu .icon-white {
    color: #ffffff;
}

.mobile-menu ul li:hover i {
    color: #dc4734;
}

.mobile-menu .notification .request-trigger {
    background-color: #3498db;
    /* Change to your desired color */
    color: white;
    /* Change text color if needed */
    border: none;
    /* Optional: remove the default border */
    border-radius: 5px;
    /* Optional: add rounded corners */
    padding: 10px 15px;
    /* Optional: adjust padding */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    transition: background-color 0.3s;
    /* Smooth transition */
}

/* Change color on hover */
.mobile-menu .notification .request-trigger:hover {
    background-color: #2980b9;
    /* Darker shade on hover */
}

.notification {
    position: relative;
}

.notification span {
    top: -5px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    display: block;
    position: absolute;
    text-align: center;
    background-color: #dc4734;
}

.mob-search-box {
    width: 100%;
    top: 100%;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 999;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
}

.mob-search-box.show {
    opacity: 1;
    visibility: visible;
}

.mob-search-inner {
    position: relative;
}

.mob-search-field {
    width: 100%;
    border: none;
    height: 70px;
    padding: 15px 50px 15px 15px;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mob-search-btn {
    top: 50%;
    right: 10px;
    position: absolute;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mob-search-btn:hover {
    color: #dc4734;
}

.search-trigger {
    position: relative;
}

.search-trigger .close-icon {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

.search-trigger.show .search-icon {
    opacity: 0;
    visibility: hidden;
}

.search-trigger.show .close-icon {
    opacity: 1;
    visibility: visible;
}

/*--------- mobile header end ---------*/
.mobile-chat-box {
    left: 0;
    top: 100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: 999;
}

.mobile-chat-box.show {
    opacity: 1;
    visibility: visible;
}

.mob-text-box {
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: #f1f1f1;
    padding: 25px;
}

.main-wrapper {
    padding-bottom: 105px;
}

.main-login-wrapper {
    padding-bottom: 105px;
    background-image: url('../images/photos/wallpaper.png');
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center center; /* Centers the image in the container */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .main-wrapper {
        padding-bottom: 10px;
        margin-bottom: 60px;
    }

    .main-login-wrapper {
        padding-bottom: 10px;
        margin-bottom: 60px;
        background-size: auto;
        background-position: center; /* Keeps the image centered */
    }
}

@media (min-width: 992px) {
    .main-wrapper {
        padding-top: 80px;
    }
}

.card {
    border: none;
    border-radius: 16px;
    padding: 40px 10px 20px 10px;
    margin-bottom: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.card .card-header {
    background-color: #1e2731;
    height: 80px;
}

@media (max-width: 992px) {
    .main-wrapper {
        padding-top: 60px;
        width: 100%;
        border-radius: 0px;
    }

    .card .card-header {
        border-radius: 0px;
        height: 50px;
    }
}

/* Adjust title text size for better responsiveness */
.card h3 {
    font-size: 1.5rem; /* Responsive title size */
    word-wrap: break-word; /* Prevent text overflow */
}

/* Ensure buttons are fully visible */
.card .btn-custom {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    padding: 12px 20px; /* Adjust padding to ensure content fits */
    text-align: center;
    color: white;
    width: 100%;
    height: auto; /* Allow auto height for better content fitting */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text from breaking */
}

/* Adjust the search box to ensure input and placeholder fit */
.card .search-box {
    position: relative;
    height: 45px; /* Increased height */
    padding: 10px 45px 10px 20px; /* Adjusted padding for better fit */
    width: 100%;
    box-sizing: border-box;
}

.card .search-box input {
    font-size: 14px; /* Increase font size */
    padding: 10px 10px 10px 10px; /* Add more padding */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.card .search-box input::placeholder {
    font-size: 14px; /* Adjust placeholder font size */
    color: #101828;
    padding-left: 0px;
}

.card .search-box .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px; /* Increase icon size */
    color: #888888;
    pointer-events: none;
}

.btn-primary-custom {
    background-color: #1e2731;
}

.left-mobile-btn {
    padding-left: 0;
    background-color: #1e2731;
}

/* No right padding on the right button */
.search-mobile-btn {
    padding-right: 0;
    background-color: #979797;
}

.btn-warning-custom {
    background-color: #ffc107;
}

.btn-danger-custom {
    background-color: #dc3545;
}

/* Ensure buttons are fully visible on hover */
.card .btn-custom:hover {
    opacity: 0.8;
    color: white;
}

@media only screen and (max-width: 767.98px) {
    .card {
        margin-bottom: 10px;
    }
    .card h3 {
        font-size: 1.2rem; /* Smaller title size for smaller screens */
    }
    .card .btn-custom {
        font-size: 12px; /* Smaller button text for smaller screens */
        padding: 10px 15px; /* Adjust padding for smaller screens */
    }
    .card .search-box {
        height: 40px; /* Slightly smaller for mobile */
        padding: 10px 20px 5px 0px;
        border-radius: 8px;
        background-color: #f2f4f7;
        stroke: #eaecf0;
    }
    .card .search-box input {
        font-size: 8px; /* Adjust input text size for mobile */
    }
}

@media only screen and (max-width: 767.98px) {
    .card {
        margin-bottom: 10px;
    }
}

.card-small {
    padding: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.card-profile {
    padding: 0;
}

.card:last-child {
    margin-bottom: 0;
}

.card.widget-item {
    padding: 25px;
}

.dashboard-page .card.widget-item {
    padding: 25px;
    transition: all 0.3s ease-in-out; /* Smooth animation for expansion/collapse */
    cursor: pointer; /* Indicate that the card is clickable */
}

.dashboard-page .card.widget-item.expanded {
    position: fixed; /* Fixed positioning for full-screen effect */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    padding: 25px;
    z-index: 1050; /* Ensure it overlays all other elements */
    background-color: #fff; /* Add a background to prevent transparency issues */
    overflow-y: auto; /* Allow scrolling for larger content */
}

@media only screen and (max-width: 767.98px) {
    .widget-item .row.two-cols .col {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .widget-item .row.full-width .col {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .widget-item .row .col {
        margin-bottom: 15px;
    }

    .dashboard-page .card.widget-item.expanded {
        padding: 15px; /* Reduce padding for smaller screens */
    }
}

.share-box-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.share-box-inner-wrapper li {
    margin-bottom: 35px;
    width: auto;
    padding: 0;
    margin: 0;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: space-between;
}

.share-box-inner-wrapper li:last-child {
    margin-bottom: 0;
}

.share-text-box {
    position: relative;
    padding-left: 15px;
}

.share-text-box .share-text-field {
    width: 100%;
    border: none;
    display: block;
    height: 44px;
    padding: 13px 90px 13px 20px;
    position: relative;
    border-radius: 50px;
    overflow: hidden;
    background-color: #f1f1f1;
    -webkit-box-shadow: inset none;
    box-shadow: inset none;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.share-text-box .btn-share {
    top: 50%;
    right: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    padding: 11px 25px;
    margin-right: 2px;
    border-radius: 40px;
    background-color: #dc4734;
    position: absolute;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media only screen and (max-width: 479.98px) {
    .share-text-box .btn-share .search-text-box {
        display: none;
    }
}

.share-text-box .btn-share:hover .search-text-box {
    background-color: #333333;
}

.search-text-box {
    position: relative;
    padding-left: 15px;
}

.search-text-box .share-text-field {
    width: 100%;
    border: none;
    display: block;
    height: 44px;
    padding: 13px 90px 13px 20px;
    position: relative;
    border-radius: 50px;
    overflow: hidden;
    background-color: #f1f1f1;
    -webkit-box-shadow: inset none;
    box-shadow: inset none;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.search-text-box .btn-share {
    top: 50%;
    right: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    padding: 11px 25px;
    margin-right: 2px;
    border-radius: 40px;
    background-color: #dc4734;
    position: absolute;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.modal-dialog {
    max-width: 600px;
}

.post-share-btn {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 14px 30px 12px;
    border-radius: 40px;
    background-color: #1e2731;
    text-transform: uppercase;
    cursor: pointer;
}

.post-share-btn:hover {
    background-color: #7ea6eb;
}

.share-field-big {
    width: 100%;
    padding: 15px;
    border: 1px solid #dddddd;
    height: 200px !important;
}

.posted-author {
    margin-left: 20px;
}

.posted-author .post-time {
    display: block;
    font-size: 14px;
    line-height: 1;
    padding-top: 10px;
}

.author {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-transform: capitalize;
}

.author a {
    color: #333333;
}

.author a:hover {
    color: #dc4734;
    text-decoration: underline;
}

.post-settings-bar {
    margin-left: auto;
    position: relative;
    cursor: pointer;
}

.post-settings-bar span {
    width: 20px;
    height: 1px;
    display: block;
    background-color: #ccc;
    margin-bottom: 4px;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.post-settings-bar span:last-child {
    margin-bottom: 0;
}

.post-settings-bar:hover span {
    background-color: #dc4734;
}

.post-settings-bar:hover .post-settings {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
}

.post-settings {
    right: 0;
    top: 100%;
    width: 200px;
    background-color: #fff;
    position: absolute;
    padding: 20px;
    z-index: 9;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
}

.post-settings li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.post-settings li button {
    color: #333333;
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.post-settings li button:hover {
    color: #dc4734;
}

.post-settings li button:last-child {
    margin-bottom: 0;
}

.post-settings li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

.arrow-shape:before {
    right: 10px;
    bottom: 100%;
    content: '';
    position: absolute;
    height: 20px;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.post-thumb-gallery {
    border-radius: 5px;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
}

.post-content {
    padding-top: 18px;
}

.post-desc {
    padding-bottom: 16px;
}

.post-desc-secondary {
    padding-top: 18px;
    padding-bottom: 0;
}

.post-meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 12px;
    margin-top: 10px;
}

@media only screen and (max-width: 479.98px) {
    .post-meta .post-meta-like span {
        display: none;
    }
}

.post-meta .post-meta-like strong {
    display: none;
    font-size: 14px;
    font-weight: 400;
    padding-left: 8px;
    color: #666666;
}

@media only screen and (max-width: 479.98px) {
    .post-meta .post-meta-like strong {
        display: inline-block;
    }
}

.post-meta .comment-share-meta {
    margin-right: 24px;
    margin-left: 24px;
}

.post-meta .comment-share-meta li {
    display: inline-block;
    margin-left: 24px;
}

.post-meta .comment-share-meta li:first-child {
    margin-left: 0;
}

.post-meta .post-share-meta {
    margin-left: auto;
}

.post-meta .post-share-meta li {
    display: inline-block;
    margin-right: 24px;
}

.post-meta-like i,
.post-comment i,
.post-share i {
    font-size: 20px;
    color: #333333;
    vertical-align: middle;
}

.post-meta-like span,
.post-comment span,
.post-share span {
    color: #666666;
    vertical-align: center;
    padding-left: 8px;
}

.post-meta-like:hover i,
.post-meta-like:hover span,
.post-comment:hover i,
.post-comment:hover span,
.post-share:hover i,
.post-share:hover span {
    color: #dc4734;
}

.plyr--video {
    border-radius: 5px;
}

.plyr__control--overlaid {
    opacity: 0;
    visibility: hidden;
}

/*------- profile picture style start -------*/
.profile-menu-area {
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .profile-menu-area {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 767.98px) {
    .profile-menu-area {
        padding: 15px;
    }
}

.profile-thumb-small {
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 0%;
    overflow: hidden;
}

.nav-item a {
    background-color: transparent;
    color: #fff;
}

.nav-item.active a,
.nav-item a:focus,
.nav-item a:hover {
    background-color: transparent;
    color: #007bff;
}

.nav-item a:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.nav-thumb-small {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.profile-setting-box .nav-profile-thumb-small a {
    display: block;
    padding: 0;
}

.nav-profile-thumb-small:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.profile-setting-box {
    position: relative;
}

.profile-setting-box .profile-thumb-small a {
    display: block;
}

.profile-setting-box .profile-dropdown {
    top: 100%;
    right: 0;
    width: 250px;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    border-radius: 0 0 2px 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: none;
}

.profile-setting-box .profile-head {
    padding: 20px;
}

.profile-setting-box .profile-head .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding-bottom: 7px;
}

.profile-setting-box .profile-head .name a {
    color: #333333;
}

.profile-setting-box .profile-head .name a:hover {
    color: #dc4734;
}

.profile-setting-box .profile-head .mail {
    font-size: 13px;
    color: #444444;
    display: block;
}

.profile-setting-box .profile-head .mail:hover {
    color: #dc4734;
}

.profile-setting-box .profile-body ul {
    padding: 20px 0;
    border-top: 1px solid #dddddd;
}

.profile-setting-box .profile-body ul li {
    line-height: 1;
    margin-bottom: 15px;
}

.profile-setting-box .profile-body ul li:last-child {
    margin-bottom: 0;
}

.profile-setting-box .profile-body ul li a {
    color: #444444;
    padding: 0 20px;
}

.profile-setting-box .profile-body ul li a i {
    font-size: 16px;
    padding-right: 8px;
}

.profile-setting-box .profile-body ul li:hover a {
    color: #dc4734;
}

.profile-setting-box .profile-body button {
    background: transparent; /* Make background transparent */
    border: none; /* Remove borders */
    padding: 0; /* Remove padding */
    font-size: inherit; /* Inherit font size */
}

.username a {
    font-family: 'Inter', sans-serif; /* Set the font to Inter */
    font-weight: 600; /* Set font weight */
    color: #3d475c; /* Corrected color code (added #) */
    font-size: 1.2rem; /* Set the desired font size */
    text-decoration: none; /* Remove underline for links */
}

@media (max-width: 992px) {
    /* Center the image and stack user info below */
    .profile-setting-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .unorder-list-info-cases {
        margin-top: 10px;
    }

    .unorder-list-mobile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-setting-box .profile-head .username a {
        font-size: 14px; /* Adjust this size to ensure visibility on smaller screens */
        line-height: 1.2; /* Slightly increase line height for readability */
        color: #333333 !important;
    }

    .username a {
        color: #333333 !important;
    }
}

/* Medium screens: between 768px and 991.98px */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .profile-setting-box .profile-head .username a {
        font-size: 14px;
        line-height: 1.2;
        color: #333333 !important;
    }

    .username a {
        color: #333333 !important;
    }
}

/* Small screens: between 576px and 767.98px */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .profile-setting-box .profile-head .username a {
        font-size: 13px;
        line-height: 1.1;
        color: #333333 !important;
    }

    .username a {
        color: #333333 !important;
    }
}

/* Extra small screens: below 576px */
@media only screen and (max-width: 575.98px) {
    .profile-setting-box .profile-head .name a {
        font-size: 12px;
        line-height: 1.1;
        color: #333333 !important;
    }

    .username a {
        color: #333333 !important;
    }
}

.profile-thumb {
    display: inline-block;
    position: relative;
}

.profile-thumb-fixed {
    width: 45px;
    height: 45px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.cases-thumb {
    width: 104px;
    height: 110px;
    border-radius: 0px;
}

@media only screen and (max-width: 767.98px) {
    .cases-thumb {
        width: 104px;
        height: 110px;
    }
}

.profile-thumb-cases {
    width: 110px;
    height: 104px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.profile-thumb.active {
    overflow: visible;
}

.profile-thumb.active img {
    border-radius: 0%;
}

.profile-thumb.active:before {
    bottom: 2px;
    right: -2px;
    width: 10px;
    height: 10px;
    content: '';
    border-radius: 50%;
    position: absolute;
    background-color: #09ae82;
}

.profile-banner-small {
    position: relative;
}

.profile-banner-small:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    pointer-events: none;
    border: 10px solid rgba(198, 165, 107, 0.3);
}

.profile-banner img {
    width: 100%;
}

.profile-thumb-2 {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    bottom: -40px;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

.profile-desc {
    padding: 30px;
    margin-top: 25px;
}

.profile-desc p {
    font-size: 13px;
    color: #666666;
    padding-top: 10px;
}

.profile-banner-large {
    height: 370px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .profile-banner-large {
        height: 270px;
    }
}

@media only screen and (max-width: 767.98px) {
    .profile-banner-large {
        height: 190px;
    }
}

.main-menu li {
    display: inline-block;
}

.profile-edit-panel {
    text-align: right;
}

.edit-btn {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 11px 28px;
    display: inline-block;
    border-radius: 50px;
    text-transform: capitalize;
    background-color: #dc4734;
}

@media only screen and (max-width: 767.98px) {
    .edit-btn {
        padding: 11px 15px;
    }
}

.edit-btn:hover {
    background-color: #333333;
}

.profile-picture-box {
    position: absolute;
    -webkit-transform: translateY(calc(-50% - 10px));
    -ms-transform: translateY(calc(-50% - 10px));
    transform: translateY(calc(-50% - 10px));
    background-color: #fff;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .profile-picture-box {
        -webkit-transform: translateY(calc(-50% - 10px));
        -ms-transform: translateY(calc(-50% - 10px));
        transform: translateY(calc(-50% - 10px));
    }
}

@media only screen and (max-width: 767.98px) {
    .profile-picture-box {
        left: 0;
        right: 0;
        margin: auto;
        width: 100px;
    }
}

.secondary-navigation-style .profile-picture-box {
    -webkit-transform: translateY(calc(-50% - 17px));
    -ms-transform: translateY(calc(-50% - 17px));
    transform: translateY(calc(-50% - 17px));
}

.profile-picture {
    position: relative;
}

@media only screen and (max-width: 575.98px) {
    .profile-picture {
        width: 100px;
    }
}

.profile-picture:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    pointer-events: none;
    border: 10px solid #fff;
}

@media only screen and (max-width: 767.98px) {
    .profile-picture:before {
        border: 5px solid #fff;
    }
}

.profile-sidebar {
    margin-top: 105px;
}

.author-into-list {
    margin-top: 27px;
}

.author-into-list li {
    margin-bottom: 10px;
}

.author-into-list li:last-child {
    margin-bottom: 0;
}

.author-into-list li a {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.author-into-list li a:hover {
    color: #dc4734;
}

.author-into-list li a i {
    color: #dc4734;
    font-size: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .author-into-list li a i {
        padding-right: 8px;
    }
}

.img-gallery .row {
    --bs-gutter-x: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .widget-area {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767.98px) {
    .widget-area {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 767.98px) {
    .add-thumb img {
        width: 100%;
    }
}

/*------- widget title start -------*/
.widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    text-transform: capitalize;
    position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .widget-title {
        font-size: 16px;
    }
}

/* .widget-title:before {
    bottom: -12px;
    left: 0;
    width: 30px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #dc4734;
} */

/*------- widget title end -------*/

/*------- simple divider -------*/

.divider {
    width: 100%;
    /* Full width by default */
    height: 1px;
    /* Thin line */
    background-color: #ddd;
    /* Line color */
    margin: 20px 0;
    /* Space above and below the line */
}

.traced {
    text-decoration: dotted;
}

/*------- simple divider end -------*/

/*------- widget carousel start -------*/
.gallery-carousel {
    padding: 0.5rem;
    display: flex;
    overflow-x: auto;
    /* Allow horizontal scrolling */
    overflow-y: hidden;
    /* Hide vertical overflow */
    scroll-snap-type: x mandatory;
    /* Snap to each item */
    /* Additional styles for better appearance */
    -webkit-overflow-scrolling: touch;
    /* Enable smooth scrolling on iOS */
}

.gallery-carousel .active {
    scroll-snap-type: unset;
}

.gallery-carousel li {
    scroll-snap-align: center;
    /* Center each item when scrolling */
    display: flex;
    /* Use flex for better alignment */
    justify-content: center;
    /* Center items */
    align-items: center;
    /* Center items */
    border-radius: 50%;
    /* Circle shape */
    width: 40px;
    /* Default size */
    height: 40px;
    /* Default size */
    background-color: #3498db;
    /* Example color */
    color: white;
    /* Text color */
    font-size: 0.8rem;
    /* Adjusted font size */
    text-align: center;
    /* Center text */
    line-height: 40px;
    /* Center text vertically */
    margin-right: 0.5rem;
    /* Add margin for spacing between items */
    transition: width 0.2s, height 0.2s;
    /* Smooth transition for size changes */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .gallery-carousel li {
        width: 50px;
        /* Increase size for mid-sized screens */
        height: 50px;
        /* Increase size for mid-sized screens */
    }
}

@media (max-width: 480px) {
    .gallery-carousel li {
        width: 40px;
        /* Keep size smaller for small screens */
        height: 40px;
        /* Keep size smaller for small screens */
        font-size: 0.7rem;
        /* Adjust font size for small screens */
    }
}

/* Hide the carousel if it overflows on smaller screens */
@media (max-width: 320px) {
    .gallery-carousel {
        display: block;
        /* Change layout to block */
    }

    .gallery-carousel li {
        width: auto;
        /* Reset width for block layout */
        height: auto;
        /* Reset height for block layout */
        border-radius: 0;
        /* Remove circular shape for smaller items */
        margin-right: 0;
        /* Remove spacing */
        margin-bottom: 0.5rem;
        /* Add spacing below items */
    }
}

/*------- widget carousel end -------*/

/*------- like page list wrapper start -------*/
.like-page-list-wrapper li {
    margin-bottom: 35px;
}

.like-page-list-wrapper li:last-child {
    margin-bottom: 0;
}

.unorder-list-info {
    padding-left: 10px;
}

.list-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 3px;
}

.list-title .h3 {
    margin: 0px;
}

.static-list-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 0px;
}

.nav-list-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 3px;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .list-title {
        font-size: 13px;
        font-weight: 500;
    }

    .nav-list-title {
        font-size: 13px;
        font-weight: 500;
    }

    .static-list-title {
        font-size: 18px;
        font-weight: 500;
    }
}

.list-title a {
    color: #333333;
    font-family: 'Inter', sans-serif; /* Set the font to Inter */
    font-size: 16px;
}

.nav-list-title a {
    color: #dcdcdc;
}

.static-list-title a {
    color: #000000;
    font-family: 'Inter', sans-serif; /* Set the font to Inter */
    font-size: 15px;
}

/* Responsive font sizes */
@media only screen and (min-width: 1200px) {
    .list-title a {
        font-size: 14px; /* Font size for large screens */
    }

    .static-list-title a {
        font-size: 13px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .list-title a {
        font-size: 13px; /* Font size for medium-large screens */
    }

    .static-list-title a {
        font-size: 12px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .list-title a {
        font-size: 12px; /* Font size for medium screens */
    }

    .static-list-title a {
        font-size: 11px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .list-title a {
        font-size: 11px; /* Font size for small screens */
    }

    .static-list-title a {
        font-size: 10px;
    }
}

@media only screen and (max-width: 575.98px) {
    .list-title a {
        font-size: 10px; /* Font size for extra small screens */
    }

    .static-list-title a {
        font-size: 10px;
    }
}

.list-title a:hover {
    color: #dc4734;
}

.list-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    text-transform: capitalize;
}

.list-subtitle a {
    color: #666666;
}

.list-subtitle a:hover {
    color: #dc4734;
}

.unorder-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.unorder-list .like-button {
    font-size: 20px;
    margin-left: auto;
    position: relative;
}

.unorder-list .like-button .heart-color {
    top: 50%;
    left: 0;
    position: absolute;
    opacity: 1;
    visibility: hidden;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.unorder-list .like-button:hover .heart,
.unorder-list .like-button.active .heart {
    opacity: 0;
    visibility: hidden;
}

.unorder-list .like-button:hover .heart-color,
.unorder-list .like-button.active .heart-color {
    opacity: 1;
    visibility: visible;
}

/*------- like page list wrapper end -------*/
.sweet-galley {
    margin-bottom: -5px;
}

.gallery-tem {
    margin-bottom: 5px;
}

.gallery-tem {
    border-radius: 4px;
    overflow: hidden;
}

/*--------- friend request list start ---------*/
.frnd-request-list {
    background-color: #fff;
    padding: 25px;
    width: 100%;
    display: inherit !important;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(13px);
    -ms-transform: translateY(13px);
    transform: translateY(13px);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.frnd-request-list.show {
    opacity: 1;
    visibility: visible;
}

.frnd-request-list li {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.frnd-request-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

.frnd-request-member {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.frnd-request-member .request-thumb {
    width: 80px;
    max-height: 80px;
}

.frnd-content {
    padding-left: 15px;
    width: calc(100% - 80px);
}

.frnd-content p {
    font-size: 13px;
    color: #666666;
    padding-top: 6px;
}

.request-btn-inner {
    margin-top: 5px;
}

.request-btn-inner .frnd-btn {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    text-transform: capitalize;
    line-height: 1;
    padding: 8px 20px;
    display: inline-block;
    border: 1px solid transparent;
    background-color: #ebf2fa;
}

@media only screen and (max-width: 575.98px) {
    .request-btn-inner .frnd-btn {
        padding: 8px 15px;
    }
}

.request-btn-inner .frnd-btn.delete {
    color: #333333;
    border: 1px solid #333333;
    background-color: transparent;
}

.request-btn-inner .frnd-btn.delete:hover {
    color: #fff;
}

.request-btn-inner .frnd-btn:hover {
    background-color: #333333;
}

/*--------- friend request list end ---------*/
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .signup-form-wrapper {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .signup-form-wrapper {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1499.98px),
    only screen and (min-width: 992px) and (max-width: 1199.98px),
    only screen and (min-width: 768px) and (max-width: 991.98px),
    only screen and (max-width: 767.98px) {
    .signup-form-wrapper {
        padding: 47px 30px;
    }
}

.signup-form-wrapper .create-acc {
    color: #dc4734;
    font-size: 30px;
    font-weight: 800;
    padding-bottom: 47px;
}

@media only screen and (max-width: 575.98px) {
    .signup-form-wrapper .create-acc {
        font-size: 26px;
    }
}

.signup-form-wrapper .divider {
    display: flex; /* Use flexbox to align the elements horizontally */
    align-items: center; /* Align the text vertically in the middle */
    text-align: center;
    margin: 30px 0; /* Add margin around the divider */
    position: relative; /* Make sure position is relative for the span */
    color: #908aa0;
}

.signup-form-wrapper .divider hr {
    border: none;
    margin: 0 10px; /* Space between line and the text */
    width: 100%; /* Make the lines stretch */
}

.signup-form-wrapper .google-divider {
    margin: 24px 0; /* Add margin around the divider */
}

.signup-form-wrapper .divider .divider-text {
    padding: 0 30px; /* Padding around the text */
    background-color: #fff; /* Background color to hide the line behind the text */
    font-size: 14px;
    color: #170645; /* Adjust text color */
    position: relative; /* Stack it above the line */
    z-index: 1; /* Ensure the text is on top */
}

.signup-inner {
    max-width: 450px;
    max-height: 669px;
    margin: auto;
}

.signup-inner .title {
    color: #170645;
    font-size: 32px;
    background-color: #fff;
    padding: 23px 0;
    font-family: 'Popins', sans-serif;
    font-weight: 700;
}

.signup-inner--form {
    padding: 25px 40px 45px;
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    max-width: 450px;
}

.signup-inner--form .response-message {
    display: none;
    margin-top: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .signup-inner--form {
        padding: 42px 50px 50px;
    }
}

@media only screen and (max-width: 479.98px) {
    .signup-inner--form {
        padding: 42px 30px 50px;
    }
}

/* .signup-inner--form:before {
    top: 50%;
    left: 50%;
    content: '';
    position: absolute;
    height: 170px;
    width: 174px;
    background-image: url("../images/icons/login.png");
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -80%);
    -ms-transform: translate(-50%, -80%);
    transform: translate(-50%, -80%);
} */

.signup-inner--form .single-field {
    width: 100%;
    border: none;
    background-color: transparent;
    border: 1px solid #ccc; /* Border for the Google button */
    padding: 5px 10px;
    margin-bottom: 28px;
}

.signup-inner--form .login-field {
    margin-bottom: 15px;
    padding: 5px 10px;
}

.signup-inner--form .pwd-field {
    margin-bottom: 15px;
    padding: 5px 10px;
}

.signup-inner--form .nice-select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #999;
    border-radius: 0;
    font-size: 13px;
    padding: 5px 10px;
    height: 34px;
    line-height: 30px;
    margin-bottom: 27px;
    background-color: transparent;
}

.signup-inner--form .nice-select span {
    color: #999;
}

.signup-inner--form .nice-select:after {
    height: 6px;
    width: 6px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
}

.signup-inner--form .nice-select .list {
    width: 100%;
}

.signup-inner .terms-condition {
    font-size: 16px;
    padding-top: 13px;
    font-family: 'Inter';
    font-weight: 700;
    color: #170645;
}

.signup-inner .terms-condition a {
    color: #1e2731;
}

.signup-inner .forget-password {
    font-size: 13px;
    padding: 0px;
    font-family: 'Popins', sans-serif;
    color: #170645;
}

.signup-inner .forget-password a {
    font-weight: 500;
    color: #170645;
}

.signup-inner .input-description {
    text-align: left; /* Aligns the text to the left */
    font-size: 14px; /* Adjust the size of the description */
    margin-bottom: 5px; /* Space between the description and the input field */
    color: #170645; /* Optional: Change color for better visibility */
    font-weight: 900;
    font-family: 'Inter';
}

.submit-btn {
    font-size: 16px;
    font-weight: 500;
    font: 'Montserrat', sans-serif;
    color: #fff;
    line-height: 1;
    padding: 15px 20px;
    display: block;
    border: 1px solid transparent;
    background-color: #1e2731;
    width: 100%;
    margin-top: 5px;
}

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

/* Specific styles for the Google button */
.google-btn {
    background-color: #fff; /* White background */
    color: #333; /* Dark text color */
    border: 1px solid #ccc; /* Border for the Google button */
}

.google-btn a {
    color: #333;
}

.google-btn:hover {
    background-color: #f7f7f7; /* Slight hover effect */
}

.timeline-logo-area {
    padding: 0 30px;
}

@media only screen and (min-width: 1600px) {
    .timeline-logo-area {
        padding: 0 107px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .timeline-logo-area {
        padding: 10px 30px;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 575.98px) {
    .timeline-logo-area .timeline-logo {
        width: 70px;
    }
}

.timeline-logo-area .tagline {
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    padding-left: 70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499.98px) {
    .timeline-logo-area .tagline {
        padding-left: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .timeline-logo-area .tagline {
        padding-left: 0;
    }
}

@media only screen and (max-width: 575.98px) {
    .timeline-logo-area .tagline {
        padding-left: 70px;
    }
}

@media only screen and (max-width: 479.98px) {
    .timeline-logo-area .tagline {
        padding-left: 20px;
    }
}

.login-area {
    background-color: #dc4734;
    padding: 15px 30px;
}

@media only screen and (min-width: 1600px) {
    .login-area {
        padding: 15px 110px;
    }
}

.login-area .single-field {
    width: 100%;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    color: #fff;
}

@media only screen and (max-width: 575.98px) {
    .login-area .single-field {
        margin-bottom: 30px;
    }
}

.login-area .login-btn {
    font-size: 14px;
    font-weight: 500;
    color: #dc4734;
    line-height: 1;
    padding: 12px 32px;
    display: inline-block;
    border: 1px solid transparent;
    background-color: #fff;
}

.login-area .login-btn:hover {
    background-color: #333333;
}

@media only screen and (max-width: 575.98px) {
    .login-area .login-btn {
        width: 100%;
    }
}

.login-area ::-webkit-input-placeholder {
    /* Edge */
    color: #ddd;
}

.login-area :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ddd;
}

.login-area ::-moz-placeholder {
    color: #ddd;
}

.login-area ::-ms-input-placeholder {
    color: #ddd;
}

.login-area ::placeholder {
    color: #ddd;
}

.timeline-bg-content {
    width: 100%;
    height: calc(100vh - 70px);
    position: relative;
    padding: 0 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .timeline-bg-content {
        height: 400px;
    }
}

@media only screen and (max-width: 575.98px) {
    .timeline-bg-content {
        height: 300px;
    }
}

.timeline-bg-content .timeline-bg-title {
    top: 50%;
    left: 50%;
    width: 610px;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-size: 36px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499.98px) {
    .timeline-bg-content .timeline-bg-title {
        width: 540px;
        font-size: 32px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) {
    .timeline-bg-content .timeline-bg-title {
        width: 100%;
        padding: 0 30px;
        font-size: 26px;
    }
}

@media only screen and (max-width: 479.98px) {
    .timeline-bg-content .timeline-bg-title {
        width: 100%;
        font-size: 22px;
        padding: 0 30px;
    }
}

/*--------- about author area start ---------*/
.about-author-details {
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-author-menu li {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 4px;
    margin-bottom: 16px;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.about-author-menu li a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    color: #333333;
    text-transform: capitalize;
}

.about-author-menu li a.active {
    color: #dc4734;
}

.about-author-menu li:hover {
    border-color: #dc4734;
}

.about-author-menu li:hover a {
    color: #dc4734;
}

.about-author-menu li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.about-description {
    background-color: #fff;
    padding: 42px 68px 36px 68px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .about-description {
        padding: 30px;
        margin-top: 20px;
    }
}

.author-desc-title {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.author-desc-title .author {
    font-size: 18px;
    font-weight: 700;
}

/*--------- about author area end ---------*/
/*------- photos section style start -------*/
.content-box {
    padding: 30px;
    background-color: #fff;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
}

.content-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    line-height: 1.3;
    text-align: center;
    margin-top: -5px;
    margin-bottom: 48px;
    padding-bottom: 25px;
    text-transform: capitalize;
    border-bottom: 1px solid #dddddd;
}

.photo-group {
    margin-top: 30px;
    cursor: pointer;
}

.photo-group:hover .gallery-overlay:before {
    opacity: 1;
    visibility: visible;
}

.photo-group:hover .view-icon {
    opacity: 1;
    visibility: visible;
}

.photo-group:hover .photos-caption {
    color: #dc4734;
}

.photo-group.active .view-icon {
    opacity: 1;
    visibility: visible;
}

.photo-group.active .gallery-overlay:before {
    opacity: 0;
    visibility: hidden;
}

.gallery-overlay {
    position: relative;
}

.gallery-overlay:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.photo-gallery-caption {
    text-align: center;
    padding: 13px 15px 17px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
}

.photo-gallery-caption .photos-caption {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #333333;
    text-transform: capitalize;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .photo-gallery-caption .photos-caption {
        font-size: 13px;
    }
}

@media only screen and (max-width: 767.98px) {
    .photo-gallery-caption .photos-caption {
        font-size: 14px;
        font-weight: 500;
    }
}

.view-icon {
    top: 50%;
    left: 0;
    right: 0;
    width: 70px;
    height: 70px;
    margin: auto;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .view-icon {
        width: 40px;
        height: 40px;
    }
}

.view-icon:before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;
    background-color: #fff;
}

.view-icon:after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    content: '';
    position: absolute;
    background-color: #fff;
}

.load-more {
    line-height: 1;
    margin-top: 28px;
}

.load-more-btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #333333;
    text-transform: capitalize;
}

.load-more-btn:hover {
    color: #dc4734;
}

/*------- photos section style end -------*/
/*-------- friend list area start --------*/
.friends-section .content-box {
    padding: 30px 0;
}

.friends-section .content-box.friends-zone {
    padding: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.friends-section .content-box.friends-zone .friend-list-view {
    background-color: #fff;
}

.friends-section .content-box.friends-zone .friend-list-view:hover {
    background-color: #dc4734;
}

.friend-list-view {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 25px 30px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 5px 0px rgba(51, 51, 51, 0.2);
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .friend-list-view {
        padding: 20px 15px;
    }
}

.friend-list-view:hover {
    background-color: #dc4734;
}

.friend-list-view:hover .author a {
    color: #fff;
}

.friend-list-view:hover .add-frnd {
    color: #fff;
}

.friend-list-view .add-frnd {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: #666666;
    text-transform: capitalize;
}

@media only screen and (max-width: 767.98px) {
    .friend-list-view .posted-author {
        margin-left: 8px;
    }
}

@media only screen and (max-width: 575.98px) {
    .friend-list-view .posted-author {
        margin-left: 20px;
    }
}

/*-------- friend list area end --------*/
/*------ photo filter area start ------*/
@media only screen and (max-width: 479.98px) {
    .secondary-menu-2 {
        display: block;
        text-align: center;
        padding: 15px 0;
    }
}

@media only screen and (max-width: 479.98px) {
    .secondary-menu-2 .post-settings-bar {
        display: none;
    }
}

.filter-menu {
    margin-left: auto;
    padding-right: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
    .filter-menu {
        padding-right: 30px;
    }
}

@media only screen and (max-width: 479.98px) {
    .filter-menu {
        padding-right: 0;
    }
}

.filter-menu button {
    font-size: 14px;
    font-weight: 500;
    padding: 23px 0;
    text-transform: capitalize;
    margin-right: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .filter-menu button {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .filter-menu button {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 767.98px) {
    .filter-menu button {
        margin-right: 15px;
        padding: 5px 0;
    }
}

@media only screen and (max-width: 575.98px) {
    .filter-menu button {
        margin-right: 10px;
    }
}

.filter-menu button:hover,
.filter-menu button.active {
    color: #dc4734;
}

.filter-menu button:last-child {
    margin-right: 0;
}

/*---------- footer area start ----------*/
.reveal-footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5;
    position: fixed;
    background-color: #f1f1f1;
}

.footer-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .footer-wrapper {
        display: block;
    }
}

.footer-card {
    height: 75px;
    padding: 0 20px;
    border-top: none;
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 325px;
    -webkit-box-shadow: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
    box-shadow: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
}

@media only screen and (min-width: 1200px) and (max-width: 1499.98px) {
    .footer-card {
        width: 270px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .footer-card {
        width: 212px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .footer-card {
        width: 100%;
        height: 60px;
        margin-top: 20px;
    }
}

.active-profile-wrapper {
    width: 1170px;
    -webkit-box-shadow: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
    box-shadow: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
}

@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
    .active-profile-wrapper {
        width: calc(100% - 690px);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1499.98px) {
    .active-profile-wrapper {
        width: calc(100% - 600px);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .active-profile-wrapper {
        width: calc(100% - 464px);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .active-profile-wrapper {
        width: 100%;
        margin-top: 20px;
    }
}

.active-profile-mob-wrapper {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*-------- active profile carousel start --------*/
.active-profile-carousel {
    padding: 0 60px;
}

/*-------- active profile carousel end --------*/
/*------- friend search box start -------*/
.friends-search {
    width: 100%;
}

.frnd-search-title {
    height: 62px;
    padding: 0 25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #1e2731;
}

.frnd-search-title .frnd-search-icon,
.frnd-search-title .close-btn {
    color: #fff;
    font-size: 20px;
}

.frnd-search-title .frnd-search-icon:hover,
.frnd-search-title .close-btn:hover {
    color: #fff;
}

.frnd-search-title p {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
    text-transform: capitalize;
}

.search-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.search-field {
    width: 100%;
    border: none;
    padding-right: 10px;
    color: #666666;
}

.search-btn {
    color: #333333;
    font-size: 20px;
}

.search-btn:hover {
    color: #fff;
}

.friend-search-list {
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%;
    background-color: #fff;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.friend-search-list.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.friend-search-list ul li {
    margin-bottom: 20px;
}

.friend-search-list ul li:last-child {
    margin-bottom: 0;
}

.friend-search-list ul li .add-frnd {
    display: block;
    font-size: 12px;
    padding-top: 5px;
    color: #666666;
    text-transform: capitalize;
}

.friend-search-list ul li .add-frnd:hover {
    color: #fff;
}

.frnd-search-inner {
    height: 350px;
    margin: 25px 0;
    padding: 0 25px;
}

.frnd-search-inner ul li {
    cursor: pointer;
}

.frnd-search-inner ul li .posted-author p {
    color: #666666;
    font-size: 13px;
    padding-top: 5px;
}

/*------- friend search box end -------*/
/*------- live chat box start -------*/
.chat-output-box {
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%;
    background-color: #fff;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.chat-output-box.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.live-chat-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 62px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 25px;
    background-color: #1e2731;
}

.live-chat-title .author a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.live-chat-title .active-pro {
    font-size: 12px;
    line-height: 1;
    color: #fff;
    text-transform: capitalize;
}

.chat-settings {
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
}

.chat-settings:hover {
    color: #333333;
}

.close-btn {
    color: #fff;
    font-size: 20px;
}

.close-btn:hover {
    color: #333333;
}

.live-chat-inner {
    width: 100%;
}

.chat-text-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.chat-text-field .chat-message-send {
    background-color: #fff;
    padding-right: 10px;
}

.live-chat-field {
    width: 100%;
    border: none;
    height: 60px !important;
    padding-top: 25px;
    padding-left: 10px;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.live-chat-field:focus {
    padding-top: 0;
}

.message-list {
    margin: 25px 0;
    padding: 0 25px;
    height: 350px;
    display: block;
}

.message-list li {
    margin-bottom: 35px;
    position: relative;
}

.message-list li:last-child {
    margin-bottom: calc(35px - 20px);
}

.message-list li.text-friends {
    max-width: 210px;
    padding: 20px;
    background-color: #f1f1f1;
    border-radius: 10px;
}

.message-list li.text-friends p {
    font-size: 12px;
    color: #333333;
}

.message-list li.text-author {
    max-width: 210px;
    padding: 20px;
    border-radius: 10px;
    background-color: #1e2731;
    margin-left: auto;
}

.message-list li.text-author p {
    font-size: 12px;
    color: #fff;
}

.message-list li .message-time {
    bottom: -15px;
    right: 15px;
    position: absolute;
    color: #333333;
    font-size: 11px;
    line-height: 1;
}

.active-profiles-wrapper .single-slide {
    text-align: center;
}

/*------- live chat box end -------*/
/*------- mobile footer area start -------*/
.mobile-footer-inner {
    position: relative;
}

.mobile-footer-inner .mobile-frnd-search {
    width: 60px;
    height: 69px;
    line-height: 69px;
    background-color: #ffffff;
    text-align: center;
}

.mobile-footer-inner .mobile-frnd-search i {
    color: #fff;
}

.mobile-footer-inner .mobile-frnd-search .search-box {
    display: block;
}

.mobile-footer-inner .active-profile-mob-wrapper {
    width: calc(100% - 60px);
}

.search-toggle-btn {
    font-size: 20px;
    width: 100%;
}

.mob-frnd-search-inner {
    left: 75px;
    top: 0;
    height: 100%;
    width: calc(100% - 60px);
    position: absolute;
    z-index: 9;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.mob-frnd-search-inner.show {
    opacity: 1;
    visibility: visible;
}

.mob-frnd-search-field {
    height: 60px;
    border: none;
    width: 100%;
    padding: 15px;
}

.mob-btn {
    width: 50px;
}

/*------- mobile footer area end -------*/

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    margin-right: 8p;
}

.breadcrumb li + li:before {
    content: '>';
    margin-right: 8px;
    color: #666;
}

.breadcrumb a {
    text-decoration: none;
    color: #007bff;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .active {
    color: #6c757d;
    pointer-events: none;
}

.breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb a {
    white-space: nowrap;
}

.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 0px;
    border: none;
    color: #9499a1;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.breadcrumbs h4 {
    font-family: 'Inter', sans-serif;
    color: #3d475c;
    font-size: 19px;
}

.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
    text-decoration: none;
}

.breadcrumbs a:focus,
.breadcrumbs a:hover {
    color: #9499a1;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '\003e'; /* Unicode for '>' chevron */
    padding: 0 1px;
    color: #9499a1;
    font-weight: bold;
}

/* Style breadcrumb items */
.breadcrumb-item {
    display: inline-block;
    color: #9499a1;
}

/* Hide breadcrumbs on screens smaller than 768px */
@media (max-width: 768px) {
    .breadcrumb {
        display: none;
    }

    .breadcrumbs h4 {
        display: none;
    }

    .breadcrumbs {
        padding: 0;
    }
}

@media (max-width: 576px) {
    .breadcrumb {
        font-size: 12px;
    }

    .breadcrumb li {
        margin-right: 4px;
    }

    .breadcrumb li + li:before {
        margin-right: 4px;
    }
}

.styled-table,
.styled-table th,
.styled-table td {
    font-family: 'Inter', sans-serif;
}

.styled-table th {
    font-weight: 400; /* Regular weight */
    font-size: 12px;
    color: #9499a1; /* Color for <th> */
}

.styled-table td {
    font-weight: 500; /* Medium weight */
    font-size: 14px;
    color: #3d475c; /* Color for <td> */
}

/* Basic table styling */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.styled-table thead tr {
    background-color: #f9f9f9;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

.styled-table th,
.styled-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

.styled-table tbody tr {
    background-color: #fff;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

.styled-table {
    width: 100%; /* Make the table occupy the full width of the card */
    table-layout: fixed; /* Ensures proper width distribution across columns */
    word-wrap: break-word; /* Prevents content overflow */
}

/* Optional: Customize table cell behavior */
.styled-table td,
.styled-table th {
    padding: 10px; /* Adjust padding as needed */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis; /* Ensures content is truncated with ellipsis if too long */
    white-space: nowrap; /* Prevents text from wrapping */
}

.table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.table-sort-link:hover {
    color: #0d6efd;
}

.table-sort-link i {
    font-size: 1.1rem;
}

.table-sort-link.active {
    color: #0d6efd;
}

.mobile-sort-bar .form-select {
    min-width: 150px;
}

/* Responsive styling for small screens */
@media only screen and (max-width: 767.98px) {
    .styled-table {
        display: block;
        overflow-x: auto; /* Enable horizontal scrolling on small screens */
    }
}

.custom-padding-bottom {
    padding-bottom: 30px;
}

/* Style for the filter container */
.filter-container {
    cursor: pointer; /* Hand icon */
}

/* When hovering over, show text cursor */
.filter-container:hover {
    cursor: text;
}

/* Or use the 'crosshair' if you want a similar effect */
.filter-container:active {
    cursor: crosshair; /* Cross icon, often used for selection */
}

/* Status styles */
.status {
    display: inline-block;
    width: 87px; /* Fixed width */
    height: 21px; /* Fixed height */
    padding: 0; /* Remove default padding */
    border-radius: 12px;
    font-size: 10px;
    font-weight: 300;
    text-align: center;
    line-height: 21px; /* Vertically center the text */
    box-sizing: border-box; /* Ensure padding/margin don't affect width/height */
}

.status.in-day {
    background-color: #e5f7f2;
    color: #00a689;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 6px;
}

.status.urgent {
    background-color: #ffe2e2;
    color: #ff4d4d;
}

/* Process type style */
.process-type {
    background-color: #f0f0f5;
    color: #888;
    border-radius: 6px;
    padding: 0px 30px;
    font-size: 12px;
    text-align: center;
    height: 21px;
}

.process-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 200px; /* Initial scrollable height */
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%; /* Full width of parent container */
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

.hoverable {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.hoverable:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.process-list.expanded {
    position: fixed; /* Fix to screen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* Bring to the front */
    max-height: none; /* Remove height restriction */
    height: 100%; /* Full viewport height */
    width: 100%; /* Full viewport width */
    padding: 20px; /* Optional padding */
    background-color: #fff; /* Ensure proper background color */
    overflow-y: scroll; /* Enable scrolling for long content */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional styling */
}

.process-list-header h4 {
    font-size: 15px;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    color: #333333;
    margin: 0;
    align-items: center;
}

.process-list.expanded .back-button {
    display: block; /* Show only when expanded */
}

.process-list-header h5 {
    font-size: 15px;
    font-weight: normal;
    font-family: 'Poppins', sans-serif;
    color: #333333;
    margin: 0;
    align-items: center;
    cursor: pointer;
}

.process-list-header h6 {
    font-size: 15px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    text-align: left;
}

.back-button {
    display: none; /* Hidden by default */
    position: sticky; /* Sticks to the top of the scrollable area */
    top: 0; /* Always at the very top */
    left: 0;
    right: 0;
    background-color: #fff; /* Matches the background for visibility */
    color: #333;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #ccc; /* Optional styling for separation */
    z-index: 1000; /* Ensure it stays above the table */
}

.process-item {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent items from shrinking */
}

.process-number {
    font-size: 12px;
    color: #9499a1;
    margin: 0;
}

.process-name .client-name {
    font-size: 13px;
    font-weight: 500;
    color: #3d475c;
    margin: 5px 0;
}

.status-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* General styles for the nav bar */
.nav-bar {
    background-color: white; /* Change to a darker background color */
    padding-bottom: 20px;
}

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

/* Styling the nav links */
.nav-link {
    font-family: 'Inter', sans-serif; /* Set the font to Inter */
    position: relative; /* Set position to relative for the hover effect */
    padding: 10px 15px; /* Add padding for better spacing */
    color: #9499a1; /* Set the text color */
    text-decoration: none; /* Remove default underline */
    background-color: #f8f9fa;
}

/* Hover effect */
.nav-link:hover {
    color: #73cbff; /* Change text color on hover */
}

/* Create the hover underline effect */
.nav-link::after {
    content: ''; /* Required to create a pseudo-element */
    position: absolute; /* Position it absolutely */
    left: 0; /* Align to the left */
    bottom: -5px; /* Position below the text */
    width: 100%; /* Full width */
    height: 3px; /* Height of the underline */
    background-color: #73cbff; /* Blue color for the underline */
    transform: scaleX(0); /* Initially scale to 0 for animation */
    transition: transform 0.3s ease; /* Smooth transition effect */
}

/* Scale the underline on hover */
.nav-link:hover::after {
    transform: scaleX(1); /* Scale to full width on hover */
}

/* Fixed underline for active nav link */
.nav-link.active::after {
    transform: scaleX(1); /* Keep the underline full width */
}

/* Maintain hover effect for active link */
.nav-link.active:hover {
    color: transparent; /* Ensure the color changes on hover */
}

.nav-link.active {
    color: #007bff !important; /* Keep text visible with blue color */
    background-color: transparent !important; /* Transparent background */
}

/* Ensure the underline is visible when hovering over active link */
.nav-link.active:hover::after {
    transform: scaleX(1); /* Keep the underline full width on hover */
}

/* Styling for the three-dot button */
.three-dot-btn {
    width: 38px;
    height: 38px;
    background-color: none; /* Background color of the button */
    border: none;
    border-radius: 0px; /* Make it circular */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Hover effect for the button */
.three-dot-btn:hover {
    background-color: none; /* Change background color on hover */
}

/* Container for the three dots */
.three-dots {
    display: flex;
    justify-content: space-between;
    width: 14px; /* Adjust width to control spacing between the dots */
}

/* Styling for the individual dots */
.dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #9499a1; /* Dot color */
    border-radius: 50%;
}

/* Optional: Style dropdown menu */
.dropdown-menu {
    min-width: 150px; /* Set minimum width for the dropdown */
}

/* Hover effect for dropdown items */
.dropdown-item:hover {
    background-color: #1e2731;
    color: #fff;
}

.divider-card {
    width: 100%;
    /* Full width by default */
    height: 1px;
    /* Thin line */
    background-color: #ddd;
    /* Line color */
    margin: 15px 0 5px;
    /* Space above and below the line */
}

/* Styling the chevron */
.chevron {
    margin-left: 5px; /* Space between text and icon */
    font-size: 0.8em; /* Adjust size if needed */
    color: #9499a1; /* Set the color to match the text color */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

/* Change color on hover */
.nav-link:hover .chevron {
    color: #73cbff; /* Change icon color on hover */
}

.calendar-link {
    position: relative; /* Ensure positioning context */
    padding-right: 25px; /* Space for the icon */
    text-decoration: none; /* Ensure no underline */
}

.calendar-link::after {
    content: ''; /* Required to create a pseudo-element */
    position: absolute; /* Position it absolutely */
    right: 10px; /* Space from the right */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    width: 16px; /* Adjust the size */
    height: 16px; /* Set a height for the icon */
    background-image: url('/static/assets/images/icons/gbaa/chevron-down.svg'); /* Path to your icon */
    background-repeat: no-repeat;
    background-size: contain; /* Scale the icon properly */
    background-color: transparent;
    /* Optional: add this if needed */
    display: inline-block; /* Make sure the pseudo-element behaves like an inline element */
}

/* Profile image styles */
.profile-picture-custom {
    width: 104px;
    height: 110px;
    object-fit: cover;
}

.profile-picture-custom-header {
    max-width: 100%; /* Ensures the image can scale down but not up */
    height: auto; /* Maintains the aspect ratio */
    display: block;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .profile-picture-custom {
        width: 52px;
        height: 55px;
    }

    .username a {
        color: #ffffff;
    }
}

/* Optional - if you want an even smaller size for mobile */
@media (max-width: 576px) {
    .profile-picture-custom {
        width: 52px;
        height: 55px;
    }

    .username a {
        color: #ffffff;
    }
}

/* Button Styles */
.action-button {
    display: inline-block;
    height: 30px; /* Set fixed height */
    line-height: 30px; /* Align text vertically */
    padding: 0 1rem; /* Horizontal padding only */
    background-color: #000; /* Dark background */
    color: #fff; /* White text */
    text-align: center;
    border-radius: 6px; /* Updated border radius */
    font-family: 'Inter', sans-serif; /* Font set to Inter */
    font-size: 13px; /* Font size set to 13px */
    font-weight: 400; /* Inter Regular */
    text-decoration: none; /* No underline */
    transition: background-color 0.2s ease-in-out; /* Smooth hover effect */
    overflow: hidden; /* Ensures no overflow of text */
    text-overflow: ellipsis; /* Handles long text with ellipsis */
    white-space: nowrap; /* Prevents text wrapping */
}

/* Hover State */
.action-button:hover {
    background-color: #333; /* Slightly lighter background on hover */
}

/* Secondary Button (Buscar Processo) */
.secondary-button {
    background-color: #6c757d; /* Gray background */
}

.secondary-button:hover {
    background-color: #5a6268; /* Slightly darker gray on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .action-button {
        height: 28px; /* Slightly smaller height */
        line-height: 28px; /* Adjust line height */
        padding: 0 0.8rem; /* Compact padding */
        font-size: 12px; /* Smaller font size */
        border-radius: 5px; /* Smaller border radius */
    }
}

@media (max-width: 576px) {
    .action-button {
        height: 26px; /* Smaller height for small screens */
        line-height: 26px; /* Adjust line height */
        padding: 0 0.6rem; /* Compact padding */
        font-size: 11px; /* Smaller font size */
    }
}

.form-container {
    background-color: #f8f9fa; /* Light background */
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.form-label {
    font-weight: 600;
    color: #495057;
}

.form-control,
.form-select {
    background-color: #f1f1f1;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
    color: #495057;
}

.form-control::placeholder {
    color: #adb5bd;
}

.form-control:focus,
.form-select:focus {
    border: 2px solid #007bff;
    box-shadow: none;
}

/* Dropdown container styling */
.select-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensure the container takes up the intended width */
    margin: 0;
    padding: 0;
}

/* Base select styling */
.select-container select {
    appearance: none; /* Removes browser's default styling */
    -webkit-appearance: none; /* Safari/Chrome-specific */
    -moz-appearance: none; /* Firefox-specific */
    border: 1px solid #ccc; /* Default border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background */
    font-family: 'Inter', sans-serif; /* Consistent font */
    font-size: 14px; /* Font size */
    padding: 10px 16px; /* Add padding for text and icon */
    width: 100%; /* Match the container's width */
    box-sizing: border-box; /* Include padding in width calculation */
    outline: none; /* Remove focus outline */
}

/* Remove the original dropdown arrow in some browsers */
select::-ms-expand {
    display: none; /* Hide default arrow for IE/Edge */
}

.flatpickr-calendar {
    background-color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
    width: 300px;
}

.flatpickr-month {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
}

.flatpickr-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.flatpickr-days .flatpickr-day {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.flatpickr-day:hover {
    background-color: #f0f0f0;
    color: #333;
}

.flatpickr-day.today {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}

.flatpickr-day.selected {
    background-color: #4caf50;
    color: #fff;
    font-weight: bold;
}

@media (max-width: 576px) {
    .flatpickr-calendar {
        width: 100%;
    }

    .flatpickr-days .flatpickr-day {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
}

.todo-card {
    width: 300px;
    border-radius: 8px;
    background-color: #fff;
    padding: 16px;
    font-family: Arial, sans-serif;
}

.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.todo-header h4 {
    margin: 0;
    font-size: 18px;
}

.todo-header p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.todo-progress {
    display: flex;
    align-items: center;
}

.todo-progress span {
    font-size: 12px;
    color: #666;
    margin-right: 8px;
}

.todo-options {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #999;
}

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

.todo-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
/* Rounded Checkbox */
.rounded-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
    outline: none;
    background: #fff;
    display: inline-block;
}

.rounded-checkbox:checked {
    border-color: #000;
    background-color: #000;
}

.rounded-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.todo-list input[type='checkbox'] {
    margin-right: 8px;
}

.todo-list label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.todo-list label.completed {
    text-decoration: line-through;
    color: #999;
}

.add-task-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #6c757d;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.add-task-button:hover {
    background-color: #e0e0e0;
    color: #5a5a5a;
}

.plus-icon {
    font-size: 18px;
    font-weight: bold;
    margin-right: 8px;
    color: #6c757d;
    line-height: 1;
}

.news-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    background-color: #fff;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.news-header {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    color: #34495e;
}

.news-title {
    color: #2c3e50;
    font-weight: bold;
}

.news-subtitle {
    font-weight: normal;
}

.news-body {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 15px;
    line-height: 1.5;
}

.news-footer {
    display: flex;
    justify-content: flex-start;
}

.reply-button {
    background-color: #f2f8fe; /* Light blue background */
    color: #6096c8; /* Subtle blue text */
    border: none; /* No border for cleaner look */
    border-radius: 6px; /* Fully rounded corners */
    padding: 8px 20px; /* Adjust padding for height and width */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

.reply-button:hover {
    background-color: #e6f2fb; /* Slightly darker blue on hover */
    color: #497aa5; /* Darker blue text on hover */
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.step-links {
    display: flex;
    gap: 10px;
}

.page-nav,
.page-number {
    padding: 8px 15px;
    background-color: #1e2731;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    transition: background-color 0.3s;
}

.page-nav:hover,
.page-number:hover {
    background-color: #9499a1;
}

.page-nav i,
.page-number i {
    margin-right: 5px;
}

.page-number.active {
    background-color: #9499a1;
    font-weight: bold;
}

.page-number {
    background-color: #1e2731;
    color: #ffffff;
}

.ellipsis {
    color: #6c757d;
    padding: 8px 15px;
}

@media screen and (max-width: 768px) {
    /* On small screens, simplify pagination */
    .current-page {
        display: inline-block;
        margin-top: 10px;
    }

    .page-nav {
        font-size: 12px;
        padding: 5px 10px; /* Smaller buttons */
    }

    .pagination {
        justify-content: flex-start;
        margin-left: 5px;
    }

    .page-nav i {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    /* On very small screens, hide unnecessary elements */
    .page-nav {
        font-size: 10px;
        padding: 4px 8px;
    }
    .current-page {
        font-size: 12px;
    }
}