:root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #222222; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #172a28; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #060759; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.877) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    font-family: "Poppins",  sans-serif;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--primary);
    border: 15px solid var(--primary);
    border-radius: 3.5rem;
}

#header-carousel .carousel-item img{
    height: 40rem;
    object-fit: cover;
}

@media (max-width: 540px) {
    
}

.page-header {
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 100%), url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}

.flag img{
    width: 1.5rem;
}