html { 
    scroll-behavior: smooth; 
}

body {
    margin: 0;
    background-color: rgba(0, 119, 255, 0.15);
    background-image: linear-gradient(to bottom right, rgba(0, 61, 131, 0.4), rgba(255, 255, 255));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header {
    border-radius: 1em;
}

.headerbutton {
    font-weight: bold;

}

.pointer-cursor {
    cursor: pointer;
}

.footer {
    height: 25px;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

.navbar {
    background: rgb(43, 43, 43);
    transition: all 0.4s;
}

.navbar .nav-link {
    color: #fff;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus, .nav-link:active, .nav-link:hover {
    color: #fff;
    text-decoration: none;
}

#navbarSupportedContent .nav-item .active {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.85);
    transition: border-bottom 1s;
}

.navbar .navbar-brand {
    color: #fff;
}

.navbar.active {
    background: #fff;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.active .nav-link {
    color: #555;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #555;
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #555;
}

@media (max-width: 991.98px) {
    .navbar {
        background: #fff;
    }

    .navbar .navbar-brand, .navbar .nav-link {
        color: #555;
    }
}

@media (min-width: 300px) {
    html { 
        font-size: 55%;
    }
    #startsida {
        background-position: left;
    }
}


@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    html { 
        font-size: 50%;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    html { 
        font-size: 100%;
    }
}

.text-small {
    font-size: 0.9rem !important;
}

.page-section {
    height: 100%;
}

.page-section>.container {
    padding-top: 6em;
    padding-bottom: 2em;
}

.text-block {
    padding: 2em;
    border-radius: 0.4em;
    color: white;
    background-color: #525252c4;
    backdrop-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}



#startsida-image {
    width: 100%;
    height: 100%;
    /* background-image: url('../img/bild1.jpg'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain;
}

#startsida-image-text-container {
    padding: 1.5em;
    font-size: 150%;
    color: white;
    position: absolute;
    width: fit-content;
    height: fit-content;
    max-width: 60vw;
    max-height: 50vh;
    background: rgba(90, 90, 90, 0.92);
    left: 5vw;
    top: 35vh;
    backdrop-filter: blur(8px);
}

#omoss {
    background: #8fa8b1;
    background: linear-gradient(180deg, #8fa8b1 0%, #8fa8b1 55%, #708A81 100%);
}

#tidigarearbeten {
    background: #708A81;
    background: linear-gradient(180deg, #708A81 0%, #E5D1B8 100%);
}

#varfilosofi {
    background: #E5D1B8;
    background: linear-gradient(180deg, #E5D1B8 0%, #E5D1B8 55%, #C2956E 100%);
}

#kontakt {
    background: #C2956E;
    background: linear-gradient(180deg, #C2956E 0%, #C2956E 30%, #2B2129 100%);
}

a, a:hover, a:active, a:visited {
    color: white;
}

.tele-link, .tele-link:hover {
    color: white;
    text-decoration: none;
}

.carousel-item {
    position: relative;
    height: 100%;        /* Ensure the item respects the max-height setting */
    max-height: 60vh;
    overflow: hidden;
}

.carousel-item img {
    height: auto;          /* Fit the image height to the container's height */
    width: 100%;            /* Adjust width automatically to maintain aspect ratio */
    display: block;         /* Remove any default inline element spacing */
    margin-left: auto;      /* Center the image horizontally */
    margin-right: auto;
    object-fit: contain;    /* Ensure the image fits within the container */
}

.three-d-hover {
    transition: transform 0.3s, box-shadow 0.3s;
    transform: perspective(1200px);
    box-shadow:
     rgba(0, 0, 0, 0.25) 0px 54px 55px,
     rgba(0, 0, 0, 0.12) 0px -12px 30px,
     rgba(0, 0, 0, 0.12) 0px 4px 6px,
     rgba(0, 0, 0, 0.17) 0px 12px 13px,
     rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.three-d-hover:hover {
    transform: perspective(1200px) rotate(0deg) rotateX(10deg) rotateY(0deg) translateZ(0px);
    box-shadow: 
    rgba(0, 0, 0, 0.25) 0px 54px 55px, 
    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px,
    rgba(0, 0, 0, 0.15) 0px 8px 8px 5px;
}