/*
* Style
*/


/*
* Google font
*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Roboto");


/*
* Section - Home
*/

/** BG Image */
#home {
    background-image: url("../../../img/Paidin/Back1.jpg");
}

/** BG Parallax */
#home-bg-parallax > .bg-parallax {
    background: url("../../../img/Paidin/Back5.jpg?v=1.0")
}

/* Anpassning för mobiler */
@media (max-width: 768px) {
    #home-bg-parallax > .bg-parallax {
        background-size: contain; /* Anpassar bilden för små skärmar */
        background-position: top center; /* Flyttar fokus till toppen */
        height: auto; /* Justerar höjden till innehållet */
    }
}


/** BG Slideshow */
#home-bg-slideshow .slides > .bg-cover:nth-child(1) {
    background: url("../../../img/Paidin/Back1.jpg");
}
#home-bg-slideshow .slides > .bg-cover:nth-child(2) {
    background: url("../../../img/Paidin/Back1.jpg");
}
#home-bg-slideshow .slides > .bg-cover:nth-child(3) {
    background: url("../../../img/Paidin/Back1.jpg");
}
#home-bg-slideshow > .position-absolute {
    z-index: 20;
}

/** BG Video */
#home-bg-video .player:before {
    z-index: 15;
}
#home-bg-video .player.is-mobile {
    display: none;
}
#home-bg-video .container {
    position: relative;
    z-index: 20;
}
#home-bg-video .inline-YTPlayer {
    height: 100%;
    overflow: hidden;
}

/*
* Section - Fun Facts
*/

#fun-facts {
    background-image: url("../images/bg-fun-facts.jpg");
}


/*
* Section - Skills
*/

#skills {
    background-image: url("../images/bg-skills.jpg");
}


/*
* Section - Quote
*/

#quote {
    background-image: url("../../../img/Paidin/Back4.jpg");
}


/*
* Section - Keep In Touch
*/

#keep-in-touch {
    background-image: url("../../../img/Paidin/Back3.jpeg");
}


/*
* Section - Coming Soon
*/

#coming-soon {
    background-image: url("../images/bg-coming-soon.jpg");
}


/*
* Section - Contact
*/

#contact {
    background-color: #f8f9fa; /* Standard ljus bakgrundsfärg */
    background-image: none; /* Ingen bakgrundsbild */
}



/*
* Footer
*/

.footer-logo {
    max-height: 40px;
}
.footer-icon-social {
    bottom: 10px;
    position: relative;
}

/* Skapa en offcanvas-meny */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Göm menyn utanför skärmen */
    width: 300px; /* Bredden på menyn */
    height: 100%;
    background-color: #2E6F89; /* Bakgrundsfärg */
    color: white;
    z-index: 1050; /* Ligger över annat innehåll */
    transition: right 0.3s ease-in-out; /* Smooth animering */
    overflow-y: auto; /* Scroll om innehållet är för långt */
    padding: 20px;
}

.offcanvas-menu.show {
    right: 0; /* Visar menyn genom att flytta in den */
}

.menu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

.menu-link {
    display: block;
    padding: 10px 0;
    color: black;
    text-decoration: none;
    font-size: 25px;
    font: bolder;
}

.menu-link:hover {
    color: #FFB84D; /* Färg vid hover */
}

header .navbar-header .navbar-toggler {
    position: absolute !important;
    right: 20px !important;
    top: 10px !important;
    z-index: 1050 !important;
    display: block !important;
}

.navbar-toggler {
    position: absolute !important; /* Placera relativt föräldern */
    right: 20px !important; /* Flytta den längst till höger */
    top: 10px !important; /* Justera avstånd från toppen */
    z-index: 1050 !important; /* Se till att den är över allt */
    display: block !important; /* Gör den alltid synlig */
}

@media (min-width: 992px) {
    .navbar-toggler {
        display: block !important; /* Visa alltid hamburgar-ikonen */
        position: absolute !important; /* Placera relativt föräldern */
        right: 20px !important; /* Flytta den längst till höger */
        top: 10px !important; /* Justera avstånd från toppen */
        z-index: 1050 !important; /* Hög prioritet */
    }
}
body header .navbar-header .navbar-toggler,
html body header .navbar-header .navbar-toggler {
    position: absolute !important; /* Placera absolut */
    right: 20px !important; /* Flytta till höger */
    top: 10px !important; /* Justera avstånd från toppen */
    display: block !important; /* Se till att den syns */
    z-index: 1050 !important; /* Hög prioritet på z-index */
}
#menu-toggle {
    position: absolute !important;
    right: 20px !important;
    top: 10px !important;
    z-index: 1050 !important;
    display: block !important;
}
.navbar-toggler-icon {
    font-weight: bold; /* Gör ikonen fet */
    border-width: 12px; /* Förstärker linjerna */
}

/*header {
    background-color: #ffffff !important;  Vit bakgrund 
    position: relative;  Se till att den stannar på plats 
    z-index: 1000;  Ligger över andra element 
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);  En lätt skugga under headern (valfritt) 
}
*/
.top-right-badge {
    position: absolute; /* Gör det möjligt att placera bilden relativt till föräldern */
    top: 5px; /* Avstånd från toppen */
    right: 5px; /* Avstånd från höger */
    width: 100px; /* Justera bildens storlek om nödvändigt */
    z-index: 999; /* Se till att bilden visas över andra element */
}