@font-face {
    font-family: 'UAFSans Regular';
    font-display: swap;
    src: url('../fonts/UAFSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFSans Medium';
    font-display: swap;
    src: url('../fonts/UAFSans-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFSans SemiBold';
    font-display: swap;
    src: url('../fonts/UAFSans-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFSans Bold';
    font-display: swap;
    src: url('../fonts/UAFSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFSans OnBoard Stencil';
    font-display: swap;
    src: url('../fonts/UAFSans-OnBoardStencil.woff2') format('woff2');
}
@font-face {
    font-family: 'UAFSans OnBoard';
    font-display: swap;
    src: url('../fonts/UAFSans-OnBoard.woff2') format('woff2');
}

@font-face {
    font-family: 'Volja Regular';
    font-display: swap;
    src: url('../fonts/Volja-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Volja Black';
    font-display: swap;
    src: url('../fonts/Volja-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFMemory-Regular';
    font-display: swap;
    src: url('../fonts/UAFMemory/UAFMemory-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFMemory-Medium';
    font-display: swap;
    src: url('../fonts/UAFMemory/UAFMemory-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'UAFMemory-Black';
    font-display: swap;
    src: url('../fonts/UAFMemory/UAFMemory-Black.woff2') format('woff2');
}

/*body {*/
/*    font-family: Arial, sans-serif;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

.navbar {
    background-color: transparent;
    /*padding: 10px 10px;*/
    font-family: 'UAFSans SemiBold', sans-serif;
}


.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: bold;
    /*padding: 5px;*/
}
.navbar-nav .nav-link:hover {
    text-decoration: underline;
}

/* Змінюємо колір іконки бургер-меню */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='orange' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border-color: orange;      /* рамка */
}


:root { --navbar-h: 50px; } /* підлаштуй під свою висоту */
.navbar.fixed-top { min-height: var(--navbar-h); }
body { padding-top: var(--navbar-h); }
@media (min-width: 992px){
    :root{ --navbar-h: 50px; }
}

.text-justify {
    text-align: justify;
}

.btn-custom {
    background-color: #ffffff;  /* будь-який колір */
    color: #4d4634;
    border: 1px solid #4d4634;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'UAFSans Regular', sans-serif;
}
.btn-custom:hover {
    background-color: #ffffff;
    color: #F39200;
    border: 1px solid #F39200;
}

/* Ensure consistent image dimensions inside the carousel */
.carousel-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
    width: 4rem;                /* однакова ширина та висота */
    height: 4rem;
    top: 50%;                   /* вирівняти по центру каруселі */
    transform: translateY(-50%);
    background-color: #4D4634;
    border-radius: 50%;
}
.carousel-control-prev {
    /* трохи відступити від лівого краю */
    left: 1rem;
}

.carousel-control-next {
    /* трохи відступити від правого краю */
    right: 1rem;
}

.image-card {
    margin: 5px 5px;
    position: relative;
    /*border-radius: 15px;*/
    overflow: hidden;
    box-shadow: 0 4px 6px rgb(77, 70, 52);
    display: inline-block;
    height: 450px;
    width: 300px;

}
.image-card img {

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-card .top-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #6A653A;
    color: #ffffff;
    text-align: center;
    font-family: 'UAFSans SemiBold', sans-serif;
    /*font-size: small;*/
    padding: 4px 0;
}
.image-card .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6A653A;
    color: #ffffff;
    text-align: center;
    font-family: 'UAFSans SemiBold', sans-serif;
    /*font-size: small;*/
    padding: 4px 0;
}

.bachelor{
    color: white;
    background: #F39200;
    font-family: 'UAFSans Medium', sans-serif;
}

.magister{
    color: white;
    background:  #671318;
    font-family: 'UAFSans Medium', sans-serif;
}

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 50%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

div.scroll_list {
    overflow: auto;
    white-space: nowrap;
}

header {
    /*background-image: url('../pic/pixel_viknu2.jpg');*/
    background-color: #4D4634;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0;
}

[id] {
    scroll-margin-top: 60px; /* висота твого header */
}

main { padding: 0; }




figcaption {
    font-family: 'UAFSans Regular', sans-serif;
}

h1 {
    font-family: 'Volja Regular', sans-serif;
    color: white;
}

h2 {
    font-family: 'UAFSans SemiBold', sans-serif;

}
h3 {
    font-family: 'UAFSans Medium', sans-serif;

}
h4 {
    font-family: 'UAFSans Regular', sans-serif;

}
h5 {
    font-family: 'UAFSans Regular', sans-serif;

}
h6 {
    font-family: 'UAFSans Regular', sans-serif;

}

p {
    font-family: 'UAFSans Regular', sans-serif;

}

ul:not(.navbar-nav) li {
    font-family: 'UAFSans Regular', sans-serif;
}

ol li {
    font-family: 'UAFSans Regular', sans-serif;
}

a{
    color: #F39200;
}

table,
th,
td{
    border: 1px solid white;
    color: white;
    padding: 5px;
}
#flipbook{
    width: 400px;
    height: 300px;
    background-color: #4d4634;
}


@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

.loading-text {
    place-self: center;
    background: linear-gradient(90deg, #000000, #F39200, #000000) -100%/ 200%;
    /* being excessively careful with compat,
     * though this has been supported unprefixed and
     * in the shorthand across major browsers for a while */
    -webkit-background-clip: text;
    background-clip: text;
    /* use color, don't use -webkit-text-fill-color anymore,
     * was meant to solve a problem we haven't had in years */
    color: transparent;
    /*font: 900 clamp(2em, 10vw, 10em) exo, sans-serif;*/
    animation: shimmer 3s linear infinite
}

.book-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.4142;
    background-color: white;
    border: 2px solid #6A653A;
    /*box-shadow: 5px 5px 15px rgba(0,0,0,0.3);*/
    font-family: "UAFSans Regular", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* дуже важливо! рамка враховується у розмір */
    padding: 15px; /* додаємо внутрішній відступ */
}

a.book-link {
    text-decoration: none; /* прибирає підкреслення */
}
.book-cover::before {
    content: "";
    position: absolute;
    inset: 15px; /* внутрішня рамка */
    border: 1px solid #6A653A;
    pointer-events: none;
    box-sizing: border-box;

}
.book-author {
    position: absolute;
    top: 25px;
    width: 100%;
    text-align: center;
    /*font-size: 1rem;*/
    font-weight: 500;
    color: #6A653A;
    letter-spacing: 0.5px;
    padding: 15px;
}
.book-title {
    color: #6A653A;
    /*background-color: #0dcaf0;*/
    font-family: "UAFSans Medium", sans-serif;
    text-align: center;
    padding: 15px;
    margin: 0
}

#bestCadetsCarousel .carousel-item {
    height: 400px; /* 50% of viewport height */
}
#bestCadetsCarousel .carousel-item img {
    height: 100%;
    object-fit: cover;
}



/* Для малих екранів (мобільних, <768px) */
@media (max-width: 767.98px) {
    #bestCadetsCarousel .carousel-item {
        height: 670px;
    }
}

/* Для дуже малих (до 576px) */
@media (max-width: 575.98px) {
    #bestCadetsCarousel .carousel-item {
        height: 715px;
    }
}


@media (max-width: 500px) {
    #bestCadetsCarousel .carousel-item {
        height: 780px;
    }
}

@keyframes shimmer { to { background-position: 100% } }

[data-bs-theme="marine"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #295D6A;
    --bs-body-bg-rgb: #295D6A;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="sky"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #234390;
    --bs-body-bg-rgb: #234390;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="olive"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #444C35;
    --bs-body-bg-rgb: #444C35;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="sso"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #737479;
    --bs-body-bg-rgb: #737479;
    --bs-tertiary-bg: #{$blue-600};


    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="white-step"] {
    --bs-body-color: #6a653a;
    --bs-body-color-rgb: #6a653a;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: #ffffff;
    --bs-tertiary-bg: #{$blue-600};


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}


[data-bs-theme="step"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #6A653A;
    --bs-body-bg-rgb: #6A653A;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="white-step"] {
    --bs-body-color: var(#6A653A);
    --bs-body-color-rgb: #6A653A;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: #ffffff;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236A653A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}



[data-bs-theme="uniform"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #4D4634;
    --bs-body-bg-rgb: #4D4634;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}

[data-bs-theme="maroon"] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: #671318;
    --bs-body-bg-rgb: #671318;
    --bs-tertiary-bg: #{$blue-600};

    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");


    .dropdown-menu {
        --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
        --bs-dropdown-link-active-bg: #{$blue-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
        --bs-btn-border-color: #{rgba($white, .25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, .25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, .5)};
        --bs-btn-focus-border-color: #{rgba($white, .5)};
        --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
    }
}