header {
    position : sticky;
    top : 0;
    z-index: 1000;
}

html,
body {
    background-color: #0E0D13 !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.img-bordered {
    border: 3px solid #ED3555 !important;
    padding: 10px !important;
    background-color: #0E0D13 !important;
    box-sizing: border-box !important;

    /* Просто уменьшаем размер */
    transform: scale(0.9) !important;
    /* Уменьшаем до 90% */
    transform-origin: center !important;
}

@media (max-width: 768px) {
    .img-bordered {
        padding: 6px !important;
        border-width: 2px !important;
        transform: scale(0.9) !important;
        /* На мобильных меньше уменьшаем */
    }
}

@media (max-width: 576px) {
    .img-bordered {
        padding: 4px !important;
        border-width: 1px !important;
        transform: scale(0.9) !important;
        /* На телефоне оригинальный размер */
    }
}

.btn {
    font-size: clamp(0.875rem, 2vw, 1.25rem) !important;
}


header .bi {
    width: clamp(1.25rem, 3vw, 1.75rem);
    height: clamp(1.25rem, 3vw, 1.75rem);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Poppins, sans-serif !important;
}

.fullpage-section {
    min-height: 100vh;
    display: flex;
    background-color: #0E0D13;
}

#hero.fullpage-section {
    align-items: center;
}

#about.fullpage-section {
    align-items: flex-start;
    padding-top: 80px;
}

.comments-section {
    background-color: #0E0D13; }

.p-3 {
    background-color: #0E0D13;
}
.custom-color {
    color: #ED3555;
}

a.btn.custom-btn {
    background: linear-gradient(135deg, #ED3555 0%, #cd5fd8 100%);
    border-color: transparent;
    color: white;
    transition: all 0.3s ease;
}

a.btn.custom-btn:hover {
    background: linear-gradient(135deg, #fb39fe 0%, #ff849a 100%);
    border-color: transparent;
    color: white;
}

.scroll-indicator-fixed {
    position: fixed;
    bottom: 20px;
    /* Измените с 0px на 20px для лучшего вида */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    animation: bounce 2s infinite;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

.my-bg {
    background-color: #0E0D13 !important;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-10px) translateX(-50%);
    }

    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

.user-name-text {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
    font-weight: 500;
    line-height: 1.3;
}

/* Класс для даты комментария */
.comment-date-text {
    font-size: clamp(0.75rem, 0.9vw, 0.9rem) !important;
    line-height: 1.3;
}

/* Класс для иконок в дате */
.icon-text {
    font-size: clamp(0.75rem, 0.9vw, 0.9rem) !important;
}

/* Класс для инициалов в аватаре */
.user-initial-text {
    font-size: clamp(0.9rem, 1.1vw, 1rem) !important;
    font-weight: 500;
}

.adaptive-text {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
 }

 .dark-grey-text {
    color: #83858E;
 }

 .adaptive-badge {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem) !important;
    padding: 0.5em 0.8em;
    color: #d1d3d9 !important;
 }

 .grey-text {
    color: #d1d3d9;
 }

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

 .social-login-btn {
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .social-login-btn:hover {
     background-color: white !important;
     border-color: white !important;
 }

 .social-login-btn:hover span {
     color: black !important;
 }

 .social-login-btn:hover svg {
     fill: black !important;
 }

 
 .btn-close-custom {
     background: transparent;
     border: none;
     opacity: 0.8;
     transition: all 0.2s ease;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 8px;
     padding: 6px;
     z-index: 1;
 }

 .btn-close-custom:hover {
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
     transform: scale(1.05);
 }


 .btn-close-custom:focus {
     outline: none;
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }