body {
    background-color: #ddcdc8; 
    color: #171717;            
    font-family: system-ui, -apple-system, sans-serif;
}

.navbar {
    background-color: transparent;
    transition: background-color 0.4s ease; 
}

.navbar-nav .nav-link {
    color: #ddcdc8 !important; 
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #f6f6f3 !important; 
}

.custom-nav-text {
    color: #ddcdc8;
}

.navbar.scrolled {
    background-color: rgba(128, 128, 128, 0.95) !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        
        background-color: #808080; 
        
        
        padding: 1rem; 
        
        
        border-radius: 8px;
		
		 
        text-align: center; 
		margin: 7px 20px 0 10px;
    }
}

.hero-section {
    background-image: url('hero_pinknoise.png');
    background-size: cover;       
    background-position: center;   
    background-repeat: no-repeat;  
}


.project-category-card {
    background-color: #f6f6f3 !important; 
    border: 1px solid #e0e0dc !important; 
	border-radius: 12px; 
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.project-category-card:hover {
    transform: translateY(-8px) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; 
    cursor: pointer; 
}

.project-card {
    background-color: #f6f6f3 !important; 
    border: 1px solid #e0e0dc !important; 
    border-radius: 12px;       
    color: #171717;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.project-card:hover {
    transform: translateY(-5px) !important;
    background-color: #f6f6f3; 
    color: #171717;            
    border-color: #171717;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.custom-project-card {
    background-color: #f6f6f3 !important; 
    border: 1px solid #e0e0dc !important; 
    border-radius: 12px !important;       
    color: #171717 !important;            
    opacity: 0.85;                        
}

.project-category-card .card-title,
.project-category-card .card-text,
.project-card .card-title,
.project-card .card-text {
    color: #171717 !important;
}

.project-category-card .card-text, 
.project-card .card-text {
    opacity: 0.85; 
}

.btn-collapse {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
	color: #808080 !important;
	transition: color 0.2s ease;
}

.btn-collapse:hover {
    color: #ffffff !important;
}

.btn-collapse::before {
    content: "▼"; 
    font-size: 0.7em; 
    transition: transform 0.2s ease; 
    color: #808080; 
}

.btn-collapse.collapsed::before {
    transform: rotate(-90deg); 
}

#computer-tekstfelt a {
    color: #171717;               
    background-color: transparent;
    text-decoration: none;
    font-weight: 600;             
    transition: color 0.2s ease;  
}

#computer-tekstfelt a:visited {
    color: #171717;
}

#computer-tekstfelt a:hover,
#computer-tekstfelt a:active {
    color: #f6f6f3;               
    text-decoration: underline;   
}

.mobil-lyd-link,
.mobil-lyd-link:focus,
.mobil-lyd-link:active {
    color: #171717 !important;
    text-decoration: underline; 
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .mobil-lyd-link:hover {
        color: #f6f6f3 !important;
    }
}

#kontakt-sektion a {
    color: #171717 !important;    
    font-weight: 600;             
    text-decoration: none;        
    transition: color 0.2s ease;  
}

#kontakt-sektion a.mobil-link-fix:focus,
#kontakt-sektion a.mobil-link-fix:active {
    color: #171717 !important;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    #kontakt-sektion a.mobil-link-fix:hover {
        color: #f6f6f3 !important;
        text-decoration: underline;
    }
}

#top-bolle {
    display: none;
	position: fixed;
    bottom: 20px;         
    right: 20px;          
    z-index: 99;          
    width: 50px;         
    height: 50px;         
    font-size: 20px;      
    line-height: 1;       
    transition: transform 0.2s ease, background-color 0.2s ease; 
    background-color: #808080 !important; 
    color: #f6f6f3 !important;            
    border: none;
}

#top-bolle:focus,
#top-bolle:active {
    background-color: #808080 !important;
    color: #f6f6f3 !important;
    transform: scale(1);
    box-shadow: none !important;
    outline: none !important;
}

@media (hover: hover) and (pointer: fine) {
    #top-bolle:hover {
        transform: scale(1.1);
        background-color: #171717 !important; 
        color: #ddcdc8 !important;            
        border: 1px solid #555555 !important; 
    }
}