.Breadcrumb-cover {
    background-color: #eee;
    border-bottom: 1px solid rgb(0 0 0 / .1)
}

.login-section,.register-section {
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #cf8f0b78 0%, var(--main-grey) 100%);
}

.login-section .wrapper,.register-section .wrapper {
    max-width: 550px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: var(--white-color);
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease
}

.heading {
    text-align: center;
    margin-bottom: 2rem
}

.text-large {
    font-size: 2.25rem;
    color: var(--black-color);
    margin-bottom: .5rem
}

.text-normal {
    color: #666
}

.text-links {
    color: var(--color-blue);
    text-decoration: none;
    transition: 0.3s
}

.text-links:hover {
    text-decoration: underline
}

.form {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.input-control {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.input-field {
    padding: .75rem 1.25rem!important;
    border-radius: 50px;
    border: 1px solid var(--main-grey);
    background-color: var(--light-color);
    font-size: 1rem;
    transition: border 0.3s ease;
    height: 50px!important;
    position: relative
}

.input-field:focus {
    outline: none;
    border-color: var(--color-blue);
    background-color: var(--white-color)
}

.input-submit {
    background-color: var(--main-color);
    color: var(--white-color);
    padding: .75rem 1.25rem;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease
}

.input-submit:hover:not([disabled]) {
    background-color: var(--main-color)
}

.input-submit:disabled {
    background-color: #00839194;
    cursor: not-allowed
}

.striped {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem
}

.striped-line {
    flex: 1;
    height: 1px;
    background: #ddd
}

.striped-text {
    margin: 0 1rem;
    color: #999;
    font-size: .95rem
}

.method {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.method-control .method-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .65rem 1rem;
    border-radius: 50px;
    border: 1px solid rgb(0 0 0 / .1);
    background: var(--white-color);
    color: var(--black-color);
    transition: 0.3s ease;
    font-weight: 500
}

.method-action:hover {
    background-color: var(--color-light)
}

.ion-logo-apple,.ion-logo-google,.ion-logo-facebook {
    font-size: 1.5rem
}

.ion-logo-google {
    color: var(--color-red)
}

.ion-logo-facebook {
    color: var(--color-blue)
}

.ion-logo-apple {
    color: var(--color-black)
}

.password-svgs {
    width: 35px;
    display: inline-block;
    position: absolute;
    top: 11px;
    right: 19px;
    height: 35px;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden
}

.password-svgs:hover {
    background-color: #eaecef
}

.password-svgs:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #eee;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%
}

.password-svgs.active:before {
    transform: scale(3);
    opacity: 0;
    transition: transform 0.5s ease-out,opacity 0.5s ease-out
}

.password-close-svg,.password-open-svg {
    margin: 8px;
    width: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
    user-select: none
}

.password-open-svg {
    display: none
}

.password:has(+.password-svgs:hover) {
    border-color: var(--black-color)
}

.user-profile {
    background-color: var(--main-grey)
}

.profile-sidebar {
    position: relative;
    height: 100%
}

.profile-sidebar .nav-link {
    border-left: 4px solid #fff0;
    padding: 10px 15px;
    color: var(--black-color);
    text-align: left
}

.sidebar-content {
    position: sticky;
    background-color: var(--white-color);
    top: 70px;
    border-radius: 10px;
    border: 1px solid rgb(0 0 0 / .1);
    box-shadow: var(--box-shadow);
    padding: 1rem 0
}

.profile-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 7px;
    border-color: #fff0 #fff0 #fff0 var(--main-color);
    margin-top: -10px
}

.probile-tabs {
    display: flex;
    flex-direction: column
}

.profile-head {
    font-weight: 600;
    padding: 0 1rem 1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgb(0 0 0 / .1)
}

.profile-sidebar .nav-link.active {
    background-color: var(--main-color);
    font-weight: 500;
    color: var(--white-color);
    position: relative
}

.profile-box {
    background-color: var(--white-color);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgb(0 0 0 / .1);
    box-shadow: var(--box-shadow);
    border-radius: 10px
}

.form-select,.form-control {
    min-height: 42px;
    padding-block:0}

.profile-pic-placeholder {
    width: 100%;
    height: 220px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px
}

.nav-link {
    cursor: pointer
}

.profile-box {
    background-color: var(--white-color);
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgb(0 0 0 / .05)
}

.profile-pic-placeholder {
    width: 100%;
    height: 150px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px
}

.profile-cover-section {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 0 0 20px 20px
}

.profile-cover-section img {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9)
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><linearGradient id="waves" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="50%" stop-color="rgba(255,255,255,0.05)"/><stop offset="100%" stop-color="rgba(255,255,255,0.1)"/></linearGradient></defs><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="url(%23waves)"/></svg>');
    background-size: 200px 100px;
    animation: waveMove 20s ease-in-out infinite;
    opacity: .3
}

@keyframes waveMove {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-100px)
    }
}

.hero-content {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: center
}

.hero-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="3" fill="rgba(255,255,255,0.05)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="90" r="2" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="1.5" fill="rgba(255,255,255,0.08)"/></svg>');
    opacity: .4;
    animation: patternFloat 25s ease-in-out infinite
}

@keyframes patternFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-20px) rotate(5deg)
    }
}

.profile-section {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    transform: translateY(-100px)
}

.profile-card {
    background: var(--white-color);
    border-radius: 24px;
    padding: 2rem 2rem;
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    border: 1px solid #fff0;
    border-bottom: 5px solid #fff0;
    background: linear-gradient(white,white) padding-box,linear-gradient(to right,#3acfd5,#3a4ed5,var(--third-color)) border-box
}

.profile-content {
    display: flex;
    gap: 3rem;
    align-items: center
}

.profile-avatar {
    position: relative;
    flex-shrink: 0
}

.avatar-container {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--third-color),rgb(58 207 213 / .3));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgb(58 207 213 / .3);
    z-index: 20
}

.avatar-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--main-color),var(--third-color),#3a4ed5);
    z-index: -1;
    opacity: 0
}

.avatar-container:hover::before {
    animation: avatarGlow 3s ease-in-out infinite
}

@keyframes avatarGlow {
    0%,100% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: .8;
        transform: scale(1.05)
    }
}

.avatar-img img {
    font-size: 4rem;
    color: var(--white-color);
    opacity: .8;
    border-radius: 50%
}

.profile-info {
    flex: 1
}

.profile-name {
    font-weight: 600;
    color: var(--black-color);
    margin-bottom: .75rem;
    position: relative;
    font-size: clamp(1rem, 1.7rem ,2rem)
}

.profile-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 1.5rem
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--para-color);
    font-size: 1.1rem
}

.detail-icon i {
    width: 24px;
    height: 24px;
    color: var(--second-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem
}

.forget-password-section,.confirmation-mail-section,.reset-password-section {
    padding: 4rem 0;
    background: var(--main-grey)
}

.wrapper {
    max-width: 400px;
    margin: 0 auto;
    background: var(--white-color);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--box-shadow)
}

.icon-wrapper i {
    color: var(--main-color)
}

.text-large {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--black-color)
}

.input-control {
    margin-bottom: 1.2rem;
    position: relative
}

.input-field {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    transition: border 0.3s
}

.input-field:focus {
    border-color: var(--main-color);
    outline: none
}

.input-submit {
    width: 100%;
    background-color: var(--main-color);
    color: var(--white-color);
    padding: .75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s
}

.input-submit:hover {
    background-color: var(--main-color-dark,#e05656)
}

.text-links {
    color: var(--main-color);
    text-decoration: underline;
    font-weight: 500
}

.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

.input-submit {
    background-color: var(--main-color);
    color: var(--white-color);
    padding: .75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s;
    text-decoration: none
}

.input-submit:hover {
    background-color: var(--main-color,#e05656)
}

.input-box {
    position: relative;
    margin-bottom: 10px
}

.input-box label {
    position: absolute;
    top: .75rem;
    z-index: 20;
    left: 20px;
    font-size: 12px!important
}

.input-box label::before {
    content: "";
    width: 100%;
    top: 0;
    height: 100%;
    background: #fff0;
    position: absolute;
    z-index: -1
}

.input-box input:focus {
    margin-bottom: 20px;
    border: none;
    border-bottom: 1px solid var(--main-color)
}

.input-box select {
    padding: 5px 15px 0;
    height: 45px
}

.input-box select+label {
    position: absolute;
    left: 0;
    top: -.5rem;
    background-color: var(--white-color)
}

.accordion-button:focus {
    box-shadow: none;
    outline: none
}

.input-box input[type="date"]:focus+label,.input-box input[type="date"]:valid+label,.input-box input[type="tel"]:valid+label,.input-box input[type="number"]:focus+label,.input-box input:not(:placeholder-shown)+label,.input-box input[type="email"]:focus+label,.input-box input[type="text"]:focus+label,.input-box input[type="text"]:not(:placeholder-shown)+label,.input-box textarea:focus+label,.input-box textarea:not(:placeholder-shown)+label {
    left: 7px;
    top: -1.2rem;
    font-size: 14px;
    color: #212529;
    padding: 3px 5px;
    background-color: #fff;
    border-radius: 2px
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem
}

.chat-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--white-color);
    border: 1px solid rgb(0 0 0 / .08);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.chat-item:hover {
    border-color: var(--main-color);
    box-shadow: 0 4px 12px rgb(0 0 0 / .1);
    transform: translateY(-2px)
}

.chat-item.completed {
    opacity: .8;
    background: #f8f9fa
}

.chat-item.completed:hover {
    opacity: 1;
    background: var(--white-color)
}

.chat-avatar {
    position: relative;
    flex-shrink: 0
}

.chat-avatar-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--white-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / .1)
}

.chat-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--white-color)
}

.chat-status.online {
    background-color: #28a745
}

.chat-status.offline {
    background-color: #6c757d
}

.chat-status.away {
    background-color: #ffc107
}

.chat-content {
    flex: 1;
    min-width: 0
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .5rem
}

.chat-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black-color);
    margin: 0;
    line-height: 1.3
}

.chat-time {
    font-size: .8rem;
    color: #6c757d;
    white-space: nowrap;
    margin-left: .5rem
}

.chat-preview {
    color: #495057;
    font-size: .9rem;
    line-height: 1.4;
    margin: 0 0 .75rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem
}

.chat-expert {
    font-size: .8rem;
    color: #6c757d;
    font-weight: 500
}

.chat-status-badge {
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px
}

.chat-status-badge.ongoing {
    background-color: #e3f2fd;
    color: #1976d2
}

.chat-status-badge.pending {
    background-color: #fff3e0;
    color: #f57c00
}

.chat-status-badge.completed {
    background-color: #e8f5e8;
    color: #388e3c
}

.chat-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.btn-continue-chat,.btn-view-chat {
    padding: .5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .5rem
}

.btn-continue-chat {
    background-color: var(--main-color);
    color: var(--white-color)
}

.btn-continue-chat:hover {
    background-color: var(--main-color-dark,#e05656);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgb(0 0 0 / .15)
}

.btn-view-chat {
    background-color: #6c757d;
    color: var(--white-color)
}

.btn-view-chat:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgb(0 0 0 / .15)
}

.btn-new-chat {
    padding: .75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease
}

.btn-new-chat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(0 0 0 / .15)
}

.no-chats-message {
    text-align: center;
    padding: 3rem 1rem
}

.no-chats-message i {
    color: #dee2e6;
    margin-bottom: 1rem
}

.no-chats-message h6 {
    color: #6c757d;
    margin-bottom: .5rem
}

.no-chats-message p {
    color: #adb5bd;
    margin-bottom: 1.5rem
}

.mytrips {
    padding: 30px 0
}

.mytrips .section-title {
    margin-bottom: 15px
}

.mytrips .section-title h1 {
    text-align: center;
    width: fit-content;
    font-size: clamp(1rem, 1.7rem, 2rem);
    font-weight: 500;
    background-image: linear-gradient(to right,var(--main-color) 50%,#67e5f2);
    color: #fff0;
    background-clip: text;
    -webkit-background-clip: text;
    margin-right: auto;
    letter-spacing: .7px;
    text-transform: capitalize
}

.trip-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 4px rgb(0 0 0 / .05);
    transition: transform 0.2s ease-in-out;
    background: linear-gradient(white,white) padding-box,linear-gradient(to right,#3acfd5,#3a4ed5) border-box;
    border: 1px solid #fff0;
    border-top: 4px solid #fff0
}

.trip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgb(0 0 0 / .1)
}

.trip-image {
    flex-shrink: 0;
    margin-right: 20px
}

.trip-image img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px
}

.trip-details {
    flex-grow: 1
}

.trip-title {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 0 5px 0;
    color: var(--black-color)
}

.trip-date {
    font-size: .9em;
    color: #777;
    margin: 0
}

.trip-action {
    flex-shrink: 0;
    margin-left: auto
}

.mytrips .btn-effect-2 {
    min-width: 80px;
    letter-spacing: 2px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600
}


.input-field {
    height: 57px!important;
    padding-bottom: 0 !important;
}