@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


.image-preview-section {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.image-preview {
    position: relative;
    width: 150px;
    height: 100px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview .remove-btn,
.image-preview .set-cover-btn {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.image-preview .remove-btn {
    top: 5px;
    right: 5px;
}

.image-preview .set-cover-btn {
    top: 5px;
    left: 5px;
}

.cover-image-label {
    position: absolute;
    top: 5px;
    left: 35px;
    background-color: rgba(255, 215, 0, 0.8);
    color: black;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 3px;
}

.edit-icon {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.profile-photo-header:hover .edit-icon {
    display: flex;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    width: 90%;
    max-width: 500px;
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.popup-footer {
    margin-top: 20px;
}
/* Banner üzerine gelindiğinde Kaydetme ikonu görünür */
.profile-header-infos-banner:hover .edit-icon {
    display: flex; /* Hover'da görünür yap */
}

.edit-icon {
    display: none; /* İlk başta görünmez */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; /* Üstte olması için */
    cursor: pointer;
    align-items: center;
    justify-content: center;
}



* {
    font-family: 'Red Hat Display', serif;
    margin: 0;
    padding: 0;
}

body.no-scroll {
    overflow: hidden;
}

/* NAVBAR */

.nav {
    padding-top: 15px;
    display: flex;
    align-items: center;
}

.nav-profile {
    display: flex;
}

.nav-profile-car {
    display: flex;
}

.nav-search-button {
    background: #FF4605;
    border: none;
    color: #FFFFFF;
    padding: 10px 26px;
    border-radius: 44px;
    font-size: 16px;
}

.nav-search {
    border: 1px solid #EEEEEE;
    padding: 4px 6px 4px 24px;
    border-radius: 44px;
    display: flex;
    justify-content: space-between;
}

.nav-seach-input {
    border: none;
    outline: none;
    width: 80%;
    border-radius: 44px;
    font-size: 16px;
}

.nav-seach-input::placeholder {
    color: #22273260;
}

.nav-register-text {
    color: #222732;
    font-size: 16px;
    text-decoration: none;
    margin-right: 10px;
    padding-left: 10px;
}

.nav-register-text:first-child {
    padding-left: 0px;
    padding-right: 20px;
}

.nav-register {
    display: flex;
    align-items: center;
}

.nav-register-col {
    width: 1px;
    height: 15px;
    background: #50514F20;
}

.nav-profile-icon {
    color: #222732;
    padding-right: 20px;

    font-size: 16px;
}

.nav-profile {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
}

.nav-profile-car {
    border: 1px solid #FF4605;
    margin-left: 20px;
    border-radius: 7px;
    text-decoration: none;
    padding: 14px 30px;
}

.nav-profile-car-text,
.nav-profile-car-icon {
    color: #FF4605;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
}

.nav-profile-car-icon {
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
}

.nav-profile-car-icon i {
    font-size: 16px !important;
}

.nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.nav-ul {
    display: flex;
    list-style-type: none;
}

.nav-a {
    color: #222732;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}

.nav-li {
    margin-right: 30px;
    padding-right: 30px;
    border-right: 1px solid #50514F20;
}

.nav-li:last-child {
    border-right: none;
}

.nav-a.active {
    color: #FF4605;
}

/* FOOTER */

.footer {
    background: #222732;
    padding-top: 135px;
}

.footer-ul {
    list-style-type: none;
    padding: 0px;
    margin-bottom: 90px;
}

.footer-title {
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 500;
}

.footer-a {
    color: #B3B3B3;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 25px;
}

.footer-li {
    margin-bottom: 15px;
}

.footer .col-2:last-child {
    margin-right: 0px;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.footer-img {
    display: flex;
    height: 100%;
    align-items: center;
}

.footer-links>a {
    color: #B3B3B3;
    font-size: 15px;
    text-decoration: none;
    margin-left: 25px;
}

.footer-phones {
    display: flex;
    justify-content: center;
}

.footer-phone {
    display: flex;
    align-items: center;
    margin: 0 40px;
}

.footer-phone-icon {
    height: 100%;
    padding: 0 8px;
    border-right: 1px solid #FFFFFF20;
}

.footer-phone-icon i {
    font-size: 26px;
    margin-right: 5px;
    color: #1F67D3;
}

.footer-phone-content h3 {
    color: #B3B3B3;
    font-size: 14px;
    margin-bottom: 5px;
}

.footer-phone-number {
    color: #1F67D3;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

.footer-phone-content {
    padding-left: 12px;
}

.footer-bottom {
    padding-bottom: 35px;
    border-bottom: 1px solid #FFFFFF05;
}

.footer-copyright {
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 40px;
}

.footer-copyright span {
    color: #1F67D3;
    margin-left: 4px;
}

.footer-creator {
    text-align: center;
    margin-top: 20px;
    color: #FFFFFF20;
    margin-bottom: 0px;
}

.footer-social-media {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    margin-right: 40px;
}

.footer-social-media a {
    color: #1F67D3;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 1px solid #FFFFFF20;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}


/* Register - Login Section */

.login-section {
    width: 50%;
    position: relative;
    background: #F2F5FB;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.login-header {
    margin-top: 60px;
    width: 54%;
    text-align: start;
}

.login-title {
    font-size: 28px;
    color: #222732;
    font-weight: bold;
}

.login-text {
    font-size: 15px;
    color: #222732;
}

.login-input,
.login-select {
    width: 100%;
    font-size: 15px;
    margin-bottom: 12px;
    color: #2F3B48;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 300;
    border: 1px solid #EEEEEE;
}

.login-input:focus,
.login-select:focus {
    outline: none;
}

.login-select {
    font-weight: 400;
}

.login-input::placeholder {
    color: #2F3B48;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
}

.login-button {
    background: #FF4605;
    border: none;
    color: #FFFFFF;
    padding: 10px 26px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 40px;
}

.register-button {
    background: #FF4605;
    border: none;
    color: #FFFFFF;
    padding: 10px 45px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 40px;
}

.login-forgot {
    color: #2F3B48;
    font-size: 13px;
}

.login-remember {
    font-weight: 600;
    color: #2F3B48;
    font-weight: 14px;
    margin-left: 7px;
}

.section-register {
    display: flex;
}

.register-section {
    width: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.login-content {
    width: 54%;
}

.login-policy {
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
    color: #222732;
}

.login-policy a {
    color: #1F67D3;
    text-decoration: none;
}

.social-register {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.social-register>p {
    font-weight: bold;
    color: #222732;
    margin-bottom: 0px;
    font-size: 13px;
}

.social-register-box {
    display: flex;
    align-items: center;
    border: 1px solid #E7EDF3;
    border-radius: 5px;
    margin-left: 20px;
    padding: 10px;
}

.social-register-box p {
    font-size: 13px;
    color: #222732;
    margin-left: 10px;
    margin-bottom: 0px;
}

.social-and-normal {
    color: #222732;
    font-size: 16px;
    margin-bottom: 20px;
}

/* Verify Popup */

.popup-verify {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: rgba(34, 39, 50, 0.3);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    display: none;
    justify-content: center;
}

.popup-box {
    background: #FFFFFF;
    padding: 45px 80px;
    border-radius: 10px;
    width: 50%;
    animation: slideUp 0.5s forwards;
}

/* Fade-in animasyonu */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide-up animasyonu */
@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.popup-title {
    display: flex;
    align-items: center;
}

.popup-icon {
    background: #FF4605;
    border-radius: 100%;
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    margin-right: 10px;
}

.popup-icon i {
    font-size: 20px;
}

.popup-title-text {
    font-size: 28px;
    color: #222732;
    margin-bottom: 0px;
    font-weight: bold;
}

.popup-text {
    font-weight: 300;
    font-size: 14px;
    color: #222732;
}

.input-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.input-label>p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 300;
}

.popup-footer {
    display: flex;
    margin-top: 10px;
    align-items: center;
}

.newCode {
    color: #222732;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 0px;
    margin-left: 10px;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.form-container {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.form-container.active {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.form-container.slide-left {
    left: -100%;
    opacity: 0;
    visibility: hidden;
}

.form-container.slide-right {
    left: 100%;
    opacity: 0;
    visibility: hidden;
}


/*  Breadcrumb */

.breadcrumb {
    background: #FAFAFA;
    padding: 60px 170px;
    display: flex;
    margin: 0;
    flex-direction: column;
    justify-content: center;
}

.breadcrumb-page {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.breadcrumb-a {
    color: #222732;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    padding-right: 15px;
    margin-bottom: 0px;
}

.breadcrumb-a::after {
    content: '>';
    margin-left: 15px;
    color: #22273240;
}

.breadcrumb-span {
    color: #22273260;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    padding-right: 15px;
    margin-bottom: 0px;
}

.current-page {
    color: #222732;
    margin-bottom: 0px;
    font-size: 45px;
    font-weight: 700;
}

/* 404 Page */

.notFound {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 120px;
}

.notFound-text {
    font-size: 150px;
    font-weight: bold;
    color: #FF4605;
    margin-bottom: 0px;
}

.notFound-title {
    font-size: 32px;
    font-weight: bold;
}

.notFound-mini-text {
    color: #222732;
    font-size: 16px;
    margin-bottom: 25px;
}

.notFound-search {
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #F5F7FF;
    border-radius: 10px;
}

.notFound-search-input {
    border: none;
    outline: none;
    padding: 5px;
    font-size: 14px;
    background: transparent;
}

.notFound-search-button {
    background: transparent;
    color: #1F67D3;
    border: none;
    cursor: pointer;
}

/* Help Center */

.boxHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: #222732;
    border: 1px solid #B3B3B3;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 300ms;
}

.boxHeader i {
    color: #FF4605;
    transition: 300ms;
}

.boxHeaderTitle {
    font-size: 16px;
    font-weight: medium;
    margin-bottom: 0;
}

.helpCenterBox.active i {
    rotate: 180deg;
    transition: 300ms;
    color: #FFFFFF;
}

.helpCenterBox.active .boxHeader {
    border: none;
    background: #FF4605;
    transition: 300ms;
    color: #FFFFFF;
}

.boxContent {
    transition: 300ms;
    display: none;
    padding: 0 20px;
}

.helpCenterBox {
    margin-bottom: 20px;
}

.helpCenterBox.active .boxContent {
    display: block;
    transition: 300ms;
}

.helpCenterBoxes {
    padding: 40px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
}

.helpCenterAd {
    width: 100%;
    height: 100%;
}

.contactUsBox {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 35px 30px;
    display: flex;
}

.contactUsIcon {
    color: #1F67D3;
    font-size: 30px;
    margin-right: 20px;
}

.contactUsTitle {
    font-size: 20px;
    font-weight: bold;
    color: #222732;
}

.contactUsText {
    font-size: 14px;
    color: #222732;
}

.contactUsA {
    color: #1F67D3;
    text-decoration: none;
}

.contactUsA i {
    margin-left: 5px;
}

/* Contact */

.contactInfosBox,
.contact-form-box {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 45px;
}

.contactInfosTitle,
.contact-form-title {
    font-weight: bold;
    font-size: 28px;
    color: #222732;
}

.contactInfosText,
.contact-form-text {
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 25px;
}

.contactInfo {
    display: flex;
    align-items: center;
}

.contactInfoText p {
    font-size: 16px;
    color: #222732;
    margin-bottom: 0px;
}

.contactInfoIcon i {
    color: #FF4605;
    margin-right: 10px;
    font-size: 24px;
}

.contactInfo {
    margin-bottom: 20px;
}

.contactSocials {
    display: flex;
    margin-top: 20px;
}

.contactSocials a {
    margin-right: 10px;
    font-size: 18px;
    color: #222732;
}

.contact-input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    margin-bottom: 10px;
    color: #222732;
}

/* Policy Section */

.policy-section {
    margin-top: 40px;
}

.last-update {
    font-size: 14px;
    color: #FF4605;
    font-weight: 600;
    margin-bottom: 15px;
}

.policy-title {
    font-size: 30px;
    color: #222732;
    margin-bottom: 14px;
}

/* About */

.about-section {
    margin-top: 70px;
}

.about-title {
    font-size: 24px;
    color: #222732;
    font-weight: 400;
}

.about-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    flex-direction: column;
}

.about-title-text {
    font-size: 38px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 35px;
}

.about-mini-text {
    font-size: 15px;
    width: 80%;
    color: #222732;
    text-align: center;
}

.about-content-title,
.about-content-text {
    font-size: 15.5px;
    color: #222732;
    font-weight: 300;
}

.about-content-title {
    font-weight: bold;
}

.about-content-text-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.about-content {
    margin-bottom: 60px;
}

.about-features {
    display: flex;
}

.about-footer {
    margin-bottom: 60px;
}

.about-features-icon i {
    color: #FFFFFF;
    width: 45px;
    height: 45px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1F67D3;
    border-radius: 100%;
}

.about-features-icon {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: 100%;
    border: 1px solid #1F67D3;
    margin-right: 15px;
}

.about-features-title {
    font-size: 17px;
    font-weight: 500;
    color: #222732;
    margin-bottom: 9px;
}

.about-features-text {
    font-size: 15px;
    font-weight: 400;
    color: #222732;
    margin-bottom: 0px;
}

.about-infos {
    background: url(../img/aboutCar.svg);
    background-size: cover;
    border-radius: 20px;
    margin: 0 35px;
    padding: 50px 0;
    margin-bottom: 60px;
}

.about-info-title {
    font-size: 17px;
    color: #FFFFFF;
}

.about-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-info-footer i {
    font-size: 30px;
    margin-right: 15px;
    color: #FFFFFF;
}

.about-info-footer {
    display: flex;
    align-items: center;
}

.about-info-text {
    font-size: 38px;
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 0px;
}

.about-about-info {
    display: flex;
    align-items: center;
}

.about-about-info::after {
    width: 1px;
    display: inline-block;
    height: 25px;
    content: "";
    border-right: 1px solid #FFFFFF;
}

.about-about-info:last-child {
    border: none;
}

.about-story-title {
    font-size: 15.4px;
    font-weight: bold;
    text-align: center;
    color: #FF4605;
}

.about-story-text {
    font-weight: bold;
    font-size: 35px;
    color: #222732;
    text-align: center;
    margin-bottom: 40px;
}

.number-circle {
    width: 50px;
    height: 50px;
    background: #FF4605;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
}

.timeline-content h3 {
    font-size: 18px;
    color: #222732;
    font-weight: bold;
}

.timeline-content p {
    font-size: 15px;
    font-weight: 300;
}

.timeline-content {
    border-radius: 22.2px;
    padding: 35px 40px;
    width: 40%;
    margin: 0 20px;
    background-color: #FF460511;
}

.timeline-section {
    position: relative;
    margin: 0 auto;
}

.timeline-section::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #DEDEDE;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.timeline-item {
    display: flex;

}

/* Index */

.project-car {
    background: #CEE5F570;
    margin: 35px;
    padding: 40px 35px;
    border-radius: 22px;
}

.project-title {
    font-size: 32px;
    margin-bottom: 0;
    font-weight: bold;
    color: #222732;
}

.project-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.project-button {
    text-decoration: none;
    color: #FFFFFF;
    background: #FF4605;
    padding: 10px 20px;
    margin-bottom: 0px;
    border-radius: 5px;
}

.listing-item-header {
    position: relative;
    border-radius: 10px 10px 0 0;
}

.listing-item-icons {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 15px;
}


.listing-item.large>.listing-item-header {
    width: 100%;
    height: 500px;
}

.listing-item.large {
    width: 100%;
}

.listing-item-icon-gallery {
    display: flex;
    color: #FFFFFF;
    align-items: center;
}

.listing-item-icon-gallery p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

.listing-item-icon-star {
    color: #FFFFFF;
}

.listing-item-footer {
    background: #FFFFFF;
    padding: 25px 30px;
    border-radius: 0 0 20px 20px;
}

.listing-item-name {
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 0px;
    padding-bottom: 14px;
    border-bottom: 1px solid #22273220;
}

.listing-item-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
}

.listing-item-ul>li {
    font-size: 14px;
    font-weight: 400;
    color: #222732;
    margin-bottom: 0px;
}

.listing-item-ul>li:last-child {
    background: #FF4605;
    padding: 2px 8px;
    border-radius: 5px;
    color: #fff;
}

.listing-item.small {
    width: 100%;
}

.listing-item.small>.listing-item-header {
    width: 100%;
    height: 185px;
}

.listing-item.small .listing-item-name {
    font-size: 16px;
}

.listing-item-ad {
    width: 100%;
    border-radius: 10px;
}

.listing-item-ad img {
    width: 100%;
}

.featured-listings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns */
    grid-gap: 15px;
    /* gap between items */
}

.listing-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Make the first item span multiple columns and rows */
.listing-1 {
    grid-column: span 2;
    grid-row: span 2;
}

/* Adjust other items */
.listing-2,
.listing-3,
.listing-4,
.listing-5 {
    grid-column: span 1;
    grid-row: span 1;
}

.herd-section-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #FF4605;
    margin-bottom: 0px;
    margin-top: 50px;
}

.hero-section-text {
    font-size: 68px;
    font-weight: bold;
    text-align: center;
    color: #222732;
    margin-bottom: 40px;
}

.car-groups {
    background: #D7F0EA70;
    border-radius: 22px;
    margin: 35px;
    padding: 40px 35px;
}

.car-groups-title {
    font-size: 45px;
    font-weight: bold;
    color: #222732;
}

.car-groups-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.car-groups-boxes {
    display: flex;
}

.car-groups-box-title {
    font-size: 16px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 0;
}

.car-groups-box-text {
    font-size: 14px;
    font-weight: 300;
    color: #222732;
    margin-bottom: 0px;
}

.car-group-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #FFF;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 10px;
    margin-right: 15px;
}

.car-group-box.active {
    background: #FFF0EB;
    border: 1px solid #FF4605;
}

.car-group-box.active .car-groups-box-text,
.car-group-box.active .car-groups-box-title {
    color: #FF4605;
}

.car-groups-header {
    margin-bottom: 40px;
}

.car-group-header {
    position: relative;
    border-radius: 10px 10px 0 0;
    width: 100%;
    padding: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 180px;
}

.car-group-button {
    position: absolute;
    right: 15px;
    border: none;
    outline: none;
    background: #DCEAFF;
    color: #1F67D3;
    padding: 5px 12px;
    border-radius: 5px;
}

.car-group-content {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 0 0 10px 10px;
}

.car-group-title {
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #22273220;
}

.car-group-users {
    display: flex;
}

.car-group-user {
    margin-left: -15px;
}

.car-group-user:first-child {
    margin-left: 0;
}

.car-group-footer {
    display: flex;
    align-items: center;
}

.car-group-footer p {
    margin-left: 8px;
    font-size: 14px;
    color: #222732;
    margin-bottom: 0;
}

.car-groups-footer-button {
    width: 45px;
    height: 45px;
    background: #FFF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    margin-right: 7.5px;
}

.car-groups-footer-buttons {
    display: flex;
}

.car-groups-footer {
    margin-top: 20px;
}

.car-groups-footer-show button {
    background: #FF4605;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    padding: 12px 20px;
    border-radius: 5px;
}

.car-groups-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.community-section {
    background: url('../img/community.svg');
    padding: 40px 35px;
    border-radius: 22px;
    margin: 35px;
}

.community-header {
    position: relative;
    border-radius: 10px 10px 0 0;
    width: 100%;
    padding: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 180px;
}

.community-box.large .community-header {
    height: 260px;
}

.community-button {
    position: absolute;
    left: 15px;
    border: none;
    outline: none;
    font-size: 12px;
    font-weight: bold;
    background: #FF4605;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
}

.community-box-content {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 0 0 10px 10px;
}

.community-box-date {
    color: #6777A1;
    font-size: 13px;
    margin-bottom: 3px;
    font-weight: 300;
}

.community-box-title {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}


.community-box-footer {
    display: flex;
    align-items: center;
}

.community-box-footer p {
    margin-left: 6px;
    font-size: 12px;
    color: #222732;
    margin-bottom: 0;
    font-weight: bold;
}

.community-box-social {
    display: flex;
}

.community-box-like,
.community-box-comment {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.community-box-like p,
.community-box-comment p {
    margin-left: 6px;
    font-size: 12px;
    color: #222732;
    margin-bottom: 0;
}

.community-box-comment i,
.community-box-like i {
    color: #FF4605;
}

.community-box {
    margin-bottom: 35px;
}

.community-box-text {
    font-size: 15px;
    color: #45557D;
}

.community-box-content>span {
    padding-top: 10px;
    border-top: 1px solid #22273220;
}

.community-box.large {
    margin-bottom: 20px;
}

.news-section {
    background: #FFF;
    padding: 30px;
}

.community-box.news .community-box-content {
    padding: 25px 0;
}

.news-dot {
    height: 8px;
    width: 8px;
    background: #FF4605;
    border-radius: 100%;
}

.news-header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.news-header p {
    margin-bottom: 0;
    margin-left: 9px;
    font-size: 18px;
    font-weight: bold;
}

.events-box {
    background: #FFF;
    display: flex;
    border-radius: 11px;
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 11px 0 0 11px;
}

.event-date h3 {
    font-size: 45px;
    color: #FFF;
    margin-bottom: 0px;
}

.event-date p {
    color: #FFF;
}

.event-info h3 {
    font-size: 18px;
    margin-bottom: 0px;
    color: #222732;
}

.event-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
}

.event-info p {
    color: #222732;
    font-size: 14px;
}

.hero-section-img {
    display: flex;

    justify-content: center;
}

.hero-section-car-text {
    text-align: center;
    font-size: 225px;
    font-weight: bold;
    margin-bottom: -140px;
    background: linear-gradient(0deg, #22273290 9.7%, rgba(103, 119, 152, 0) 89.25%, rgba(103, 119, 152, 0) 89.25%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-section-select {
    display: flex;
    justify-content: center;
}

.hero-section-select select {
    width: 225px;
    margin-right: 20px;
    padding: 10px;
    border: none;
    outline: none;
    border-bottom: 1px solid #222732;
}

.hero-section-button {
    background: #1F67D3;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    width: 55px;
    font-size: 20px;
    height: 55px;
    border-radius: 100%;
}

/* ADD CAR */

.add-car-header {
    padding: 12px 0;
    border-bottom: 1px solid #22273230;
}

.add-car-header-text {
    font-size: 24px;
    color: #FF4605;
    font-weight: bold;
}

.add-car-header-logo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.add-car-photo {
    margin-top: 25px;
}

.add-car-photo-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.add-car-photo-title {
    font-size: 20px;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.add-car-photo-title>span {
    margin-left: 5px;
    margin-bottom: 0;
    color: #909090;
    font-size: 14px;
    font-weight: 300;
}

.add-car-photo-text {
    font-size: 14px;
    color: #222732;
    margin-bottom: 0;
    font-weight: 500;
}

.add-car-photo-text>i {
    color: #FF4605;
    margin-right: 5px;
}

.add-car-photo-box {
    background: #FF460510;
    border-radius: 8px;
    padding: 16px;
}

.add-car-photo-alt-box {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
}

.add-car-photo-file {
    width: 100%;
    border: 1px #FF4605 dashed;
    border-radius: 8px;
    padding: 26px 0;
    margin: auto;
}

.upload-area {
    text-align: center;
}

.upload-area label {
    cursor: pointer;
    display: inline-block;
    padding: 26px;
    width: 100%;
    border: 1px dashed #FF4605;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.upload-area label:hover {
    background-color: #f0f0f0;
}

.upload-area img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}

.upload-area p {
    font-size: 18px;
    font-weight: 600;
    color: #222732;
    margin-bottom: 0;
}

.upload-area i {
    font-size: 38px;
    color: #FF4605;
}

.upload-area small {
    font-size: 14px;
    color: #222732;
    font-weight: 500;
}

#file-input {
    display: none;
}


.add-car-detail {
    margin-top: 25px;
}

.add-car-detail-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.add-car-detail-title {
    font-size: 20px;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    font-weight: bold;
}

.add-car-detail-title>span {
    margin-right: 5px;
    color: #FF4605;
}

.add-car-detail-text {
    font-size: 14px;
    color: #222732;
    margin-bottom: 0;
    font-weight: 500;
}

.add-car-detail-text>i {
    color: #FF4605;
    margin-right: 5px;
}

.add-car-detail-box {
    background: #FF460510;
    border-radius: 8px;
    padding: 16px;
}

.add-car-detail-alt-box {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
}

.add-car-detail-file {
    width: 100%;
    border: 1px #FF4605 dashed;
    border-radius: 8px;
    padding: 26px 0;
    margin: auto;
}

.add-car-detail-box-header ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.add-car-detail-box-header li {
    color: #1F67D3;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
}

.add-car-detail-box-header li::after {
    content: '>';
    margin-left: 10px;
    color: #222732;
    font-weight: 500;
}

.add-car-detail-box-header li:last-child::after {
    content: '';
}

.add-car-detail-box-header {
    padding: 5px 0 15px 15px;
}

.add-car-detail-detail {
    padding: 10px 16px;
    margin-right: 16px;
    height: 300px;
    overflow-y: scroll;
    width: 25%;
    border-radius: 4px;
    border: 1px solid #F2F2F2;
}

.add-car-detail-detail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.add-car-detail-detail .option {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #222732;
}

.add-car-detail-detail .option.selected {
    color: #1F67D3;
    font-weight: bold;
}

.add-car-detail-boxes {
    display: flex;
}

.add-car-detail-footer {
    display: flex;
    margin: 25px 0;
    justify-content: space-between;
}

.add-car-detail-footer p {
    font-size: 14px;
    color: #808080;
    font-weight: 400;
}

.add-car-detail-footer button {
    background: #1F67D3;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 35px;
    border-radius: 10px;
    cursor: pointer;
}

.selected-car {
    margin-top: 40px;
}

.selected-car-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.selected-car-overview {
    width: 50%;
    border-right: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
}

.selected-car-logo {
    width: 64px;
    height: 64px;
    margin-right: 10px;
}

.selected-car-logo img {
    width: 100%;
}

.selected-car-overiview-detail p {
    font-size: 14px;
    color: #222732;
    margin-bottom: 0;
}

.selected-car-overiview-detail h3 {
    font-size: 14px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 0;
}

.selected-car-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.selected-car-details {
    display: flex;
    align-items: center;
}

.selected-car-details li {
    color: #222732;
    font-size: 14px;
    font-weight: 300;
    margin-right: 15px;
}

.selected-car-details li button {
    background: transparent;
    border: none;
    outline: none;
    color: #FF4605;
    font-weight: 500;
    font-size: 14px;
}

.add-car-features {
    margin-top: 40px;
}

.techniuqe-features-header {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 500;
    margin-right: 12px;
    color: #222732;
}

.techniuqe-features-line {
    width: 50px;
    height: 1px;
    margin-left: 10px;
    background: linear-gradient(90deg, #13141A 0%, rgba(19, 20, 26, 0) 100%);
}

.techniuqe-features-header {
    display: flex;
    align-items: center;
}

.techniuqe-features-box {
    background: #FF460510;
    border-radius: 8px;
    padding: 30px;
}

.modifiction-features-box {
    background: #1F67D310;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 25px;
}

.techniuqe-features-label {
    font-size: 15px;
    font-weight: 500;
    color: #222732;
    margin-right: 28px;
    margin-bottom: 0;
}

.techniuqe-features-input-box {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    width: 70%;
    align-items: center;
}

.techniuqe-features-input {
    background: #FFF;
    border-radius: 10px;
    padding: 8px 10px;
    width: 200px;
    border: 1px solid #22273220;
    color: #222732;
    font-size: 500;
    outline: none;
}

.techniuqe-features-subtitle {
    font-size: 15px;
    font-weight: bold;
    color: #1F67D3;
}

.modifiction-button {
    border: none;
    background: #1F67D3;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 5px;
}

.modifiction-features-input-box {
    display: flex;
    flex-direction: column;
}

.modifiction-features-box-inputs {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
}

.modifiction-features-input-box .techniuqe-features-input {
    width: 100%;
    margin-bottom: 0;
}

.modifiction-features-input-box {
    width: 28%;
    display: flex;
}

.turbo-features-input-box {
    width: 42%;
    display: flex;
    flex-direction: column;
}

.modifiction-features-header h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #FF4605;
    font-weight: bold;
}

.turbo-features-input {
    background: #FFF;
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid #22273220;
    color: #222732;
    font-size: 500;
    outline: none;
}

input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #222732;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="radio"]:checked::after {
    display: block;
}


input[type="radio"]::after {
    display: none;
    content: "\F26E";
    font-family: "bootstrap-icons";
    border-radius: 50%;
    transition: background-color 0.3s;
}

label {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
}

/* Buton stili */
.modifiction-button {
    padding: 10px 20px;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.modifiction-button:hover {
    background-color: #0056b3;
}

.out-modifiction-features-input-box {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.out-modifiction-features-box-inputs {
    display: flex;
    width: 100%;
    align-items: flex-end;
}

.in-modifiction-features-input-box {
    width: 85%;
    display: flex;
    flex-direction: column;
}

.add-car-features,
.selected-car {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}


.modifiction-button-box {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-top: 15px;
}

.nav-second .nav-a {
    font-size: 13px;
}

.current-page-subtitle {
    margin-top: 10px;
    color: #222732;
    font-size: 14px;
}

.current-page-share {
    color: #222732;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}

.current-page-share i {
    margin-right: 5px;
}

.current-page-subtitle i {
    margin-right: 5px;
    color: #FF4605;
}

.car-detail-show-box {
    background: #FF460510;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
}

.car-detail-show-box-basic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.car-detail-show-box-basic p {
    font-size: 15px;
    font-weight: bold;
    color: #FF4605;
    margin-bottom: 0;
}

.car-detail-show-box-basic h3 {
    font-size: 16px;
    color: #222732;
    font-weight: 400;
}

.car-detail-show-box-technic,
.car-detail-show-box-modification {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-right: 10px;
}

.car-detail-show-box-technic h3 {
    font-size: 15px;
    font-weight: bold;
    color: #FF4605;
}

.car-detail-show-box-modification h3 {
    font-size: 15px;
    font-weight: 400;
    color: #222732;
}

.car-detail-show-box-technic p,
.car-detail-show-box-modification p {
    font-size: 15px;
    font-weight: 500;
    color: #222732;
}

.car-detail-show-box-modification-out {
    display: flex;
}

.car-detail-show-box-modification-out p {
    margin-right: 15px;
    margin-bottom: 0;
}

.car-detail-show-box-repair {
    display: flex;
}

.car-detail-show-box-repair p {
    margin-right: 20px;
    margin-bottom: 0;
}

.car-detail-show-box-repair .date {
    font-weight: 300;
    color: #222732;
}

.car-gallery,
.car-gallery-continue,
.car-detail-show-section {
    margin-top: 30px;
}

.helpCenterAd {
    margin-bottom: 40px;
}

.modifiction-features-box-inputs {
    margin-bottom: 15px;
}


.profile-card {
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    overflow: hidden;
    margin-bottom: 25px;
}

.profile-image {
    position: relative;
}

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

.profile-pic {
    width: 150px !important;
    height: 150px;
    border-radius: 100%;
    border: 3px solid white;
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.profile-link {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #1F67D3;
    background: #FFF;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.profile-info {
    text-align: center;
    padding: 60px 20px 20px;
}

.profile-info h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

.profile-info p {
    color: #777;
    margin-bottom: 5px;
}

.profile-bio {
    font-size: 14px;
    margin-bottom: 20px !important;
}

.social-icons {
    margin-bottom: 20px;
}

.social-icons a {
    margin: 0 10px;
    color: #777;
    font-size: 20px;
}

.social-icons a:hover {
    color: #1F67D3;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.nav-links button {
    text-decoration: none;
    color: #FFF;
    background: #1F67D3;
    padding: 12px 30px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-weight: 500;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.nav-links a {
    text-decoration: none;
    color: #222732;
    font-size: 15px;
    font-weight: bold;
}


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

.events-header h3 {
    font-size: 24px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 0;
}

.events-header a {
    border: none;
    outline: none;
    background-color: #FF4605;
    color: #FFF;
    text-decoration: none;
    padding: 10px 35px;
    border-radius: 10px;
    font-size: 18px;
}

.car-filter-button {
    background-color: #FF4605;
    color: #FFF;
    border: none;
    width: 50%;
    outline: none;
    padding: 10px 35px;
    border-radius: 10px;
    font-size: 18px;
}

.hero-section-car {
    position: relative;
    display: flex;
    justify-content: center;
}

.slider-butonu {
    background-color: #FF4605;
    color: #FFF !important;
    border: none;
    text-decoration: none !important;
    width: 200px;
    text-align: center;
    outline: none;
    padding: 10px 35px;
    border-radius: 10px;
    font-size: 18px;
}

.profile-header-infos-banner {
    width: 100%;
    height: 240px;
}

.profile-header-infos-banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proile-infos-header-name {
    display: flex;
    align-items: center;
}

.proile-infos-header-name h3 {
    font-size: 24px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 0;
}

.proile-infos-header-name img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
}

.profile-infos-header p {
    font-size: 16px;
    font-weight: 300;
    color: #232323;
    margin-top: 5px;
    margin-bottom: 10px;
}

.profile-infos-header p span {
    font-weight: 600;
}

.profile-infos-header-social a {
    margin-right: 10px;
    text-decoration: none;
    font-size: 18px;
    background: #0056b3;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    width: 34px;
    height: 34px;
}

.profile-infos-header-social {
    display: flex;
}

.proile-photo-header {
    width: 170px;
    border-radius: 100%;
    height: 170px;
    margin-right: 15px;
}

.profile-header-infos-alt {
    display: flex;
    align-items: flex-end;
    margin-top: -40px;
}

.profile-info-box {
    margin-top: 50px;
}

.profile-info-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-info-box-header h3 {
    font-size: 24px;
    font-weight: bold;
    color: #222732;
}

.profile-info-box-message p {
    background: #FF4605;
    border-radius: 100%;
    margin: 0px;
    width: 15px;
    height: 15px;
    font-size: 10px;
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    color: #FFF;
}

.profile-info-box-message {
    display: flex;
    position: relative;
    cursor: pointer;
}

.profile-info-box-alt {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    display: flex;
    align-items: center;
    width: 100%;
}

.profile-info-box-alt ul {
    list-style-type: none;
    padding: 0;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.profile-info-box-alt li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.profile-info-box-alt li::after {
    content: '';
    width: 1px;
    height: 15px;
    background: #EEEEEE;
    margin-left: 25px;
}

.profile-info-box-alt li:last-child:after {
    content: '';
    width: 1px;
    height: 15px;
    background: transparent;
    margin-left: 0;
}

.profile-info-box-alt li p {
    font-size: 16px;
    font-weight: 600;
    color: #222732;
    margin-bottom: 0;
    margin-left: 15px;
}

.profile-info-box-alt li span {
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    color: #FF4605;
    margin-bottom: 0;
}

.profile-info-box-alt p {
    font-size: 15px;
    color: #232323;
    margin-bottom: 0;
}

.profile-cars-header h3 {
    font-size: 24px;
    font-weight: bold;
    color: #FF4605;
    margin: 50px 0 28px 0;
    text-align: center;
}

.rewards-section {
    padding: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
}

.rewards-header h3 {
    font-size: 18px;
    font-weight: bold;
    color: #FF4605;
    margin-bottom: 20px;
}

.message-members {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 10px;
    height: 850px;
    overflow-y: auto;
}

.search-member input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    margin-bottom: 20px;
    background: #EDF3FB;
}

.message-section {
    margin: 50px 0;
    position: relative;
}

.member {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 15px;
    width: 100%;
}

.member-pfp img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-right: 15px;
}

.member-name {
    display: flex;
    justify-content: space-between;
}

.member-name h3 {
    font-size: 15px;
    font-weight: bold;
    color: #232323;
    margin-bottom: 0;
}

.member-name p {
    font-size: 13px;
    font-weight: 300;
    color: #1F67D3;
    margin-bottom: 0;
}

.member-infos>p {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 300;
    color: #222732;
}

.member-infos {
    width: 100%;

}

.message-box-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
}

.message-box {
    padding: 15px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    position: relative;
    height: 850px;
}


.message-box-header p {
    font-size: 12px;
    font-weight: 400;
    color: #222732;
    font-weight: 300;
    margin-bottom: 0;
}

.message-box-header button {
    padding: 15px 45px;
    background: transparent;
    border: 1px solid #FF4605;
    outline: none;
    border-radius: 5px;
    color: #FF4605;
}

.message-box-left {
    display: flex;
}

.message-box-right {
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
}

.message-box-box-content {
    display: flex;
    align-items: center;
}

.message-box-box-content p {
    font-size: 15px;
    color: #232323;
    margin-right: 15px;
    margin-bottom: 0;

}

.message-box-box-content h3 {
    color: #9CA9CC;
    font-size: 12px;
    margin-bottom: 0;
    font-weight: medium;
}

.message-box-box-content {
    background: #F4F7FB;
    border-radius: 5px;
    padding: 8px;
}

.message-box-box>h3 {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
}

.message-box-pfp img {
    width: 40px;
    height: 40px;
    margin-right: 18px;
}

.message-box-pfp {
    display: flex;
    align-items: center;
}

.message-box-right .message-box-pfp img {
    margin-left: 15px;
    margin-right: 0;
}

.message-box-send input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    margin-bottom: 20px;
    background: transparent;
}

.message-box-send {
    display: flex;
    width: 95%;
    background: transparent;
    border: none;
    border-top: 1px solid #EEEEEE;
}


.message-box-send button i {
    color: #1F67D3;
}

.message-box-send button {
    background: transparent;
    border: none;
    outline: none;
    border-radius: 5px;
}

.message-box-send {
    position: absolute;
    bottom: 0;
}


.forum {
    margin-top: 35px;
}

.forum-search {
    padding: 30px 40px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    display: flex;
}

.forum-search input {
    padding: 10px 18px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    background: transparent;
    width: 100%;
}

.forum-search button {
    background: #1F67D3;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    border: none;
    outline: none;
    padding: 0 40px;
    border-radius: 5px;
    margin-left: 15px;
}

.forum-content {
    margin-top: 30px;
}

.forum-content-header p {
    font-size: 14px;
    font-weight: 400;
}

.forum-content-box-header {
    display: flex;
    background: rgba(31, 103, 211, 0.11);
    justify-content: space-between;
    padding: 20px 40px;
    border-radius: 5px 5px 0 0;
}

.forum-content-box-header p {
    font-size: 13px;
    font-weight: bold;
    color: #222732;
    margin-bottom: 0;
}

.forum-content-box {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
}

.forum-content-box-content {
    padding: 33px 38px;
    display: flex;
    position: relative;
    margin-bottom: 34px;
    border-bottom: 1px solid #EEEEEE;
}

.forum-content-box-content:last-of-type {
    border-bottom: none;
    margin-bottom: 0px;
}

.forum-content-box-content-infos span {
    font-weight: 400;
    font-size: 14px;
    color: #1F67D3;
    margin-bottom: 4px;
}

.forum-content-box-content-infos p,
.forum-content-box-content-infos a {
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    color: rgba(34, 39, 50, 1);
    margin-bottom: 4px;
}

.forum-content-box-content-infos h3,
.forum-footer h3,
.group-activities-section h3,
.forum-header-h3 {
    font-size: 20px;
    color: #232323;
    font-weight: bold;
    margin-bottom: 4px;
}

.forum-content-box-content-infos {
    margin-left: 25px;
    width: 100%;
}

.forum-content-box {
    margin-bottom: 40px;
}

.forum-message-number {
    position: absolute;
    right: 70px;
    margin-bottom: 0;
    color: rgba(31, 103, 211, 1);
}

.forum-content-box-content-infos>.message {
    background: #F4F4F4;
    padding: 10px 20px;
    border-radius: 5px;
}

.forum-tag {
    display: flex;
    flex-direction: column;
}

.forum-footer {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 30px 40px;
    margin-bottom: 40px;
}

.forum-tag label {
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 14px;
    color: rgba(34, 39, 50, 1);
}

.forum-tag input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccced1;
}

.forum-button button {
    background: #1F67D3;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 5px;
}

.forum-header-h3 i {
    width: 25px !important;
    height: 25px !important;
    padding: 5px 8px;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 100%;
    background-color: #FF4605;
    color: #FFF;
}

.group-header ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.group-header a.active {
    color: #FF4605;
}

.group-header a {
    color: #232323;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    margin-right: 10px;
}

.group-about-section p {
    font-size: 14px;
    color: rgba(34, 39, 50, 1);
    margin-bottom: 25px;
}

.group-about-section h3 {
    font-size: 15px;
    color: #232323;
    font-weight: bold;
    margin-bottom: 8px;
}

.group-about-section {
    border-bottom: 1px solid #EEE;
}

.group-section-header p {
    font-size: 14px;
    color: rgba(34, 39, 50, 1);
    margin-bottom: 10px;
}

.group-section-header h3 {
    font-size: 15px;
    color: #FF4605;
    font-weight: bold;
    margin-bottom: 10px;
}

.event-card {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    text-align: center;
}

.event-image {
    width: 100%;
    height: 345px;
    background-size: cover;
    object-fit: cover;
}

.event-details {
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.event-details h4 {
    font-size: 1.25rem;
    text-align: left;
    color: #FFF;
    margin-bottom: 10px;
}

.event-details-sub p {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 5px;
}


.event-details-sub {
    display: flex;
    justify-content: space-between;
}

.event-detail-box {
    background: #1F67D311;
    border: 1px solid #1F67D3;
    color: #1F67D3;
    font-weight: bold;
    margin-bottom: 0;
    padding: 8px 12px;
    width: fit-content;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 15px;
}

.event-detail-title {
    font-size: bold;
    font-weight: 34px;
    color: #222732;
}

.event-detail-date {
    font-weight: 300;
    color: #222732;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #EEE;
}

.event-detail-date i {
    margin-right: 6px;
    color: #FF4605;
    font-size: 15px;
}

.event-detail-subtext {
    font-weight: 300;
}

.event-detail-subtitle,
.event-detail-subtext {
    font-size: 15px;
    color: #222732;
}

.event-detail-join{
    width: 100%;
    background: #FF4605;
    color: #FFF;
    font-weight: 500;
    border: none;;
    padding: 10px 20px;
    border-radius: 5px;
}

.event-detail-description{
    margin-top: 20px;
    font-size: 15px;
    color: #222732;
    font-weight: 400;
}

.event-detail-details h3{
    font-size: 18px;
    color: #232323;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-detail-details p{
    font-size: 15px;
    color: #222732;
    font-weight: 400;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #22273220;
}

.event-detail-details h3:last-of-type{
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
    color: #FF4605;
}

.event-detail-details{
    padding: 35px;
    background: #E6EEFA;
    border-radius: 10px;
}

.groupMiniPfp2 img:first-of-type{
    margin-left: 0px !important;
}