.page-link {
    --bs-pagination-color: #000;
}

.pagination {
    --bs-pagination-active-bg: #000;
    --bs-pagination-active-border-color: #000;
}

.card.no-style {
    overflow: hidden; /* viktigt för att bilden inte ska "läcka ut" ur kortet */
}

.card.no-style img {
    transition: transform 0.5s ease; /* smooth zoom */
}

.card.no-style:hover img {
    transform: scale(1.1); /* zoomar in 10% */
}


.dropdown-toggle::after {
    border-top: .15em !important;
}

.footer {
    background-color: #303030;
    color: #fff;
}

.footer a {
    color: #fff;
    text-decoration: none !important;
}

.footer a:hover {
    color: #fff;
    text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Outfit", sans-serif !important;
    font-weight: 600 !important;
}

h2 {
    font-size: calc(1.760rem + .9vw) !important;
    word-break: auto-phrase !important;
}

h3 {
    font-size: 1.2rem !important;
    text-transform: uppercase;
}

h4 {
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    line-height: 1.8;
}

p, span {
    margin-top: 1rem !important;
    font-size: 19px;
}

hr {
    height: 1px;
    background-color: #212529;
    margin-top: 25px !important;
    margin-bottom: 30px;
}

.kundcase-article .img-fluid, 
.teknik-sida .img-fluid,
.mot-en-medarbetare .img-fluid {
    border-radius: 20px;
    margin-bottom: 30px;
}

.kundcase-article h3 {
    font-size: 1.7rem !important;
    text-transform: none !important;
    font-weight: 500;
}

.kundcase-article-column {
    margin: 0 auto;
    padding-bottom: 50px;
    text-transform: none !important;
}

.kundcase-article-row {
    padding-top: -3rem !important;
    margin-top: 0 !important;
}


@media (max-width: 768px) {
    hr {
        height: 3px;
        background-color: #F1C232;
        border-radius: 2px;
        width: 70%;
        margin-bottom: 40px;
        text-align: left !important;
        margin: 0;
    }

    h2 {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}



/*********************************** MASTHEAD *********************************/
        
.masthead {
    margin-bottom: 0;
    overflow: hidden;
    font-weight: 500 !important;
}

.header .masthead {
    display: flex;
    background-size: cover;
   /* background-color: linear-gradient(360deg, transparent, rgba(255, 166, 0, 0.5));*/
}

.masthead h1 {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    max-width: 75% !important;
    /*margin: 0 auto !important;*/
}

.masthead .btn-primary {
    margin-top: 16px !important;
}

.masthead .page-heading .subheading, 
.masthead .site-heading .subheading {
    line-height: 1.4 !important;
    font-family: "Outfit", sans-serif;
    font-size: 1.4rem;
    padding-top: 0px;
    padding-bottom: 35px;
    max-width: 700px;
    font-weight: 300;
}

.masthead-subpage,
.masthead-knowledgebank {
    padding-top: 11rem;
    padding-bottom: 7rem;
    background-position: right 35% bottom 55%;
    background-size: cover;
}

.masthead-subpage h1 {
    font-size: 3.5rem !important;
    font-weight: 600 !important;
    color: #fff;
}

.masthead-subpage .subheading p, 
.masthead-subpage .subheading span {
    line-height: 1.4 !important;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 1.4rem;
    display: inline-block;
    max-width: 700px;
}

.subheading span {
     font-size: 1.6rem !important;
}

.masthead-landingpage {
    padding-top: 12rem;
    padding-bottom: 10rem;
    background-position: right 35% bottom 55%;
    background-size: cover;
}

.masthead-vara-erbjudanden {
    padding-top: 12rem;
    padding-bottom: 8rem;
    background-position: right 35% bottom 55%;
    background-size: cover;
}

.masthead-vara-erbjudanden p {
    text-align: left ;
}

.masthead-vara-erbjudanden .site-heading, 
.masthead-vara-erbjudanden .site-heading span {
    text-align: left !important;
    padding-top: 40px;
}

.masthead-vara-erbjudanden h1, 
.masthead-vara-erbjudanden .subheading {
    text-align: left !important;
    display: inline-block !important;
    color: #fff !important;
    width: 62% !important;
}

/*.masthead-vara-erbjudanden h1 {
    font-size: 3.7rem !important;
    font-weight: 700 !important;
}*/

.Article-masthead {
    text-align: left;
}

.Headline-text {
    padding-top: 3rem;
    background-color: #fff;
}

.masthead-our-tools {
    padding-top: 12rem;
    padding-bottom: 8rem;
    background-position: right 35% bottom 55%;
    background-size: cover;
}

.masthead .masthead-knowledgebank .site-heading h1 {
    font-weight: 400 !important;
}

.masthead div.videoOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.masthead .container {
    position: relative;
    z-index: 2;
}

        @media (max-width: 1600px) {
                    
            .masthead .page-heading h1, 
            .header.masthead .page-heading .h1, 
            .masthead .site-heading h1, 
            .masthead h1 {
                font-size: 2.2rem;
            }
        
            /*.masthead {
                padding-top: 8rem !important;
                height: 100%;
            }
            
            .masthead-knowledgebank .masthead {
                padding-top: 12rem !important;
            }*/
        }
        
        @media (min-width: 1400px) {
                    
            .masthead .site-heading {
                width: 80%;
            }
        
            .masthead-subpage .site-heading {
                width: 70%;
            }
        
            .Headline-text h1 {
                margin-bottom: 0px !important;
                font-size: 50px !important;
                letter-spacing: 0.0025em !important;
            }
                
            .Iconimage {
                width: 22px;
                margin-right: 5px;
            }
        }

        @media (max-width: 992px) {
            .masthead-vara-erbjudanden h1, 
            .masthead-vara-erbjudanden .subheading {
                width: 100% !important;
            }
            
            .masthead-landingpage {
                background-position: right 55% bottom 35%;
            }
            
            .masthead h1 {
                max-width: 100% !important;
                font-size: 2.2rem !important;
            }
        
            .Headline-text h1 {
                margin-bottom: 25px !important;
                font-size: 40px !important;
                text-align: left !important;
            }
        
            .masthead-vara-erbjudanden h1,
            .masthead-subpage h1 {
                font-size: 2.8rem !important;
                font-weight: 700 !important;
            }
        }
        
        @media (min-width: 992px) {
            
        .masthead .masthead-knowledgebank {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
            background-position: right 35% bottom 55%;
            background-size: cover;
            }
        }
            
        
        @media (max-width: 576px) {
            
            .masthead-landingpage .site-heading h1 {
                font-size: 1.6rem;
                line-height: 1.1;
                margin-top: -50px;
            }
            
            .masthead-landingpage .site-heading .subheading {
                font-size: 1.2rem;
                line-height: 1.3;
            }
            
            .masthead-landingpage .site-heading .btn {
               font-weight: 500;
               padding: 0.5rem 1.5rem;
            }
            
            .masthead-vara-erbjudanden h1,
            .masthead-subpage h1 {
                font-size: 2.6rem !important;
                font-weight: 700 !important;
            }
        }
        
        
.post-preview > a:hover {
    color: #ffd305;
}

.social-icon:hover {
    fill: #ffd305;
}
.socialIcon:hover {
    border: none !important;
}

.cta-row {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
        
/*********************************** END MASTHEAD *********************************/
        
        
        
/*********************************** BUTTONS *********************************/
        
        
.rounded-pill {
    text-transform: uppercase;
    padding: 0.8rem 1.6rem !important;
    border: none !important;
}

.btn {
    --bs-btn-hover-bg: #000;
    background-color: #f7a90e;
    border: none;
    color: #000;
    border-radius: 50px;
    text-transform: uppercase;
    background-attachment: scroll;
    font-weight: 500;
    padding: 0.9rem 1.9rem;
    max-width: 340px;
    letter-spacing: none !important;
}

.btn-primary:hover {
    background-color: #FBC90F;
    color: #000;
    box-shadow: none;
}

.btn-primary:focus {
    background-color: #FFD104;
    border-color: #FFD104;
    box-shadow: none;
}

.bs-btn-hover-bg {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

.read-more-link a {
    text-transform: uppercase;
    letter-spacing: 0.0225em;
    padding: none;
    color: #fff;
}

.read-more-link a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 0.09em;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.read-more-link a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

@media (max-width: 992px) {
    .read-more-link a {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .read-more-link a .btn {
        text-align: center;
        margin: 0 auto;
    }
}
        
/********************************* END BUTTONS ***********************************/
        
        
        
/******************************* CARDS *******************************/
        
.card {
   /*border-radius: 0 !important;*/
    background: none;
    margin-bottom: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: none !important;

}

.card,
.card .card-img-top {
    border-radius: 20px 20px 0 0 !important;
    /*margin-bottom: 10px;*/
}

.card-footer {
    padding-bottom: 1.2rem !important;
    padding-left: 1.3rem !important;
    border-top: none !important;
}

.card:hover {
    background-color: #F6F8FB;
}

.latestarticles-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideIn 1.5s linear forwards;
}

            
    /* Keyframes för animationen */
        @keyframes fadeSlideIn {
            to {
            opacity: 1;
            transform: translateY(0);
    }
}

.vara-erbjudanden .card {
    font-size: 20px;
    padding: 15px;
    padding-top: 25px;
    box-shadow: none;
    border: transparent;
}


.vara-erbjudanden .card:hover {
    background-color: #fff;
}

.vara-erbjudanden .card-body {
    padding-bottom: 0;
}

.vara-erbjudanden .card p {
    font-size: 20px;
}

.vara-erbjudanden .card-img-top {
    max-width: 55px !important;
    background-color: #fff0;
    margin-inline: .75rem;
}

.icon-cards {
    opacity: 0;
    transform: translateY(-100px);
    animation: fadeSlideIn 1.5s linear forwards;
}
            
            /* Keyframes för animationen */
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kunder img {
    opacity: 0;
    transform: translateY(100px);
    animation: fadeSlideIn 1.5s linear forwards;
    animation-delay: 1s;
}
            
    /* Keyframes för animationen */
        @keyframes fadeSlideIn {
        to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kundcase-article {
    margin: 0 auto;
}

.kundcase-article .card {
    border: none;
    border-radius: 20px;
}

.kundcase-article .card-img-top {
    border: none;
    height: 0px !important;
}

.kundcase .card-body {
    background-color: #fff !important;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 20px;
    border: none !important;
}

.kundcase .card-body p {
    margin-bottom: 0;
    font-size: 19px !important;
}

.kundcase .card-body .btn-arrow {
    background-color: transparent !important;
    color: #f7a90e;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.0225em;
}

.kundcase .card-body .btn-arrow:hover, 
.card-body .btn-arrow i:hover {
    color: #F1C232;
}

.kundcase .card-body .btn-arrow i {
    font-size: 2rem;
    color: #f7a90e;
}

.kundcase .card-body a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.11em;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.kundcase .card-body a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.kundcase .card-body a {
    color: #f7a90e;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.kundcase .card-footer,
.kundcase .card-footer:hover {
    background-color: #fff;
    border-top: transparent;
}

.knowledgebank .card {
    border: transparent;
}

.knowledgebank .card-body {
    background-color: #fff !important;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 0 0 3px 3px;
}

.knowledgebank .card-body p {
    margin-bottom: 0;
    font-size: 19px !important;
}

.knowledgebank .card .card-img-top.fixed-img {
    height: 280px;
    object-fit: cover;
}

.knowledgebank .card-body .btn-arrow {
    background-color: transparent !important;
    color: #f7a90e;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.0225em;
}

.knowledgebank .card-body .btn-arrow:hover, 
.card-body .btn-arrow i:hover {
    color: #F1C232;
}

.knowledgebank .card-body .btn-arrow i {
    font-size: 2rem;
    color: #f7a90e;
}

.knowledgebank .card-body a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.11em;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.knowledgebank .card-body a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.knowledgebank .card-body a {
    color: #f7a90e;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.knowledgebank .card-footer,
.knowledgebank .card-footer:hover {
    background-color: #fff;
    border-top: transparent;
}

.listArticles .card {
    border: transparent;
}

.listArticles h5,
.listArticles .card-body {
    padding-bottom: 0;
    margin-bottom: 0;
}

.listArticles .card-footer,
.listArticles .card-footer:hover {
    background-color: #fff;
    border-top: transparent;
}

.listArticles .card-footer,
.listArticles .card-footer:hover {
    background-color: #fff;
    border-top: transparent;
}

.tjanster-card .card-body {
    background-color: #fff;
    padding: 15px;
    border-radius: 0 0 4px 4px;
}

.tjanster-card .card-img-top {
    background-color: #fff;
    padding: 20px;
}

.tjanster-card-no-border .card-body {
    background-color: #fff;
    padding: 15px;
    border-radius: 0 0 4px 4px;
}

.latestarticles-card {
    box-shadow: 1px 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.latestarticles-card-title {
    padding: inherit;
    margin-bottom: 0.5rem;
}

.latestarticles-card-body {
    padding: 0.5rem;
    flex: 1;
    /*border-radius: 0 0 4px 4px;*/
}

.medarbetare .card-body {
    background-color: #fff;
    padding: 15px;
}

.mot-en-medarbetare {
    margin: 0 auto;
    justify-content: center;
}

.mot-en-medarbetare-card .card-img-top {
    height: 100%;
    border-radius: 0 !important;
}

.mot-en-medarbetare-card .card {
    border: none !important;
}

.articlesRelated .card {
    border: transparent;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.articlesRelated .card-footer {
    background-color: transparent;
    border: transparent;
}

.articlesRelated .card-body {
    background-color: #fff !important;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 0 0 3px 3px;
}

.card-img-top {
    height: 275px;       /* välj en höjd som passar dina kort */
    width: 100%;         /* fyller hela kortets bredd */
    object-fit: cover;   /* beskär bilden så att den fyller ytan utan att bli skev */
}

.vara-erbjudanden .card-img-top,
.icon-cards .card-img-top {
    height: unset;
}

.knowledgebank .card span.card-category {
    padding: unset !important;
    margin: unset !important;
    margin-bottom: 1rem !important;
}

.knowledgebank .card span.badge  {
    margin: unset !important;
}

.knowledgebank .card:hover span.badge.no-style {
    background-color: #000;
    color: #fff;
}

a.card.no-style {
    text-decoration: none !important;
    color: #000 !important;
}

/*.card:hover .card-footer span {
    color: #000 !important;
}*/

.medarbetare .medarbetare-card img {
    filter: grayscale(20%) !important;
}

.card-footer .btn-arrow {
    padding: 0;
  /*padding-inline: 5px;*/
    text-transform: uppercase;
  /*font-size: 0.875rem;*/
    font-weight: 600;
    letter-spacing: 0.0225em;
}

.card-footer a,
.card-footer span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.card-footer i {
    font-size: 1.5rem !important;
}


@media (max-width: 992px) {
            
    .tjanster-produkter-sektion .tjanster-card-no-border .card, 
    .tjanster-card .card {
        display: flex;
        justify-content: center;
               /* min-width: 400px !important;*/
    }

    /*.articlesRelated h2, 
    .kundcase h2, 
    .kundcase btn .btn-primary, 
    .icon-cards h2 {
        display: flex;
        justify-content: center;
    }*/

    .articlesRelated .card, 
    .icon-cards .card, 
    .kundcase .card {
        justify-content: center;
        margin: 0 auto;
        margin-bottom: 7px;
    }
            
}
        
/*********************************** END CARDS ***********************************/
        
        
        
/*********************************** KUNDLOGGOR FÖRSTA SIDAN ***********************************/
        
.headline-kunder-section .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 45px !important;
    padding-bottom: 0px !important;
    display: flex;
    justify-content: center;
    text-align: center;
}

.kunder {
    padding-bottom: 75px !important;
    margin-top: 0 !important;
}

.kunder .img-fluid {
    display: inline-block !important;
    text-align: center !important;
    max-width: 65% !important;
    padding: 15px 0 !important;
    margin: auto !important;
}

.kunder-last-col {
    max-width: 30% !important;
}

.kunder .mcd-logo {
    display: inline-block !important;
    text-align: center !important;
    max-width: 30% !important;
    padding: 15px 0 !important;
    margin: auto !important;
}

.kunder .moelven-logo {
    max-width: 45% !important;
}

.kunder .scb-logo {
    max-width: 30% !important;
}

.kunder .trafikverket-logo {
    max-width: 80% !important;
}

.kunder .nordiska-logo {
    max-width: 55% !important;
}

.iso-img .img-fluid {
    max-width: 70px !important;
    text-align: left !important;
    display: inline-block !important;
    margin: 5px !important;
}

@media (max-width: 992px) {
         
    .kunder .img-fluid {
        display: inline-block !important;
        text-align: center !important;
        max-width: 100px !important;
        padding: 15px 0 !important;
        margin: auto !important;
    }

    .kunder .mcd-logo {
        max-width: 60px !important;
    }

    .kunder .moelven-logo {
        max-width: 80px !important;
    }

    .kunder .scb-logo {
        max-width: 50px !important;
    }

    .kunder .trafikverket-logo {
        max-width: 150px !important;
    }
}

.cta-banner {
    padding-top: 12.5rem;
    padding-bottom: 12.5rem;
    position: relative;
}
       
/*********************************** KUNDLOGGOR END ***********************************/
       
       
@media (max-width: 1200px) {
           
    .branscher-section {
        background-size: cover;
    }
}

.blog-post {
    background-color: #fff;
    padding-bottom: 0px;
    padding-top: -100px !important;
    margin: 0 auto !important;
}

.blog-post > div > col {
    margin-top: -50px !important;
}

.post-heading {
    text-align: initial;
    line-height: 1.2px;
}

.rounded-pill {
    border-radius: 3px !important;
}

.badge {
    font-weight: 500;
    text-transform: uppercase;
}

.badge:hover {
    color: #FDBA11 !important;
}

a.page-link.text-primary {
    color: #F1C232 !important;
}

.page-link:hover {
    color: #F1C232 !important;
}

.page-link {
    border: none !important;
}

.branscher-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

.icon-cards,
.kundcase {
    padding-bottom: 40px;
}

.branscher-section p {
    font-size: 1.1rem !important;
    line-height: 1.3;
}

.branscher-section .bransch-col {
    padding: 20px 30px 20px 30px;
}

.branscher-section .row.my-5.py-4.g-4 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

#myVideo {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}

@media (max-width: 1200px) {
        
    .office-section {
        display: none;
    }
}

.office-section {
    padding: 10%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%;
}

/* === Gemensamma inställningar för Våra erbjudanden sidor === */

.vara-erbjudanden-bg-row,
.vara-erbjudanden-row-reverse,
.vara-erbjudanden-image-column,
.vara-erbjudanden-image-column-4,
.vara-erbjudanden-bg-row .vara-erbjudanden-image-column,
.vara-erbjudanden-row-reverse .vara-erbjudanden-image-column,
.vara-erbjudanden-row-reverse .vara-erbjudanden-image-column-4,
.vara-erbjudanden-bg-row .vara-erbjudanden-image-column-4 {
    background-repeat: no-repeat;
    background-size: cover;
}

/* === Layout och struktur === */

.vara-erbjudanden-bg-row,
.vara-erbjudanden-row-reverse {
    display: flex;
    padding-bottom: 30px;
}

/*.vara-erbjudanden-image-column img {
    border-radius: 5px;
}*/

/* === Border-radius specifikt per layout === */

.vara-erbjudanden-bg-row .vara-erbjudanden-image-column {
    background-position: center;
    border-radius: 20px 0 0 20px;
}

.vara-erbjudanden-bg-row .vara-erbjudanden-image-column-4 {
    background-position: left 35% bottom 70%;
    border-radius: 20px 0 0 20px;
}

.vara-erbjudanden-row-reverse .vara-erbjudanden-text-column {
    border-radius: 20px 0 0 20px;
}

.vara-erbjudanden-row-reverse .vara-erbjudanden-image-column {
    background-position: center;
    border-radius: 0 20px 20px 0;
}

.vara-erbjudanden-row-reverse .vara-erbjudanden-image-column-4 {
    background-position: right 35% bottom 55%;
    border-radius: 0 20px 20px 0;
}

/* === Textkolumn === */

.vara-erbjudanden-text-column {
    background-color: #ffffff;
    padding: 35px !important;
    border-radius: 0;
}

/* === Media Queries === */

@media (max-width: 992px) {
    .vara-erbjudanden-image-column,
    .vara-erbjudanden-image-column-4 {
        height: 400px;
        border-radius: 20px !important;
    }
    
    .vara-erbjudanden-row-reverse .vara-erbjudanden-text-column {
        border-radius: 20px !important;
    }
    
    .vara-erbjudanden-row-reverse > div > div > div > div {
        flex-direction: column-reverse;
    }
}

@media (max-width: 768px) {
    .vara-erbjudanden-bg-row {
        background-size: cover;
    }

    .vara-erbjudanden-text-column {
        padding: 10px !important;
    }

    .vara-erbjudanden-image-column {
        background-size: cover;
    }
}


.pagination nav li {
    display: inline-flex;
}

.kundcase .badge,
.knowledgebank .badge {
    border: 1px solid #000;
    border-radius: 10px;
    text-decoration: none;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Outfit", sans-serif !important;
    background-color: transparent;
    color: #000;
    text-transform: inherit;
}

.knowledgebank .badge.active, 
.badge:hover {
    background-color: #000 !important;
    color: #fff !important;
}

.page-item.active {
    background-color: #f7a90e;
    border-radius: 4px;
}

.page-item.active a {
    color: #222;
}

.knowledgebank .card {
    border: transparent;
}

.knowledgebank .card:hover {
    background: #fff;
}

.knowledgebank .card-footer {
    background: #fff;
    border: transparent;
}

.card:hover,
.card-footer:hover {
    background: #fff !important;
}

.card .card-img-wrapper {
    overflow: hidden;
}

.card-footer a,
.card-footer span {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.0625em;
    font-family: "Outfit", sans-serif !important;
}

.tjanster-produkter-sektion .card {
    border: transparent;
}

.icon-cards .card-footer {
    background-color: transparent;
    border-top: transparent;
}

.icon-cards .card-footer a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.0225em;
}

.icon-cards .card img {
    object-fit: cover;
}

.icon-cards .card-body {
    flex: 1;
    /*padding: 0;*/
    padding-inline: .5rem;
    box-shadow: unset !important;
}

.icon-cards .card img {
   /* margin-inline: 1rem;*/
}

.icon-cards .card .card-body {
    margin-inline: .75rem;
}

.icon-cards .card-body p {
    margin-bottom: 0;
}

.icon-cards .card .card-img-top {
   /*background-color: #fff;*/
    border-radius: 20px 20px 0 0 !important;
    filter: grayscale(5%) brightness(1);
    transition: 0.6s;
    transition-timing-function: ease-in-out;
    background-size: cover;
    height: 200px;
}

.icon-cards .card-img-top:hover {
    /*background-color: #fff;
    border-radius: 3px 3px 0 0;*/
    filter: grayscale(20%);
}

.icon-cards .card h3 {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.0225em;
}

.icon-cards .card p {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
}

.icon-cards .card-img-top {
    /*max-width: 65px;
    margin: 1rem;*/
    background-size: contain;
}

.icon-cards .card {
    box-shadow: none;
    border: none !important;
    /*background-color: #fff;*/
    --bs-card-bg: transparent !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /*border-radius: 10px !important;*/
}

.icon-cards > div > div > div > .row {
    justify-content: left !important;
}

.vara-erbjudanden-text-column {
    padding: 15px;
}

.medarbetare .card {
    border: transparent;
}

/*.card-footer a {
    padding-inline: 5px;
}*/


/**********************************OL UL LISTOR************************************/

.vara-erbjudanden .card ul li {
  list-style-type: circle;
  margin-bottom: 0.3em;
  line-height: 1.3;
}

.custom-list, 
.challenges-list, 
.example-list {
  list-style: none; /* Removes default bullets */
  padding: 0;
  margin-top: 20px;
}

.custom-list li, 
.challenges-list li, 
.example-list li {
  position: relative;
  padding-left: 30px; /* Make room for the image */
  list-style: none !important;
  font-size: 19px;
}

.custom-list li::before {
  content: '';
  list-style: none !important;
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background-image: url('https://astacusweb.appcloud.se/media/jalewsxz/checked.png');
  /*background-image: url('https://astacusweb.appcloud.se/media/q50pdg0f/check2.svg');*/
  /* höger klicka på svg-bilden när du är öppnat den i från media, öppna bild i ny flik */
  background-size: contain;
  background-repeat: no-repeat;
}

.challenges-list li::before {
  content: '';
  list-style: none !important;
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-image: url('https://astacusweb.appcloud.se/media/wsofqgav/next.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.example-list li::before {
  content: '';
  list-style: none !important;
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background-image: url('https://astacusweb.appcloud.se/media/q50pdg0f/check2.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.vara-erbjudanden-bg-row ul li, 
.vara-erbjudanden-row-reverse ul li {
  list-style: none;
  margin-bottom: 0.4em;
  line-height: 1.4;
  font-size: 19px;
}

.vara-erbjudanden-bg-row h4, 
.vara-erbjudanden-row-reverse h4 {
    margin-bottom: 20px;
    margin-top: 30px;
}

.vara-erbjudanden-bg-row ul li::before, 
.vara-erbjudanden-row-reverse ul li::before {
  /*content: "\2714"; /* Unicode character for a solid bullet point */
  color: #000; /* Set the desired color for the bullet */
  display: inline-block; /* Allows for styling and positioning */
  /*width: 1.5em; /* Adjust as needed for spacing */
  /*margin-left: -1.5em; /* Adjust to align the bullet properly */
}

ol {
    padding-left: 0rem !important;
}

.steg-lista ol  {
  counter-reset: steg; /* Nollställer räknaren */
  list-style-type: none; /* Tar bort standard-punktlistan */
  padding-left: 0 !important;
}

.steg-lista li {
  counter-increment: steg; /* Ökar räknaren */
  list-style-type: none; /* Tar bort standard-punktlistan */
  position: relative;
  padding-left: 60px; /* Gör plats för etiketten */
  margin-bottom: 0.6em;
  line-height: 1.3;
  font-size: 19px;
}

.steg-lista li::before {
  content:  "Steg " counter(steg);
  list-style-type: none; /* Tar bort standard-punktlistan */
  position: absolute;
  left: 0;
  font-weight: 600;
  color: #000; /* Valfri färg */
}

/**********************************END OL UL LISTOR************************************/

a.call-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    z-index: 9999;
    text-decoration: none !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* Viktigt för rund form i ikonläge */
    
}

/* Ikon */
a.call-widget .call-icon {
    font-size: 28px;
    opacity: 1;
    transform: scale(1);
    padding-top: 5px;
    transition: all 0.3s ease-in-out;
}

/* Text */
a.call-widget .call-text {
    display: none;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    margin-left: 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
}

/* HOVER – widget expanderar och blir "pill" */
a.call-widget:hover {
    border-radius: 30px;
    padding: 0 15px;
    width: auto;
    height: 50px;
}

/* När man hovrar – ikon ut, text in */
a.call-widget:hover .call-icon {
    display: none;
    opacity: 0;
    transform: scale(0.8);
    width: 0;
    margin: 0;
}

a.call-widget:hover .call-text {
    display: unset;
    opacity: 1;
    transform: scale(1);
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(247, 169, 14, .2); }
    70% { box-shadow: 0 0 0 20px rgba(247, 169, 14, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 169, 14, 0)); }
}

@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.vibrate .call-icon {
    animation: vibrate 0.4s linear;
}

.call-widget {
    animation: pulse 2s infinite;
}

.one-column .richtext a.special-link {
  color: #000000;
  font-weight: 600;
  text-decoration: underline;
}
.one-column .richtext a.special-link:hover {
  color: #CCCCCC;
}

/* Editor-stil (så redaktören ser färgen i editorn också) */
.umb-rte a.special-link {
  color: #000000;
  text-decoration: underline;
}





.contactForm .form-group {
    margin-bottom: 15px;
}
.contactForm label {
    display: block;
    margin-bottom: 5px;
}
.contactForm input, .contactForm textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.contactForm button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.contactForm button:hover {
    background-color: #45a049;
}