* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --color-primary: #6c63ff;
    --color-success: #00bf8e;
    --color-warning: #f7c94b;
    --color-danger: #f75842;
    --color-danger-variant: rgba(247,88,66,0.4);
    --color-white: #fff;
    --color-light: rgba(255,255,255,0.7);
    --color-black: #000;
    --color-bg: #1f2641;
    --color-bg1: #2e3267;
    --color-bg2: #424890;

    --container-width-lg: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;

    --transition: all 400ms ease;
}

body {
    font-family: "Montserrat", sans-serif;
    line-height: 1.7;
    color: var(--color-white);
    background: var(--color-bg);
}

.container {
    width: var(--container-width-lg);
    margin: 0 auto;
}

section {
    padding: 6rem 0;
}

section h2 {
    text-align: center;
    margin-bottom: 4rem;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}

h1 {
    font-size:2.4rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.3rem;
}

a {
    color: var(--color-white);
}

img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.btn {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-black);
    padding: 1rem 2rem;
    border: 1px solid transparent;
    font-weight: 500;
    transition: var(--transition);
}

.btn:hover {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-primary {
    background: var(--color-danger);
    color: var(--color-white);
}

/*========NAV BAR =======*/
nav {
    background: transparent;
    width: 100vw;
    height: 5rem;
    position: fixed;
    top: 0;
    z-index: 11;
}

/*promena na navbar pri scroll so javascript*/
.window-scroll {
    background: var(--color-primary);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.nav_container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav button {
    display: none;
}

.nav_menu {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.nav_menu a {
    font-size: 0.9rem;
    transition: var(--transition);
}

.nav_menu a:hover {
    color: var(--color-bg2);
}

/*====HEADER====*/
header {
    position: relative;
    top: 5rem;
    overflow: hidden;
    height: 70vh;
    margin-bottom: 5rem;
}

.header_container {
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
    height: 100%;
}

.header_left p {
    margin: 1rem 0 2.4rem;
}

/*====PROFILI===*/
.categories {
    background: var(--color-bg1);
    height: 29rem;
}

.categories h1 {
    line-height: 1;
    margin-bottom: 3rem;
}

.categories_container {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 4rem;
}

.categories_left {
    margin-right: 4rem;
}
.categories_left p{
    margin: 1rem 0 3rem;
}

.categories_right{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.category{
    background: var(--color-bg2);
    padding: 2rem;
    border-radius: 2rem;
    transition: var(--transition);
}

.category:hover {
    box-shadow: 0 3rem 3rem rgba(0,0,0,0.3);
    z-index: 1;
}

.category:nth-child(2) .category_icon {
    background: var(--color-danger);
}

.category:nth-child(3) .category_icon {
        background: var(--color-success);
    }

.category:nth-child(4) .category_icon {
        background: var(--color-warning);
    }

.category:nth-child(5) .category_icon {
        background: var(--color-success);
    }

.category_icon {
    background: var(--color-primary);
    padding: 0.7rem;
    border-radius: 0.9rem;
}

.category h5 {
    margin: 2rem 0 1rem;
}

.category p {
    font-size: 0.85rem;
}

/* === Profili==*/
.courses {
    margin-top:10rem;
}

.courses_container {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
}

.course {
    background: var(--color-bg1);
    text-align: center;
    border: 1px solid transparent;
    transition: var(--transition);
}

.course:hover {
    background: transparent;
    border-color: var(--color-primary);
}

.course_info {
    padding: 2rem;
}

.course_info p {
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
}

/*******FAQs******/
.faqs {
    background: var(--color-bg1);
    box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}

.faqs_container {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.faq {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    height: fit-content;
    background: var(--color-primary);
    cursor: pointer;
}

.faq h4 {
    font-size: 1rem;
    line-height: 2.2;
}

.faq_icon {
    align-self: flex-start;
    font-size: 1.2rem;
}

.faq p {
    margin-top: 0.8rem;
    display: none;
}

.faq.open p{
    display:block;
}

/*===Zadovolstvo===*/
.testimonials_container {
    overflow:hidden;
    position:relative;
    margin-bottom: 5rem;
}

.testimonial {
    padding-top: 2rem;
}

.avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
    border: 1rem solid var(--color-bg1);
}

.testimonial_info {
    text-align:center;
}

.testimonial_body {
    background: var(--color-primary);
    padding: 2rem;
    margin-top: 3rem;
    position:relative;
}

    .testimonial_body::before {
        content: "";
        display: block;
        background: linear-gradient( 
        135deg,
        transparent, 
        var(--color-primary), 
        var(--color-primary), 
        var(--color-primary) 
        );
        width: 3rem;
        height: 3rem;
        position: absolute;
        left: 50%;
        top: -1.5rem;
        transform: rotate(45deg);
    }

    /*******Footer******/
    footer {
        background: var(--color-bg1);
        padding-top:5rem;
        font-size: 0.9rem;
    }

    .footer_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7rem;
    }

    .footer_container > div h4 {
        margin-bottom: 1.2rem;
    }

    .footer_1 p {
        margin: 0 0 2rem;
    }

    footer ul li {
        margin-bottom: 0.7rem;
    }

    footer ul li a:hover {
        text-decoration:underline;
    }

    .footer_socials {
        display:flex;
        gap: 1rem;
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .footer_copyright {
        text-align:center;
        margin-top:4rem;
        padding: 1.2rem 0;
        border-top:1px solid var(--color-bg2);
    }


    /* *********      Media Queris (Tablets) ****** */

    @media screen and (max-width:1024px) {
       .container {
           width: var(--container-width-md);
       }
        h1 {
            font-size: 2.2rem;
        }

        h2 {
            font-size: 1.7rem
        }

        h3 {
            font-size: 1.4rem;
        }

        h4 {
            font-size: 1.2rem;
        }

        /*  ****** NavBar **** */
        nav button {
            display: inline-block;
            background: transparent;
            font-size: 1.1rem;
            color: var(--color-white);
            cursor: pointer;
        }

        nav button#close-menu-btn {
            display:none;
        }

        .nav_menu {
            position:fixed;
            top:5rem;
            right: 5%;
            height: fit-content;
            width: 15rem;
            flex-direction:column;
            gap: 0;
            display:none;
        }

        .nav_menu li{
            width: 100%;
            height:2rem;
            animation: animateNavItems 400ms linear forwards;
            transform-origin:top right;
            opacity:0;
        }

        .nav_menu li:nth-child(2){
             animation-delay: 200ms
         }

        .nav_menu li:nth-child(3) {
                animation-delay: 400ms
            }
        .nav_menu li:nth-child(4) {
                animation-delay: 600ms
            }

         .nav_menu li:nth-child(5) {
                animation-delay: 800ms
            }
            .nav_menu li:nth-child(6) {
                animation-delay: 1000ms
            }
            .nav_menu li:nth-child(7) {
                animation-delay: 1200ms
            }
            .nav_menu li:nth-child(8) {
                animation-delay: 1400ms
            }

          @keyframes animateNavItems {
                0% {
                transform: rotateZ(-90deg) rotateX(90deg) scale(0.1);
            }

            100% {
                transform: rotateZ(0) rotateX(0) scale(1);
                opacity: 1;
            }
        }

        .nav_menu li a {
            background:var(--color-primary);
            box-shadow:-4rem 6rem 10rem rgba(0, 0, 0, 0.6);
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            color:white;
        }

        .nav_menu li a:hover {
            background: var(--color-bg2);
            color: var(--color-white);
        }
        .li-parent {
            position: relative !important;
            z-index: 9999; /* Add z-index property here */
        }

        .submenu {
            position: absolute !important;
            background-color: #fff;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
            z-index: 999 !important;
        }
        /* ***Header *** */
        header {
            height: 52vh;
            margin-bottom: 4rem;
        }
        .header_container {
            gap:0;
            padding-bottom: 3rem;
        }
        /*  ***Categories **** */
        .categories {
            height: auto;
        }

        .categories_container {
            grid-template-columns :1fr;
            gap:3rem;
        }

        .categories_left {
            margin-right: 0;
        }

        /* *** Profili *** */
        .courses {
            margin-top: 0;
        }

        .courses_container {
            grid-template-columns: 1fr 1fr;
        }

        /* ** FAQs*** */
        .faqs_container {
            grid-template-columns: 1fr;
        }
        .faq {
            padding: 1.5rem;
        }

        /* **** Footer **** */
        .footer_container {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* *** Media Queries (Phones) *** */
    @media screen and (max-width: 600px){
        .container {
            width: var(--container-width-sm);
        }

        /* *** NavBar *** */
        .nav_menu {
            right: 3%;
        }

        /* *** Header *** */
        header {
            height:100vh;
        }

        .header_container {
            grid-template-columns: 1fr;
            text-align: center;
            margin-top: 0;
        }

        .header_left p {
            margin-bottom: 1.3rem;
        }

        /* *** Categorie *** */
        .categories_right {
            grid-template-columns: 1fr 1fr;
            gap:0.7rem;
        }

        .category {
            padding: 1rem;
            border-radius: 1rem;
        }

        .category_icon {
            margin-top: 4px;
            display: inline-block;
        }

        /* **** Profili *** */
        .courses_container {
            grid-template-columns: 1fr;
        }

        /* *** Testimonial *** */
        .testimonial_body {
            padding: 1.2rem;
        }

        /* *** Footer *** */
        .footer_container {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 2rem;
        }

        .footer_1 p{
            margin: 1rem auto;
        }

        .footer_socials {
            justify-content: center;
        }

        .language {
            display: flex;
            align-items: center;
            /*
            position: absolute;
            top: 50%; /* Adjust vertically as needed */
            /*/right: 10px; /* Adjust the right distance from the edge of the navbar */
            /*/transform: translateY(-50%); /* Center vertically */
        }

            .language img {
                margin-right: 0.5rem; /* Optional: Add some space between language icons */
                width: 24px; /* Set the width */
                height: 15px; /* Set the height */
                object-fit:contain
            }
        /* Smaller Menu Contents */
        .nav_menu li {
            font-size: 0.8rem; /* Adjust the font size as needed */
        }
    }

    /* *** gellery *** */
    .galleries {
        background: var(--color-bg1);
        height: 29rem;
    }

/* lang *** */
.nav_menu {
    display: flex; /* Add this */
    align-items: center; /* Add this */
    gap: 0.5rem;
}

.language {
    display: flex; /* Align language selector horizontally */
    align-items: center; /* Vertically center its contents */
}

    .language img {
        margin-right: 0.5rem; /* Optional: Add some space between language icons */
        width: 24px; /* Set the width */
        height: 15px; /* Set the height */
        /* Optional: Ensure the image doesn't stretch or shrink */
        object-fit: contain;
    }

/* logo */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* optional */
}

.logo {
    width: 3rem; /* Adjust the width according to your logo's size */
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px; /* Adjust margin as needed */
}

    .logo img {
        width: 100%;
        height: auto;
    }

    /*Gallery*/
@media screen and (min-width:1025px) {
    .nav_menu {
        display: flex; /* Show the navigation menu for desktop screens */
        align-items: center; /* Align items vertically */
    }

    .li-parent {
        position: relative;
    }
    /* Style for the submenu */
    .submenu {
        display: none; /* Hide the submenu by default */
        position: absolute; /* Position the submenu absolutely */
        top: 100%; /* Position the submenu below its parent */
        left: 0; /* Align the submenu with the left edge of its parent */
        background-color: #fff; /* Change the background color as needed */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a box shadow for a nice effect */
        z-index: 1; /* Ensure the submenu appears above other content */
    }

    /* Show the submenu when hovering over the parent menu item */
    .nav_menu li:hover .submenu {
        display: block;
    }

    /* Style for the submenu items */
    .submenu li {
        padding: 8px 16px; /* Add padding to the submenu items */
        /* Add more styles as needed */
    }

        /* Style for the submenu links */
        .submenu li a {
            color: #333; /* Change the text color as needed */
            text-decoration: none; /* Remove the default underline */
            /* Add more styles as needed */
        }

        /* Change styles when hovering over submenu items */
        .submenu li:hover {
            background-color: #f0f0f0; /* Change the background color when hovering */
            /* Add more styles as needed */
        }
}


.splide {
    margin: 0 auto;
    box-sizing: border-box;
}

.thumbnails {
    display: flex;
    margin: 1rem auto 0;
    padding: 2rem;
    justify-content: center;
}

.thumbnail {
    width: 70px;
    height: 70px;
    overflow: hidden;
    list-style: none;
    margin: 0 0.2rem;
    cursor: pointer;
    opacity: 0.3;
}

    .thumbnail.is-active {
        opacity: 1;
    }

    .thumbnail img {
        width: 100%;
        height: auto;
    }

#main-slider h3 {
    margin-bottom: 20px; /* Adjust the value as needed */
}

@media screen and (max-width: 992px) {
    .language-container {
        display: flex;
        align-items: center; /* Align items vertically */
    }

    .language {
        width: 24px;
        height: 15px;
        margin-right: 5px; /* Adjust spacing between language icons */
    }
}

.submenu {
    display: none;
}

/* Hide the menu by default on phones and tablets */
@media screen and (max-width: 992px) {
    .nav_menu {
        display: none;
    }
}

.istorijat_container {
    width: 70%; /* Adjust the width as needed */
    margin-top:130px; /* This centers the container horizontally */
}

    .istorijat_container p {
        margin-top: 25px; /* Adjust the margin as needed */
    }

        .istorijat_container p:last-child {
            margin-bottom: 25px; /* Adjust the margin as needed */
        }

.patronat_container {
    width: 70%; /* Adjust the width as needed */
    margin-top: 130px; /* This centers the container horizontally */
}

.patronat_container p {
        margin-top: 25px; /* Adjust the margin as needed */
    }

.patronat_container p:last-child {
            margin-bottom: 25px; /* Adjust the margin as needed */
        }

.float-left {
    width:115px;
    height:135px;
    float: left;
    margin-right: 15px; /* Adjust the margin as needed */
    margin-top:25px;
}

.vonnastavni_container {
    width: 70%; /* Adjust the width as needed */
    margin-top: 130px; /* This centers the container horizontally */
}

    .vonnastavni_container p {
        margin-top: 25px; /* Adjust the margin as needed */
    }

        .vonnastavni_container p:last-child {
            margin-bottom: 25px; /* Adjust the margin as needed */
        }

.nastaven_container {
    margin-top: 130px; /* Add top margin */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    margin-bottom:25px;
}

    /* Add blue borders to table cells */
    .nastaven_container table {
        border-collapse: collapse;
        border: 2px solid blue;
    }

    .nastaven_container td {
        border: 2px solid blue;
        padding: 8px; /* Add padding to cells for better spacing */
    }

    /*toggle*/
.header_container {
    position: relative; /* Ensure relative positioning for absolutely positioned elements */
}

.header_right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%; /* Adjust the width as needed */
    overflow: hidden; /* Hide overflow content */
}

.header_right-image {
    width: 100%; /* Ensure the Swiper container takes up the full width of its parent */
}



/*Кадар*/
@media (max-width: 1024px) {
    .nastaven_container table {
        width: 100%; /* Make table fill the container */
    }

    .nastaven_container td {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

        .nastaven_container td:nth-child(1), /* Select first column */
        .nastaven_container td:nth-child(2),
        .nastaven_container td:nth-child(3) {
            width: 33%; /* Divide columns evenly */
            width: 33%; /* Divide columns evenly */
        }
}

/* Styles for mobile devices */
@media (max-width: 767px) {
    .nastaven_container td {
        font-size: 12px; /* Further adjust font size for smaller screens */
    }

        .nastaven_container td:nth-child(1), /* Select first column */
        .nastaven_container td:nth-child(2),
        .nastaven_container td:nth-child(3) {
            width: 100%; /* Make columns stack vertically */
            display: block; /* Ensure table cells behave like blocks */
        }

    .nastaven_container td {
        text-align: center; /* Center text in cells */
        padding: 5px; /* Add padding for better spacing */
    }
}



/* Submenu */
.submenu {
    display: none;
}

.nav_menu li:hover .submenu {
    display: block;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.submenu li {
    display: block;
}

    .submenu li a {
        padding: 12px;
        color: #333;
        display: block;
    }

    .submenu li:hover {
        background-color: #f0f0f0;
    }


/* Default styles */
.container {
    width: 100%; /* Ensure container spans the full width */
    max-width: 1200px; /* Set maximum width */
    margin: 0 auto; /* Center container */
}

.header_container {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    gap: 2rem; /* Add gap between elements */
    align-items: center; /* Center items horizontally */
}

.header_left,
.header_right {
    width: 100%; /* Full width for both sections */
}

 /* Styles for mobile and tablet devices */
@media (max-width: 991px) {
    .header_container

{
    padding-bottom: 3rem; /* Add padding to the bottom */
}

.header_right {
    margin-top: 2rem; /* Add margin to create space between header_left and header_right */
    margin-bottom: 2rem; /* Add margin to the bottom of .header_right */
}

.swiper-container {
    width: 100%; /* Make the swiper container full-width */
}

.swiper-slide img {
    width: 100%; /* Make the images inside swiper slides full-width */
    height: auto; /* Ensure aspect ratio is maintained */
}
}