: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{
        font-family: 'Nunito';
    }


    background-color: var(--background);
    p{
        font-family: 'Nunito';
        font-size:20px;
    }
}

.jumbobutton{
    background-color: var(--blue);
}

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

.main-jumbotron {
    position: relative; /* Position relative to allow positioning of the pseudo-element */
    height: auto; /* Set a height for the jumbotron */
    overflow: hidden; /* Hide any overflow from the pseudo-element */
    color: white; /* Text color */
}

.main-jumbotron::before {
    content: ""; /* Necessary for pseudo-elements */
    position: absolute; /* Positioning the pseudo-element */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; /* Stretch to the right */
    bottom: 0; /* Stretch to the bottom */
    background-image: url('../resources/IMG_2620.jpg'); /* Background image */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the image */
    filter: blur(5px); /* Apply blur effect */
    z-index: 0; /* Set a lower z-index for the background */
}

.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 {
    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: 2px solid --pink; /* 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);
}



/* ABOUT */