@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #1c2733;
    font-family: 'Raleway', sans-serif;
}

.top-bar {
    background-color: #24122A;
    color: #fff;
    padding: 10px 0;
}

.text-mute {
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: left;
    color: white;

}

.text-mute a {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #6A5A72;
    text-decoration: none;


}

.btn-register {
    color: white;
    padding: 12px 24px;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid #6A5A72;
    font-size: 24px;
    font-weight: 500;
    line-height: 28.18px;
    text-align: center;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;


}

.next .nav-icons a {
    width: 52px;
    padding: 12px;
    border: 2px solid #6A5A72;
    border-radius: 8px;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;
}



.navbar-dark {
    background-color: #061217;
}

.navbar-nav .nav-link {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 18.78px;
    text-align: center;
}

.navbar-nav .nav-link img {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.navbar-toggler {
    border-color: #6A5A72;
}

.navbar-toggler-icon {
    background-color: #6A5A72;
}

.custom-offcanvas {
    background-color: #061217;
    /* or your desired shade */
    color: white;
    /* Ensure text is readable */
}

/* hobba zone section */
.image-container {
    max-width: 100%;
}

.image-container img {
    max-width: 100%;
    height: auto;
    max-height: 289px;
}


.button-group .btn {
    background-color: #0B0B13;
}

.team-buttons {
    background-image: url(../images/btn-team.png);
    background-size: cover;
    background-position: center;
    border: 2px solid #55425E;
}

.nav-tabs .nav-link.active {
    border-color: #F68500 !important;
    background-color: #0B0B13 !important;
    color: white !important;
    /* Change border color of active tab */
}

.team-buttons .btn {
    padding: 10px 20px;
    border: 2px solid #55425E;
    color: #fff;
    width: 260px;
    padding: 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    background-color: #0B0B13;


}


/* Hide scrollbar for WebKit browsers */
#navbarScroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for all browsers */
#navbarScroll {
    scrollbar-width: none;
}

/* Initially hide the scroll button */
#scrollRightButton {
    display: none;
}

.button-group .btn {
    padding: 24px;
    border: 2px solid #55425E;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
}

/* Alpha section */

.alpha-container {
    padding: 48px 24px;
    border: 2px solid #6A5A72;
}

.alpha-content h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 37.57px;
    text-align: center;
}

.alpha-content p {
    max-width: 870px;
    font-size: 24px;
    font-weight: 500;
    line-height: 28.18px;
    text-align: center;
}

.alpha-content p a {
    text-decoration: underline;
    text-decoration-color: #00b8d9;
}

.team-card {
    background-color: #061217;
    color: #fff;
    text-align: center;
    border-radius: 0;
    padding: 16px;
    border: 2px solid #55425E;
}

.team-card .team-card-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    /* margin-right: 20px; */
}

.team-content h6 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: left;
    margin: 0;
}

.team-content p {
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: left;
    margin: 0;
}

@media (max-width: 575.98px) {
    .team-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .team-card img {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .team-content h6,
    .team-content p {
        text-align: center;
    }
}


/* start Main GoodBye Section */

.card-main-goodbye {
    background-color: #2d2f36;
    border: 2px solid #55425E;
}

.card-main-goodbye h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 2px solid #55425E;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;
}

.main-goodbye-content {
    background-color: #14161a;
    padding: 20px;
    text-align: center;
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
}

.main-goodbye-content p {
    font-size: 20px;
    font-weight: 700;
    line-height: 23.48px;
    text-align: center;
    color: white;
    max-width: 533px;
    margin: auto;
}

.main-goodbye-content .btn-custom {
    padding: 16px 30px;
    border: 2px solid #6A5A72;
    color: white;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.18px;
    text-align: left;
}

.btn-custom:hover {
    background-color: white;
    color: black;
}

.main-goodbye-footer {
    background-color: #061217;
    border-top: 2px solid #55425E;
}

.footer-icons img {
    max-width: 20px;
    height: auto;
}

.main-goodbye-footer p {
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: center;
}

.main-goodbye-footer p img {
    margin-right: 10px;
}

.recent-news-heading {
    border: 2px solid #55425E;
}

.recent-news-heading h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: left;
    color: white;
    margin: 0;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;
}

.news-item {
    padding: 20px;
    border: 2px solid #55425E;
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
}
.recent-news-image{
    width: 72px;
    height: 72px;
}


.news-item .news-item-content .content {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.13px;
    text-align: center;
    color: white;
}

.news-image-content {
    font-size: 12px;
    font-weight: 700;
    line-height: 14.09px;
    color: white;
}

.news-item-content .resign {
    font-size: 14px;
    font-weight: 500;
    line-height: 16.44px;
    text-align: center;
    color: white;
}

.news-item-content .date {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.09px;
    text-align: center;
    color: white;
}


/* Comment section */
.comment-section h5 {
    padding: 15px;
    border: 2px solid #55425E;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;
}

.comment-inputs label {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: left;
    color: white;
}

.comment-inputs textarea {
    background-color: #061217;
    padding: 24px;
    border: 2px solid #6A5A72;
    border-radius: 0;
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
}

textarea::placeholder {
    color: white !important;
}

#comment {
    background-color: #061217;
    color: white;
}

/* Change background color when the textarea is focused */
#comment:focus {
    background-color: #061217;
    border-color: #ced4da;
    outline: none;
    color: white;
}

.comment-section button {
    padding: 15px 0;
    background-color: #55425E;
    border: 2px solid #55425E;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border-radius: 0;
    width: 100%;
}

.btn-custom {
    transition: background-color 0.3s, color 0.3s;
}

.btn-custom:hover {
    background-color: white;
    color: black;
}

/* END Main GoodBye Section */

/* start Profile section */
.profile-section .row {
    height: 100%;
}

.profile-imageContainer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.profile-imageContainer>img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.profile-content {
    border: 2px solid #55425E;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.profile-content h4 {
    border-bottom: 2px solid #55425E;
    font-size: 28px;
    font-weight: 700;
    line-height: 32.87px;
    text-align: center;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;
}

.profile-content-center {
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
    flex: 1;
}

.profile-content-center .profile-image  {
    width: 36.57px;
    height: 36.57px;
    overflow: hidden;
}

.profile-content-center div button {
    width: 42.67px;
    height: 23.75px;
}

.profile-content-center>button {
    border: 2px solid #6A5A72;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.18px;
    text-align: center;
    background-color: transparent;
    width: auto;
}

.profile-content-center>p {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.44px;
    text-align: center;
    color: white;
}

.profile-content>p {
    border-top: 2px solid #55425E;
    font-size: 16px;
    font-weight: 600;
    line-height: 18.78px;
    text-align: center;
    color: white;
    background-color: #0B0B13;
}

.toggle-btn {
    background-color: #333;
    border: none;
    border-radius: 20px;
    width: 60px;
    height: 30px;
    position: relative;
    cursor: pointer;
}

.toggle-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle-btn.active:before {
    left: 35px;
}

/* Media Queries for further customization */
@media (max-width: 767px) {


    .profile-content h4 {
        font-size: 24px;
    }

    .profile-content>p {
        font-size: 14px;
    }
}

/* End Profile Section */

/* Start News Section */

.news-section-title {
    padding: 16px;
    border: 1px solid #695971;
    font-size: 32px;
    font-weight: 700;
    line-height: 37.57px;
    text-align: left;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;

}

.news-card-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    border: 2px solid #55425E;
    color: white;
    border-radius: 4px;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;
}

.writter-detail {
    border: 2px solid #55425E;
    color: white;
    border-radius: 4px;
    background-color: #061217;
}

.news-card-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: center;
}


.Gymkhana-card h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border: 1px solid #55425E;
    border-bottom: 0;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;


}

.custom-bg {
    background-color: #061217;
}

.custom-bg thead tr th {
    background-image: url(../images/profilebg.png);
    background-size: object-fit;
    background-position: center;
    color: white;

}

.custom-bg th,
.custom-bg td {
    background-color: #061217;
    color: white;
}


.table-dark thead tr {
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;
}

.table-dark thead tr th {
    font-size: 20px;
    font-weight: 700;
    line-height: 23.48px;
    text-align: left;
    color: white;

}

.table-dark tbody tr th {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: left;
    color: white;


}

.table-image {
    width: 32px;
    height: 32px;
    border: 1px solid #6A5A72;
}

.table-dark tbody tr td {
    font-size: 16px;
    font-weight: 700;
    line-height: 18.78px;
    text-align: left;

}

.table-bordered {
    border-color: #55425E;
}

.movement-card-body h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border: 1px solid #55425E;
    border-bottom: none;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;

}

.list-group-flush {

    border: 1px solid #55425E;
    border-top: 0;
    background-color: #061217;

}

.list-group-flush .list-group-image {
    width: 42px !important;
    height: 42px;
    border: 1px solid #6A5A72;
    border-radius: 4px;
}

.list-group-flush li {
    font-size: 16px;
    font-weight: 700;
    line-height: 18.78px;
    text-align: left;
    color: white;
    border-top: 1px solid #55425E;
    border-bottom: 0;
    padding: 12px 0;
}

.sell {
    font-size: 20px;
    font-weight: 600;
    line-height: 23.48px;
    padding: 14px 0;

}

@media (max-width: 576px) {

    .news-card-title,
    .section-title {
        font-size: 20px;
    }

    .news-card-text,
    .list-group-flush li {
        font-size: 14px;
    }
}


/* End News Section */

/* Start upcoming Event */

.event-card-header h5 {
    padding: 16px;
    border: 1px solid #695971;
    font-size: 32px;
    font-weight: 700;
    line-height: 37.57px;
    text-align: left;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;


}

.event-card-body {
    border: 2px solid #55425E;

}

.event-card-body h4 {
    padding: 15px;
    border-bottom: 2px solid #55425E;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;
}

.event-card-body>.event-card-body-content {
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
}

.event-card-body h5 {
    font-size: 28px;
    font-weight: 700;
    line-height: 32.87px;
    text-align: center;
    color: white;

}

.event-card-body p {
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: center;
    color: white;

}

.event-card-body .timer {
    background-color: #061217;
}

.highlight {
    background-color: #FFC107;
    border-radius: 5px;
}

.card-header {
    background-color: #1f2235;
    text-align: center;
}

.timer {
    border-top: 2px solid #55425E;

}

.timer div {
    text-align: center;
    border-right: 2px solid #55425E;

}

.timer div:last-child {
    border-right: 0;
}

.timer div h6 {
    font-size: 20px;
    font-weight: 700;
    line-height: 23.48px;
    text-align: center;
    color: white;
    padding: 10px auto;
}

.event-type-card {
    border: 2px solid #55425E;

}

.value-box-content {
    font-size: 16px;
    font-weight: 700;
    line-height: 18.78px;
    text-align: left;
    color: white;
}

.event-type-card-header h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border-bottom: 2px solid #55425E;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;
}

.event-type-card-body {
    background-image: url(../images/profilebg.png);
    background-size: object-fit;
    background-position: center;

}

.value-box {
    padding: 10px;
    background-color: #44465a;
    border-radius: 12px;
    height: 81px;
}

.value-box-4 {
    background-color: #8F5D82;
}

.value-box.highlight {
    background-color: #D1B000;
}

.value-box.purple {
    background-color: #C0C0C0;
}

.value-box.orange {
    background-color: #CD7F32;
}

.value-box.grey {
    background-color: #8F5D82;
}

/* End upcoming Event */

/* start recent-news-section */
.recent-news-part-1 h2 {
    padding: 16px;
    border: 1px solid #695971;
    font-size: 32px;
    font-weight: 700;
    line-height: 37.57px;
    text-align: start;
    color: white;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: stretch;

}

.recent-news-card {
    border: 2px solid #55425E;
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
}

.recent-image {
    width: 100px;
    height: 100px;
    /* object-fit: cover; */
}

.recent-news-content h5 {
    font-size: 20px;
    font-weight: 700;
    line-height: 23.48px;
    text-align: center;
    color: white;
}

.recent-news-content .first-p {
    font-size: 16px;
    font-weight: 500;
    line-height: 18.78px;
    text-align: center;
    color: white;
}



.recent-news-content>button {
    border: 2px solid #6A5A72;
    font-size: 20px;
    font-weight: 600;
    line-height: 23.48px;
    text-align: center;
    margin: auto;
    color: white;
    background-color: transparent;
}


.recent-news-content .second-p {
    font-size: 20px;
    font-weight: 400;
    line-height: 23.48px;
    text-align: center;
    color: white;
}

.avatar-image {
    font-size: 20px;
    font-weight: 700;
    line-height: 23.48px;
}

@media (max-width: 576px) {
    .recent-image{
        width: 70px;
        height: 70px;
        flex-shrink: 0
    }
    .recent-news-content h5{
        font-size: 16px;
    }
    .recent-news-content .first-p{
        font-size: 12px;
    }
    .recent-news-content>button{
        font-size: 16px;
    }
    .recent-news-content .second-p{
        font-size: 16px;
    }
    .avatar-image p{
        font-size: 14px;
    }
}
@media (max-width: 576px){
    .recent-image{
        width: 50px;
        height: 50px;
    }
}


/* end recent-news-section */

/* start get-badgets */
.get-badgets {
    border: 2px solid #55425E;
}

.get-badgets .section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    color: white;
    border-bottom: 2px solid #55425E;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;

}

.get-badgets>.row {
    background-image: url(../images/profilebg.png);
    background-size: object-fit;
    background-position: center;

}

.badge-item {
    width: 85px;
    height: 85px;
    padding: 8px;
}

.get-badgets-footer {
    font-size: 24px;
    font-weight: 600;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border-top: 2px solid #55425E;
    background-color: #061217;
}

.registered-Badges {
    border: 2px solid #55425E;

}

.registered-Badges h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    border-bottom: 2px solid #55425E;
    background-image: url(../images/bg2.png);
    background-size: cover;
    background-position: center;

}

.latest-badges {
    background-image: url(../images/profilebg.png);
    background-size: object-fit;
    background-position: center;
}

.latest-badge-card {
    border: 2px solid #55425E;
    background-color: #061217;

}
.latest-badge-card-image{
    width: 60px;
    height: 60px;
    border-radius: 12px;
}
.latest-badge--date {
    font-size: 10px;
    font-weight: 500;
    line-height: 11.74px;
    text-align: left;
    color: white;
}

.latest-badge-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 18.78px;
    text-align: left;
    color: white;

}

.latest-badge-company {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.09px;
    text-align: left;
    color: white;
}

.latest-badges-sell {
    font-size: 24px;
    font-weight: 600;
    line-height: 28.18px;
    color: white;
    border-top: 2px solid #55425E;
    background-color: #061217;
}

/* end get-badgets */
/* start social network */
.social-card {
    border: 2px solid #55425E;
    background-image: url(../images/profilebg.png);
    background-size: object-fit;
    background-position: center;
}

.social-card h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    color: white;
    border-bottom: 2px solid #55425E;
    background-image: url(../images/bg2.png);
    background-size: object-fit;
    background-position: center;

}

.social-card-body {
    border: 2px solid #55425E;
    background-color: #061217;


}

.social-card-body-1 img {
    width: 48px;
    height: 48px;
}

.social-card-body-2 button {
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #55425E;
    outline: none;
    border: none;


}

.follow-btn,
.signin-btn {
    margin-top: 10px;
}

/* end social network */

/* Footer */
footer {
    background-image: url(../images/profilebg.png);
    background-size: cover;
    background-position: center;
    padding: 20px 0;
}

footer p {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: center;
    color: white;
    margin: 0;
}

@media (max-width: 576px) {
    footer p {
        font-size: 20px;
    }
}

@media (max-width: 500px){
    .recent-news-image{
        width: 50px;
        height: 50px;
    }
    .news-item .news-item-content .content{
        font-size: 14px;
    }
    .news-item-content .resign{
        font-size: 12px;
    }
    .news-item-content .date{
        font-size: 10px;
    }

}