/*------------------------------------------------------------------
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 ------*/
@font-face {
    font-family: 'Droid Kufi';
    src: url('../fonts/DroidKufi-Regular.ttf') format('truetype');
    /* Add other font formats here (e.g., .woff, .woff2) for better browser support */
}

body {
    color: #444444;
    line-height: 1.7;
    font-size: 14px;
    font-weight: 400;
    background-color: #f1f1f1;
    font-family: 'Droid Kufi', sans-serif;
}
/* Styles for the loader container */
.loader {
    display: none;
    text-align: center;
    font-size: 16px;
    color: #333;
}

/* Styles for the spinner animation */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-top: 3px solid #333;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

/* Keyframe animation for the spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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 !important;
}
li {
    list-style: none !important;
}
a{
    color:#000 ;
}
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: #000;
}

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

::-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: #000;
}

.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.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
    background-color: #000;
    -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) * .625);
    padding-left: calc(var(--bs-gutter-x) * .625);
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    .tagTitleModal{
        margin-right: -2rem
    }

}

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

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

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

.container-fluid {
    padding-right: calc(var(--bs-gutter-x) * .625);
    padding-left: calc(var(--bs-gutter-x) * .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;
    }
}

.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;
}

/*------- short classes end -------*/
/*----------------------------------------
            header area start
----------------------------------------*/
.header-top {
    -webkit-box-shadow: 0px 1px 20px 0px rgba(85, 85, 85, 0.25);
    box-shadow: 0px 1px 20px 0px rgba(85, 85, 85, 0.25);
}

@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;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .header-top-navigation 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;
    }
}

.header-top-navigation ul li:last-child {
    margin-left: 0;
    padding-left: 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;
    }
}

@media only screen and (max-width: 767.98px) {
    .header-top-navigation 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: #000;
}
.form-check-input:hover{
    box-shadow: none;
}
.form-check-input{
    box-shadow: none;
}
.form-check-input:checked {
    background-color: #000;
    border-color: #000;
    box-shadow: none;
}


.header-top-navigation ul li .message-dropdown {
    top: 100%;
    right: 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: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
}

.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: #000;
    text-decoration: underline;
}

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

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

.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: #000;
    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: #000;
}

.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: #000;
}

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

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

.top-search-field {
    border: none;
    width: 100%;
    padding-right: 30px;
    background-color: transparent;
}

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

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

/*----------------------------------------
            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: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
}

/*------ 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: #fff;
    height: 60px;
}

.mobile-logo,
.mobile-header-profile {
    width: 80px;
    height: 100%;
    text-align: center;
    background-color: #000;
    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-middle,
.mobile-header-profile .profile-thumb-middle {
    border-radius: 0;
}

.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 ul li:hover i {
    color: #000;
}

.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: #000;
}

.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: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
}

.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: #000;
}

.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;
}

@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;
    }
}

.card {
    border: none;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
}

@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;
}

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

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

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

.share-text-box .btn-share {
    top: 50%;
    left: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    padding: 11px 25px;
    margin-right: 2px;
    border-radius: 40px;
    background-color: #000;
    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 {
        display: none;
    }
}

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

.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: #000;
    text-transform: uppercase;
    cursor: pointer;
}

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

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

.posted-author {
    margin-right: 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.6;
    text-transform: capitalize;
}

.author a {
    color: #333333;
}

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

.post-settings-bar {
    margin-right: 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: #000;
}

.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: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    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: #000;
}

.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: 20px;
}

.post {
    padding: 10px;
    margin-bottom: 10px;
}

.post-desc.full {
    display: none;
}

.see-more {
    color: blue;
    cursor: pointer;
}


@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: auto;
}

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

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

.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: text-bottom;
    padding-right: 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: #000;
}

.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: 50%;
    overflow: hidden;
}

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

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

.profile-setting-box .profile-dropdown {
    top: 100%;
    left: 0;
    width: 250px;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    border-radius: 0 0 2px 2px;
    -webkit-box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    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: #000;
}

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

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

.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: #000;
}

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

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

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

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

.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: #000;
}

@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: #000;
}

.author-into-list li a i {
    color: #000;
    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: 45px;
    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;
    right: 0;
    width: 30px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #000;
}

/*------- widget title 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-right: 10px;
}

.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;
    }
}

.list-title a {
    color: #333333;
}

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

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

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

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

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

.unorder-list .like-button {
    font-size: 20px;
    margin-right: 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: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
    box-shadow: 0px 1px 15px 0px rgba(51, 51, 51, 0.2);
}

.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: #fff;
    text-transform: capitalize;
    line-height: 1;
    padding: 8px 20px;
    display: inline-block;
    border: 1px solid transparent;
    background-color: #000;
}

@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: #000;
    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-inner {
    max-width: 572px;
    margin: auto;
    -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
}

.signup-inner .title {
    color: #fff;
    font-size: 18px;
    background-color: #000;
    padding: 23px 0;
}

.signup-inner--form {
    padding: 42px 100px 50px;
    background-color: #fff;
    position: relative;
}

@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-bottom: 1px solid #999;
    padding: 5px 10px;
    margin-bottom: 28px;
}

.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: 28px;
}

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

.submit-btn {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    padding: 15px 20px;
    display: block;
    border: 1px solid transparent;
    background-color: #000;
    width: 100%;
    margin-top: 23px;
}

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

.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: #000;
    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: #000;
    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: #000;
}

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

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

.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: #000;
}

.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: #000;
}

/*------- 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: #000;
}

.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: #000;
}

.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: #000;
}

.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: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
    box-shadow: 0px -5px 36px -5px rgba(51, 51, 51, 0.2);
}

/*-------- 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: #000;
}

.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: #333333;
}

.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: #000;
}

.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: #000;
}

.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: #000;
}

.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: #e47263;
    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: #000;
    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 -------*/
/*start login*/
.login-section{
    color: #000;
    font-weight: 600;
    margin-top: 5rem;
}
.login-section-title{
    text-align: center !important;
}
.login-section i{
    color: #000;
}
.login-section a{
    color: #000;
    text-decoration: none;
    font-weight: 600;
}
.login-section h1{
    color: #000;
    margin: 2rem 0 0 0;
    font-weight: 700;
    text-align: right;
}
.login{
    border: 2px solid #d5dae3;
    padding: 3rem;
    background: #fafafa;
}
.firebaseui-card-content {
    text-align: right !important;
}
p:last-child {
    text-align: right !important;

}
@media (max-width:1000px)  {
    .img-fluid{
        display: none;
    }
}
.mdl-button--raised.mdl-button--colored {
    background: #000 !important;
}
.modal-header .btn-close{
    margin: 0;
    padding: 0;
}





.calendar-sum {
    display: inline-block;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 4px;
    border: 2px solid #000;
    border-radius: 5px;
    width:3rem;
    text-align: center;
}

.day-sum {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #000;
}

.month-sum {
    display: block;
    font-size:9px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
}

.year-sum {
    display: block;
    font-size: 9px;
    color: #000;
}
.collapsible-button {
    background: none;
    border: none;
    cursor: pointer;
    text-align: right;
}

.collapsible-content {
    display: none;
}

.collapsible-content.show {
    display: block;
}
.topics-phone{
    display: none;
}
.most-viewed-mobile{
    display: none;
}

.arrow{
    color: #000 !important;
}
.calendar header .month {
    font-size: 18px;
}
.calendar td {
    font-size: 12px;
}
.calendar .day.today {
    background:#000 !important;
}
.calendar .day.has-event:after {
    background:#000 !important;
}
.calendar .event-container .event-wrapper {
    overflow: hidden !important;
    height: 100%;
    width: 8rem !important;
    margin-right: -2.2rem
}
.calendar .event-container .event {
    background: #000 !important;
}
.calendar .event-container .event-date {
    font-size: 10px !important;
}
.calendar .event-container .event-hour {
    font-size: 10px !important;
}
@media only screen and (max-width: 600px) {
    .topics-phone{
        display: block;
    }
    .most-viewed-mobile{
        display: block;
    }
    .topics-screen{
        display: none;
    }
    .most-viewed-screen{
        display: none;
    }
    .tag-mobile{
        margin-top: 1rem;
    }
    .calendar-container{
        position: relative;

        margin: 50px auto;
        max-width: 20rem !important;
    }
}

/*start events*/

/*.rooms{*/
/*    background: url("../../assets/images/rooms-background.png");*/
/*    background-position: top;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*}*/
/*.rooms-title{*/
/*    color: white;*/
/*    text-align: center !important;*/
/*    font-size: 18px;*/

/*}*/
/*.rooms hr{*/
/*    color: #e3882a;*/
/*    font-size: 50px;*/
/*}*/

/*.rooms-custom-button {*/
/*    background: white;*/
/*    border: 2px solid white;*/
/*    border-radius: 10px;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    margin: 0.5rem 0;*/
/*    width: 100%;*/
/*    height: 3rem;*/

/*}*/
/*.rooms-custom-button:hover {*/
/*    transform: scale(1.1);*/
/*}*/

/*.rooms-custom-button-icon {*/
/*    width: 30px; !* Set the width of the image as needed *!*/
/*    height:30px; !* Set the height of the image as needed *!*/
/*    margin-right: 15px; !* Adjust the spacing between image and text *!*/
/*}*/
/*.rooms-custom-button-line {*/
/*    width: 1px; !* Set the width of the line as needed *!*/
/*    height: 20px; !* Set the height of the line to match the image height *!*/
/*    background: black; !* Color of the line *!*/
/*    margin: 0 15px; !* Adjust the spacing between the image and text and the line *!*/
/*}*/
/*.rooms-custom-button-span {*/
/*    font-size: 18px; !* Set the font size as needed *!*/
/*    color: black;*/
/*    white-space: nowrap; !* Prevent text from wrapping onto multiple lines *!*/
/*    overflow: hidden; !* Hide any overflow *!*/
/*    text-overflow: ellipsis;*/
/*}*/
/*.rooms-modal-title{*/
/*    text-align: center !important;*/
/*    width: 100%;*/
/*    margin: 3.5rem 0;*/
/*}*/
/*.previous-events-modal-content{*/
/*    background: url("../../assets/images/rooms-background.png");*/
/*    background-position: top;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    padding: 2rem;*/
/*}*/


/*.modal-event-item {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-bottom: 20px;*/
/*    border: 2px solid white;*/
/*    border-radius: 2px;*/
/*    padding: .5rem;*/
/*}*/

/*.modal-event-image {*/
/*    flex: 1;*/
/*    margin-left:20px;*/
/*}*/

/*.modal-event-details {*/
/*    flex: 2;*/
/*}*/

/*.modal-event-title {*/
/*    font-size: 18px;*/
/*    font-weight: bold;*/
/*    color: white;*/
/*}*/

/*.modal-event-description {*/
/*    font-size: 14px;*/
/*    color: white;*/

/*}*/

/*.modal-event-date {*/
/*    font-size: 10px;*/
/*    color: #e3882a;*/

/*}*/

/*.modal-event-button {*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*}*/

/*.modal-event-button a {*/
/*    background-color: white;*/
/*    color: black;*/
/*    padding: 10px 20px;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*    border-radius: 5px;*/
/*}*/
/*.modal-event-button a:hover {*/
/*    transform: scale(1.1);*/
/*}*/

/*end events*/


/*start tools*/
/*.tools{*/
/*    background: url("../../assets/images/tools-background-4.png");*/
/*    background-position: top;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    text-align: center !important;*/
/*}*/
/*.tools-title{*/
/*    color: white;*/
/*    text-align: center !important;*/
/*}*/
/*.tools-title p{*/
/*    color: white;*/
/*    text-align: center !important;*/
/*}*/
/*.tools-title hr{*/
/*    color: #e3882a;*/
/*    font-size: 50px;*/
/*}*/
/*.custom-button {*/
/*    background: transparent;*/
/*    border: 2px solid white;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    margin: 0.5rem 0;*/
/*    width: 100%;*/
/*    height: 3rem;*/
/*    border-radius: 2px;*/
/*}*/
/*.custom-button:hover {*/
/*    transform: scale(1.1);*/
/*}*/
/*.custom-button-icon {*/
/*    width: 30px; !* Set the width of the image as needed *!*/
/*    height:30px; !* Set the height of the image as needed *!*/
/*    margin-right: 7px; !* Adjust the spacing between image and text *!*/
/*}*/
/*.custom-button-line {*/
/*    width: 1px; !* Set the width of the line as needed *!*/
/*    height: 20px; !* Set the height of the line to match the image height *!*/
/*    background: #e3882a; !* Color of the line *!*/
/*    margin: 0 7px; !* Adjust the spacing between the image and text and the line *!*/
/*}*/
/*.custom-button-span {*/
/*    font-size: 14px; !* Set the font size as needed *!*/
/*    color: white;*/
/*    white-space: nowrap; !* Prevent text from wrapping onto multiple lines *!*/
/*    overflow: hidden; !* Hide any overflow *!*/
/*    text-overflow: ellipsis;*/
/*}*/

/*end tools*/
.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:20px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
    margin-top:16px
}
.float:hover{
    color: #e3882a
}
/*master css*/
.mobile-logo{
    width: 10rem
}
.custom-fa-upload{
    font-weight: 700;
    font-size: 16px;
    color: #000
}
.loading {
    z-index: 20;
    position: fixed; /* Changed to fixed */
    top: 0;
    left: 0; /* Changed to 0 */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex; /* Added */
    justify-content: center; /* Added */
    align-items: center; /* Added */
    overflow: hidden; /* Hiding overflow */
}

.loading-content {
    position: relative; /* Changed to relative */
    border: 16px solid #f3f3f3;
    border-top: 16px solid #000000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin .2s linear infinite;
}

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




/* Add a black background color to the top navigation bar */
.topnav {
    overflow: hidden;
    padding: 5px;
    margin: auto;
    float: right;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=search] {
    padding: 6px;
    border: solid 2px;
    font-size: 17px;
    border-radius: 23px;
    text-align: center;
    border-color: black;
    width: 85%;
    height: 36px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
    .topnav input[type=search] {
        margin: 0 .5rem;
        width: 83%;
    }
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}


.buttonClass {
    /*background-color: #21a9bd;*/
    background-color: white;
    border: none;
    color: black;
    padding: 7px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*font-size: 16px;*/
    border-radius: 40px;
    margin: auto;
}
.modal-body-comments .wrapper {
    display: flex;
    flex-direction: column;
    width: 744px}
.modal-body-comments .comment {
    display: grid;
    gap: 20px;
    user-select: none;}
.modal-body-comments .content {
    display: grid;
    grid-template-columns: auto 1fr 110px;
    align-items: flex-start;
    gap: 16px;
    flex: 1;}
.modal-body-comments .avatar {
    height: 48px;
    width: 48px;}
.modal-body-comments img {
    max-width: 100%;
    border-radius: 999px;
    object-fit: cover}
.modal-body-comments  .rate {
    gap: 8px;
    display: flex;
    align-items: center;}
.modal-body-comments  .value {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    text-align: center;}
.modal-body-comments .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    width: 32px;
    height: 32px;}

.modal-body-comments .user {
    gap: 12px;
    margin-bottom: 6px;
    align-items: center;
    display: flex;
}
.modal-body-comments .subcomment {
    display: flex;
    align-items: flex-start;}
.modal-body-comments .icon {
    width: 48px;
    height: 48px;
    color: #969696;
    display: flex;
    margin-right: 16px;
    align-items: center;
    justify-content: center;
}
.modal-body-comments .other_comments {
    flex: 1;
    display: grid;
    gap: 20px;
}
.modal-body-comments h5 {
    color: #1c1c1c;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.modal-body-comments .is-mute {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #969696;
}
.modal-body-comments button {
    appearance: none;
    background: transparent;
    outline: 0;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    user-select: none;
    transition: 0.2s ease;
}
.modal-body-comments .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #1c1c1c;
    padding: 4px 8px;
    font-size: 16px;
    background: transparent;
    gap: 6px;
    border-radius: 8px;}
.modal-body-comments i {
    font-size: 16px;
    color: #969696;
}


.header-top-navigation ul li .message-dropdown{
    left: 0 !important;
    right:unset;

}
.announcement-modal-body{
    display: flex;
    flex-direction: row;
}


.announcements-modal a{
    color: #f47820;
}

.announcements-modal {
    display: block;
    position: fixed;
    bottom: 15px;
    left:15px;
    background-color:white;
    padding: 20px;
    color: black;
    border-radius: 15px;
    width: 23rem;
}

.announcements-modal img {
    width: 6rem; /* Set your desired width */
    height: auto;
    margin: -1px -1px;
}
.announcements-modal p {
    display: inline;
}
.image-container {
    flex: 1; /* This will make the image take up half of the available space */
}

.text-container {
    flex: 2; /* This will make the text take up half of the available space */
}
.line {
    border-left: 1px solid #000; /* Add a vertical line */
    height: 70px; /* Adjust the height as needed */
    margin: 0 10px; /* Adjust the margin as needed to create space between image and text */
}
.flaticon-notification{
    font-size: 20px
}
.welcome-user{
    color: #000;
    font-size: 14px;
    font-weight: 700
}
.main-list-icon{
    margin-left: .5rem
}
.toast {
    background-color: #000000;
    color: white;
    /*#21a9bd*/
}
#inviteModal{
    margin-right: -.4rem
}
/*index*/
.select2-selection {
    height: 39px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #ccc !important;
    border-radius: 0px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
    background-color: transparent !important;
}
.select2-selection option{
    color: black !important;
}

.select2-dropdown{
    z-index: 3051;
}
.select2-container {
    z-index: 99999;
}
.custom-file-input-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.custom-file-label {
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    width: 100% !important;

}

.custom-file-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.modal-content-login{
    color: #000;
    background-color:#ebebeb ;
    text-align: center
}
.modal-header-login{
    text-align: center
}
.modal-header-login i{
    text-align: center;
    color:#000;
    font-size: 4rem;
    margin: auto
}
.modal-footer-login .button-modal{
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-icon {
    font-size: 24px;
    color: #000;
    margin: 0 10px;
    transition: color 0.3s;
}
.social-icon:hover {
    color: #0056b3;
}

.calendar .event-container .event-date{
    display: none;
}
.calendar .event-container .event-hour{
    display: none;
}
.calendar .event-container .event-wrapper{
    width: 11rem !important;
    text-align: center !important;
}
iframe{
    width:100% !important;
    margin: 2rem 0;

}
video{
    width:100% !important;
    margin: 2rem 0;
    height: 20rem;
}
.translated-content{
    direction: ltr;
}

.select2-container .select2-selection--single {
    height: 37px !important;
}
.select2-container .select2-dropdown {
    z-index: 1000000;
}


.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.event-image {
    flex: 1;
    margin-left:5px;
}

.event-details {
    flex: 2;
}

.event-title {
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.event-description {
    font-size: 10px;
    color: white;

}

.event-date {
    font-size: 10px;
    color: #f47820;

}

.event-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-button a {
    background-color: white;
    color: #f47820;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.event-button a:hover {
    transform: scale(1.1);
}
.modal-event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 2px solid white;
    border-radius: 2px;
    padding: .5rem;
}

.modal-event-image {
    flex: 1;
    margin-left:20px;
}

.modal-event-details {
    flex: 2;
}

.modal-event-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.modal-event-description {
    font-size: 14px;
    color: white;

}

.modal-event-date {
    font-size: 10px;
    color: #f47820;

}

.modal-event-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-event-button a {
    background-color: white;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.modal-event-button a:hover {
    transform: scale(1.1);
}


.co-pilot{
    background: url("/assets/images/co-pilot-bg.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.co-pilot-main-title{
    color: white;
    text-align: center !important;
}

.co-pilot-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.co-pilot-image {
    flex: .5;
    margin-left:2px;
}

.co-pilot-title{
    font-size: 12px;
    color: white;
}
.co-pilot-btn-group-vertical{
    border-color: #f0f0f0;
}
.co-pilot-btn-group-vertical button{
    font-size: 12px;
    padding: .2rem;
    border: solid 1px white;
    border-radius: 5px;
}

.co-pilot-btn-group-vertical a{
    font-size: 12px;
    padding: .2rem;
    border: solid 1px white;
    border-radius: 5px;
}
.co-pilot-btn-group-vertical-first-btn{
    color: #f47820;
}
.co-pilot-btn-group-vertical-first-btn:hover{
    background-color: white;
    color: #f47820;
}
.co-pilot-btn-group-vertical-secound-btn{
    color: #f47820;
    background-color: white;
}
.co-pilot-btn-group-vertical-secound-btn:hover{
    background-color: black;
    color: #f47820;
}

.co-pilot-custom-button {
    background: white;
    border: 2px solid white;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    height: 2rem;

}
.co-pilot-custom-button:hover {
    transform: scale(1.1);
}


.co-pilot-custom-button-span {
    font-size: 12px; /* Set the font size as needed */
    color: black;
    white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis;
}

.co-pilot-button{
    background-color:#f47820 ;
    color: white;
    margin: 0 auto;
    padding: 6px 50px;
    border-radius: 4px;
}

.co-pilot-button a{
    color: white;
}

.co-pilot-button-2{
    background-color:#f47820 ;
    color: white;
    padding: 6px 0px;
    border-radius: 4px;
    width:15%;
    text-align: center;
    margin: 2.5rem 18px 2.5rem 4rem;
}
.co-pilot-button-2 a{
    color: white;
    text-align: center;
}




.coPilotDetailsModal .modal-content{
    background: url("/assets/images/co-pilot-bg.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}
.coPilotDetailsModal hr{
    color: orangered;
}
.coPilotDetailsModal .modal-content .modal-body{
    color:white;
}

.subscribe_bg{
    background: url("/assets/images/subscribe-bg1.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.subscribe-widget-title{
    color: white !important;
    font-weight : 100 !important;
}
.subscribe-widget-title:before{
    display: none !important;
}


.announcement-modal-body{
    display: flex;
    flex-direction: row;
}

.image-container {
    flex: 1; /* This will make the image take up half of the available space */
}

.text-container {
    flex: 2; /* This will make the text take up half of the available space */
}
.line {
    border-left: 1px solid #000; /* Add a vertical line */
    height: 70px; /* Adjust the height as needed */
    margin: 0 10px; /* Adjust the margin as needed to create space between image and text */
}
.custom-file-label::after{
    display: none !important;
}
#mainPosts .card .post-content a{
    color: #0082ff;
}
/* room */
.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.event-image {
    flex: 1;
    margin-left:5px;
}

.event-details {
    flex: 2;
}

.event-title {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

.event-description {
    font-size: 10px;
    color: white;

}

.event-date {
    font-size: 10px;
    color: #f47820;

}

.event-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-button a {
    background-color: black;
    color: #f47820;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.event-button a:hover {
    transform: scale(1.1);
}
.rooms{
    background: url("/assets/images/rooms-background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.rooms-title{
    color: white;
    text-align: center !important;

}
.rooms hr{
    color: #f47820;
    font-size: 50px;
}
.previous-events-modal-content{
    background: url("/assets/images/rooms-background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
}


.modal-event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 2px solid white;
    border-radius: 2px;
    padding: .5rem;
}

.modal-event-image {
    flex: 1;
    margin-left:20px;
}

.modal-event-details {
    flex: 2;
}

.modal-event-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.modal-event-description {
    font-size: 14px;
    color: white;

}

.modal-event-date {
    font-size: 10px;
    color: #f47820;

}

.modal-event-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-event-button a {
    background-color: white;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.modal-event-button a:hover {
    transform: scale(1.1);
}

.rooms-custom-button {
    background: white;
    border: 2px solid white;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    height: 3rem;

}
.rooms-custom-button:hover {
    transform: scale(1.1);
}

.rooms-custom-button-icon {
    width: 30px; /* Set the width of the image as needed */
    height:30px; /* Set the height of the image as needed */
    margin-right: 15px; /* Adjust the spacing between image and text */
}
.rooms-custom-button-line {
    width: 1px; /* Set the width of the line as needed */
    height: 20px; /* Set the height of the line to match the image height */
    background: black; /* Color of the line */
    margin: 0 15px; /* Adjust the spacing between the image and text and the line */
}
.rooms-custom-button-span {
    font-size: 18px; /* Set the font size as needed */
    color: black;
    white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis;
}
.rooms-modal-title{
    text-align: center !important;
    width: 100%;
    margin: 3.5rem 0;
}

iframe{
    width:100% !important;
    margin: 2rem 0;

}
.vbox-grab .vbox-child img {
    cursor: grab;
    height: 100vh;
}
.custom-file-input-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.custom-file-label {
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    width: 100% !important;
}

.custom-file-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.modal-content-login{
    color: #000;
    background-color:#ebebeb ;
    text-align: center
}
.modal-header-login{
    text-align: center
}
.modal-header-login i{
    text-align: center;
    color:#000;
    font-size: 4rem;
    margin: auto
}
.modal-footer-login .button-modal{
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-icon {
    font-size: 24px;
    color: #000;
    margin: 0 10px;
    transition: color 0.3s;
}
.social-icon:hover {
    color: #0056b3;
}


.profile-picture img{
    max-height: 260px;
}


.profile-banner-large {
    /* Common styles for both desktop and mobile */
    background-size: cover;
    background-position: center;
}


.mobile-bg {
    display: none;
}

.attend-button {
    background-color: #000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.attend-button:hover {
    background-color: rgba(0,0,0,0.9);
}

.attend-button:active {
    transform: scale(0.95);
}
.follow-button {
    background-color: #000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.follow-button:hover {
    background-color: rgba(0,0,0,0.9);
}

.follow-button:active {
    transform: scale(0.95);
}

/*By Mohammad*/
.sliderImageCompanies #slide{
    width:96%;
}

.sliderImageCompanies * {
    box-sizing: border-box
}

.sliderImageCompanies .mySlides {
    display: none
}

.sliderImageCompanies .slideshow-container {
    width: auto;
    position: relative;
    margin: -10px;

}
/* Next & previous buttons */
.sliderImageCompanies .prev, .sliderImageCompanies .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #494B55;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.sliderImageCompanies .next {
    left: 0;
    border-radius: 3px 0 0 3px;
    margin-left : 28px;
}
/* On hover, add a black background color with a little bit see-through */
.sliderImageCompanies .prev:hover, .sliderImageCompanies .next:hover {
    background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.sliderImageCompanies .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* The dots/bullets/indicators */
.sliderImageCompanies .dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.sliderImageCompanies .active, .dot:hover {
    background-color: #494B55;
}
/* Fading animation */
.sliderImageCompanies .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}
@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}

.sliderImageCompanies .pics
{
    border:3px solid #494B55;
    width:200px;
}
.image-container {
    display: flex;
    flex-wrap: wrap;
}

.thumbnail {
    width: 100px;
    height: 100px;
    margin: 5px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.file-input-label {
    margin-top: 10px;
    cursor: pointer;
    padding: 8px 12px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
}

.file-input-label:hover {
    background-color: #2980b9;
}
.thumbnail {
    height: 80px;
}
.image-gallery {
    position: relative;
}

.image-wrapper {
    position: relative; /* Make sure images are positioned relative to their container */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important;
    font-size: 19px;
    pointer-events: none; /* Allow clicks on the overlay */
}

.gallery-image {
    z-index: 1; /* Ensure images are on top of the overlay */
}

.overlay p {
    pointer-events: auto; /* Allow clicks on the overlay text */
}

/* CSS */
.venobox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
}
#checkLoginModalToCommentAndLike {
    position: fixed;
    top: 50%; /* Adjust this value to position the modal vertically */
    left: 50%; /* Adjust this value to position the modal horizontally */
    transform: translate(-50%, -50%); /* Center the modal */
    z-index: 9999; /* Adjust the z-index as needed to appear above the venobox */
    /* Additional styling properties here */
}


/*co pilot page*/
.coPilotDetailsModal .modal-content{
    background: url("/assets/images/co-pilot-bg.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}
.coPilotDetailsModal hr{
    color: orangered;
}
.coPilotDetailsModal .modal-content .modal-body{
    color:white;
}
.co-pilot{
    background: url("/assets/images/co-pilot-bg.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.co-pilot-main-title{
    color: white;
    text-align: center !important;
}

.co-pilot-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.co-pilot-image {
    flex: .5;
    margin-left:2px;
}

.co-pilot-title{
    font-size: 12px;
    color: white;
}
.co-pilot-btn-group-vertical{
    border-color: #f0f0f0;

}
.co-pilot-btn-group-vertical button{
    font-size: 12px;
    padding: .2rem;
    border: solid 1px white;
    border-radius: 1px;
}

.co-pilot-btn-group-vertical a{
    font-size: 12px;
    padding: .2rem;
    border: solid 1px white;
    border-radius: 1px;
}
.co-pilot-btn-group-vertical-first-btn{
    color: #f47820;
}
.co-pilot-btn-group-vertical-first-btn:hover{
    background-color: white;
    color: #f47820;
}
.co-pilot-btn-group-vertical-secound-btn{
    color: #f47820;
    background-color: white;
}
.co-pilot-btn-group-vertical-secound-btn:hover{
    background-color: black;
    color: #f47820;
}

.co-pilot-custom-button {
    background:#f47820 ;
    border: 2px solid #f47820;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    height: 2rem;

}
.co-pilot-custom-button:hover {
    transform: scale(1.1);
}
.co-pilot-button{
    background-color:#f47820 ;
    color: white;
    margin: 0 auto;
    padding: 6px 50px;
    border-radius: 4px;
}

.co-pilot-button a{
    color: white;
}

.co-pilot-button-2{
    background-color:#f47820 ;
    color: white;
    padding: 6px 0px;
    border-radius: 4px;
    width:15%;
    text-align: center;
    margin: 2.5rem 18px 2.5rem 4rem;
}
.co-pilot-button-2 a{
    color: white;
    text-align: center;
}
.text-white{
    color:white !important;
}
/*companies page*/
.companies{
    background: url("/assets/images/companies-background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.companies-title{
    color: white;
    text-align: center !important;

}
.companies hr{
    color: #f47820;
    font-size: 50px;
}

.companies-custom-button {
    background: white;
    border: 2px solid white;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    height: 3rem;

}
.companies-custom-button:hover {
    transform: scale(1.1);
}

.companies-custom-button-icon {
    width: 20px; /* Set the width of the image as needed */
    height:20px; /* Set the height of the image as needed */
    margin-right: 10px; /* Adjust the spacing between image and text */
}
.companies-custom-button-line {
    width: 1px; /* Set the width of the line as needed */
    height: 20px; /* Set the height of the line to match the image height */
    background: black; /* Color of the line */
    margin: 0 15px; /* Adjust the spacing between the image and text and the line */
}
.companies-custom-button-span {
    font-size: 18px; /* Set the font size as needed */
    color: black;
    white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis;
}
.companies-modal-title{
    text-align: center !important;
    width: 100%;
    margin: 3.5rem 0;
}

/*company page*/
.rooms-title{
    color: white;
    text-align: center !important;

}
.rooms hr{
    color: #f47820;
    font-size: 50px;
}
.previous-events-modal-content{
    background: url("/assets/images/room/rooms-background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
}


.modal-event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 2px solid white;
    border-radius: 2px;
    padding: .5rem;
}

.modal-event-image {
    flex: 1;
    margin-left:20px;
}

.modal-event-details {
    flex: 2;
}

.modal-event-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.modal-event-description {
    font-size: 14px;
    color: white;

}

.modal-event-date {
    font-size: 10px;
    color: #f47820;

}

.modal-event-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-event-button a {
    background-color: white;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.modal-event-button a:hover {
    transform: scale(1.1);
}

.rooms-custom-button {
    background: white;
    border: 2px solid white;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    height: 3rem;

}
.rooms-custom-button:hover {
    transform: scale(1.1);
}

.rooms-custom-button-icon {
    width: 30px; /* Set the width of the image as needed */
    height:30px; /* Set the height of the image as needed */
    margin-right: 15px; /* Adjust the spacing between image and text */
}
.rooms-custom-button-line {
    width: 1px; /* Set the width of the line as needed */
    height: 20px; /* Set the height of the line to match the image height */
    background: black; /* Color of the line */
    margin: 0 15px; /* Adjust the spacing between the image and text and the line */
}
.rooms-custom-button-span {
    font-size: 18px; /* Set the font size as needed */
    color: black;
    white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis;
}
.rooms-modal-title{
    text-align: center !important;
    width: 100%;
    margin: 3.5rem 0;
}

iframe{
    width:100% !important;
    margin: 2rem 0;

}
.vbox-grab .vbox-child img {
    cursor: grab;
    height: 100vh;
}
.custom-file-input-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.custom-file-label {
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    width: 100% !important;
}

.custom-file-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.modal-content-login{
    color: #000;
    background-color:#ebebeb ;
    text-align: center
}
.modal-header-login{
    text-align: center
}
.modal-header-login i{
    text-align: center;
    color:#000;
    font-size: 4rem;
    margin: auto
}
.modal-footer-login .button-modal{
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-icon {
    font-size: 24px;
    color: #000;
    margin: 0 10px;
    transition: color 0.3s;
}
.social-icon:hover {
    color: #0056b3;
}


.profile-picture img{
    max-height: 260px;
}


.profile-banner-large {
    /* Common styles for both desktop and mobile */
    background-size: cover;
    background-position: center;
}


.mobile-bg {
    display: none;
}
.hidden-email {
    cursor: pointer;
    color: blue; /* Set the color for the clickable email */
    text-decoration: underline;
}
.attend-button {
    background-color: #000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.attend-button:hover {
    background-color: rgba(0,0,0,0.9);
}

.attend-button:active {
    transform: scale(0.95);
}
.follow-button {
    background-color: #000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.follow-button:hover {
    background-color: rgba(0,0,0,0.9);
}

.follow-button:active {
    transform: scale(0.95);
}

/*By Mohammad*/
.sliderImageCompanies #slide{
    width:96%;
}

.sliderImageCompanies * {
    box-sizing: border-box
}

.sliderImageCompanies .mySlides {
    display: none
}

.sliderImageCompanies .slideshow-container {
    width: auto;
    position: relative;
    margin: -10px;

}
/* Next & previous buttons */
.sliderImageCompanies .prev, .sliderImageCompanies .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #494B55;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.sliderImageCompanies .next {
    left: 0;
    border-radius: 3px 0 0 3px;
    margin-left : 28px;
}
/* On hover, add a black background color with a little bit see-through */
.sliderImageCompanies .prev:hover, .sliderImageCompanies .next:hover {
    background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.sliderImageCompanies .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* The dots/bullets/indicators */
.sliderImageCompanies .dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.sliderImageCompanies .active, .dot:hover {
    background-color: #494B55;
}
/* Fading animation */
.sliderImageCompanies .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}
@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}

.sliderImageCompanies .pics
{
    border:3px solid #494B55;
    width:200px;
}
#result{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    width:400px ;
    padding: 10px 0;

}
.thumbnail {
    height: 80px;
}
.image-gallery {
    position: relative;
}

.image-wrapper {
    position: relative; /* Make sure images are positioned relative to their container */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    pointer-events: none; /* Allow clicks on the overlay */
}

.gallery-image {
    z-index: 1; /* Ensure images are on top of the overlay */
}

.overlay p {
    pointer-events: auto; /* Allow clicks on the overlay text */
}

/* CSS */
.venobox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
}
#checkLoginModalToCommentAndLike {
    position: fixed;
    top: 50%; /* Adjust this value to position the modal vertically */
    left: 50%; /* Adjust this value to position the modal horizontally */
    transform: translate(-50%, -50%); /* Center the modal */
    z-index: 9999; /* Adjust the z-index as needed to appear above the venobox */
    /* Additional styling properties here */
}
.short_brief{
    text-align: center !important;
}
.view-services-modal{
    background-color: #f47820;
    cursor: pointer
}
.add-company-service-modal{
    background-color: black;
}
.add-event-button{
    background-color: #000
}
.upload-icon{
    font-weight: 700;
    font-size: 16px;
    color: #000;
}
.add-boll-options-icon{
    color: black;
    cursor:pointer;
    margin-top: 5px
}
.current-user-post-card{
    border:2px solid #f47820
}
h6{
    line-height: 1.6;
}
#companyDescription{
    text-align: justify
}
#companyFullDescription{
    text-align: justify
}
.figure{
    width: 3rem;
}
.delete-child{
    color: black;
    cursor:pointer;
    margin-top: 5px
}
.company-contact-info{
    color:#f47820
}
.enter-room-button{
    background-color: #000;
    width: 10rem !important;
}

/*mobile size*/
@media (max-width: 768px) {
    .mobile-size {
        display: none;
    }
}
.spinner-size{
    font-size: 1.5rem;
}