:root {
    --bs-font-sans-serif: 'Rubik', sans-serif;
}

[data-bs-theme=dark] {
    --bs-body-bg: #2e2c47;
    --bs-body-bg-rgb: 46, 44, 71;
    --bs-primary-color-contrast: #2e2c47 !important;
}

body {
    background: #d1d0d6;
}

h1 {
    color: white;
    background-color: var(--bs-primary);
    text-align: center;
    padding: 1rem 0;
    font-weight: 700;
    margin-bottom: 0.5rem;
	border-radius: 0.375rem;
}

h3 {
	color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
	
a {
    text-decoration: none;
}

.btn {
    font-weight: bold;
}

.content {
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.home {
    min-height: 100vh;
    padding-bottom: 7rem;
}

.home .navbar {
    margin-bottom: 5rem;
}

.home::after {
    position: absolute;
    z-index: 0;
    bottom: -1px;
    height: 240px;
    left: 0;
    right: 0;
    content: "";
    background: url(../svg/header_shape.svg) center / cover no-repeat;
}

.top-header,
.home {
    position: relative;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top-header .logo {
    max-height: 100px;
}

.home .logo {
    max-height: 100%;
}

.home::before,
.top-header::after {
    position: absolute;
    background-color: rgba(46, 44, 71, 0.7);
    content: "";
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.navbar .nav-item {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.navbar .nav-item .nav-link {
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}

.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active,
.navbar .dropdown-toggle::after {
    color: var(--bs-primary);
}

.footer {
    position: relative;
    margin-top: 350px;
}

.home-footer {
    background-color: #34324b !important;
}

.footer .logo {
    max-height: 200px;
}

.footer .text-bg-primary a {
    color: #2e2c47;
}

.footer-links .list-inline-item:not(:last-child)::after {
    margin-left: 0.5rem;
    font-weight: bolder;
    content: "-";
}

.footer::before {
    position: absolute;
    z-index: -1;
    height: 280px;
    top: -275px;
    left: 0;
    right: 0;
    content: "";
    background: url('../svg/footer_shape.svg') center / cover no-repeat;
}

/* Робить контролери НЕ перехоплюючими кліки по всьому слайду,
   лише маленька кругла кнопка всередині приймає кліки */
#news .carousel-control-prev,
#news .carousel-control-next {
    /* не блокувати кліки по фону каруселі */
    pointer-events: none;
    width: auto; /* зменшує область контролера */
    top: 50%;
    transform: translateY(-50%);
}

/* Самі клікабельні кнопки - дозволяють pointer-events */
#news .carousel-control-prev .control-btn,
#news .carousel-control-next .control-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5); /* напівпрозорий білий фон */
    color: #ffffff; /* колір стрілки */
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background .15s ease, transform .08s ease;
    z-index: 5; /* над контентом */
}

/* Злегка підсвітка при ховері */
#news .carousel-control-prev .control-btn:hover,
#news .carousel-control-next .control-btn:hover {
    background: rgba(0,0,0,0.7);
}

/* Позиціонування кнопок ліворуч/праворуч ближче до краю картки */
#news .carousel-control-prev { left: .5rem; }
#news .carousel-control-next { right: .5rem; }

/* Щоб SVG стрілки були білими */
#news .control-btn svg { stroke: #000 !important; }

/* Забезпечуємо, що stretched-link не перекриває кнопку "Читати далі" */
.news-card .stretched-link {
    z-index: 1; /* нижче за кнопку */
}

/* Кнопки в картці повинні бути вище, щоб їх можна було натиснути */
.news-card .btn {
    position: relative;
    z-index: 3;
}

/* Додатково, на мобайлі трохи зменшимо кнопки */
@media (max-width: 575.98px) {
    #news .control-btn { width: 38px; height: 38px; }
    #news .carousel-control-prev { left: .25rem; }
    #news .carousel-control-next { right: .25rem; }
}
.mh-500 {
	max-height: 500px;
}

.mh-none {
	max-height: none !important;
}
@media (max-width: 1350px) {
    .hero-responsive {
        flex-direction: column !important; /* Рядок → стовпчик */
        text-align: center;
        gap: 20px; /* Щоб було гарно розділено */
    }

    .hero-responsive > [class*="col-"] {
        width: 100% !important;  /* Щоб не їло ширину */
        max-width: 100% !important;
    }
}
.sm-height {
	height: 300px !important;
}