:root {
    --background: #ddd5c2;
    --blue: #87c2c7;
    --darkblue: #339398;
    --pink: #f4b6c2;
    --yellow: #f9e79f;
    --green: #a8d5ba;
  }


  @font-face {
    font-family: 'AristoDB'; /* The name you'll use in CSS */
    src: url('../resources/fonts/DynaPuff_Condensed-Regular.ttf') format('truetype'); /* Path to your font */
}
@font-face{
    font-family: 'Nunito';
    src:url('../resources/fonts/Nunito-Regular.ttf') format('truetype');
}


body{
    h1, h2, h3, h4{
        font-family: 'Nunito';
    }
    background-color: var(--background);
    p{
        font-family: 'Nunito';
        font-size:20px;
    }

    a{
        font-family: 'Nunito';
        font-size:20px;
    }
}



.main-jumbotron {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) { /* Large screens (Bootstrap lg breakpoint) */
    .main-jumbotron {
        height: 50vh; /* Set to 50% of viewport height on large screens */
    }
}


.main-jumbo-video {
    position: absolute;
    top: 50%; /* Center the video vertically */
    left: 50%; /* Center the video horizontally */
    transform: translate(-50%, -50%); /* Adjust for true center alignment */
    width: 100%;
    height:100%;
    object-fit: cover; /* Ensures the video scales to cover the container */
    z-index: -1; /* Places the video behind the content */
    pointer-events: none; /* Prevent interaction with the video */
    filter: brightness(0.8) saturate(0.6);
    
}
.main-jumbotron h1 {
    font-family: 'AristoDB';
    position: relative; /* Position the text above the pseudo-element */
    z-index: 1; /* Higher z-index for the text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Creates a shadow effect */
}

.btn{
    font-family: "Nunito";
    color: var(black);
    background-color: var(--blue);
    border-radius:15px;
    font-size: 20px;
    z-index:1;
    transition: all 0.5s ease;
}

.btn:hover{
    background-color: var(--pink);
    color:black;
}

.jumbo-header {
    margin-top: 20px;
    font-size: 1.5rem; /* Adjust for responsive text size */
    font-family: 'AristoDB', sans-serif; /* Fallback font for safety */
    text-align: center;
}

.main-jumbo-img {
    width: 200px; /* Adjust size for better responsiveness */
    height: 200px;
    border-radius: 50%; /* Circular appearance */
    object-fit: cover;
    border: 2px solid pink; /* Add a visually appealing border */
    z-index: 1;
}

.btn:hover{
    background-color: var(--pink);
    color:black;
}

.jumbo-header {
    width: 50%; /* Set the width to 100% of the parent container */
    margin: 0 auto; /* Center the heading */
    text-align: center; /* Center the text */
    padding: 20px; /* Optional: Add some padding */
    font-family: 'AristoDB';
}

.main-jumbo-img{
        width: 300px; /* Set a width for the image */
        height: 300px; /* Set a height for the image */
        border-radius: 50%; /* Make the image circular */
        object-fit: cover; /* Ensure the image covers the element without distortion */
        border: 0px solid black; /* Optional: Add a border to enhance visibility */
        z-index:2;
    } 
.nav{
    background-color: var(--blue);
}

.dropdown-item .active{
    background-color: var(--pink);
}

.s1{
    background-color: var(--background);
}
.brand-logo{
    width:40px;
    height: auto;
    position: sticky;
    border-radius: 50%; /* Make the image circular */
    object-fit: cover; /* Ensure the image covers the element without distortion */
    background-color: var(--background);
    border: 1px solid var(--pink); /* Optional: Add a border to enhance visibility */
}


.nav-item{
    margin-top:6px;
    transition: all 0.2s ease;
}

.nav-item:hover{
    font-weight:bold;
    border-radius: 15px;
    background-color: var(--pink)
}

  .dropdown:hover .dropdown-menu {
    border-color: var(--blue);
    display: block;
    margin-top: 0; /* Aligns the dropdown correctly */
}

.dropdown-menu {
    transition: all 0.2s ease; /* Smooth transition effect */
    padding:10px;
    background-color: var(--blue);

}

.dropdown-item{
    text-align: center;
    
    
}

.dropdown-item:hover{
    border-radius:10px;
    background-color: var(--pink);
    border: 0px solid var(--blue);
    font-weight: 500;
}





.span-text{
    color: var(--darkblue);
}

a{
    color:black;
}

a:hover{
    color: var(--darkblue);
}




/*INDEX*/

.img {
    width: 65px;
    height: 65px;
    filter: hue-rotate(335deg) brightness(.88);
    transition: all 1s ease;
}

.img_text{
    transition: all 1s ease;
}

.img:hover + .img_text{
    transform: scale(1.1);
}

.img:hover{
    transform: scale(1.1);
}

.img_drabina {
    width: 60px;
    height: auto;
    transition: all 1s ease;
}

.img_drabina:hover + .img_text{
    transform: scale(1.1);
}


.img_drabina:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 0.75rem #b4183d8a);   
}



#navbar-placeholder a {
    font-size: 1rem;
}