@import url('https://fonts.googleapis.com/css2?family=Saira:wdth,wght@50..125,100..900&display=swap');
* {
    box-sizing: border-box;
}

.block {
/*    padding: 0 0 1.5rem;*/
}

    .block img {
        border-radius: .25rem;
    }

    .block.column-block .col-md:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    .block.column-block img {
        height: 100%;
        object-fit: cover;
    }

    .block.image-gallery-block .carousel {
        border-radius: .25rem;
        overflow: hidden;
    }

@media (min-width: 768px) {
    .block.column-block .col-md:not(:last-child) {
        margin-bottom: 0;
    }
}

.post-meta {
    font-size: .875rem;
}

    .post-meta span:not(:last-child)::after {
        content: "\25C6";
        display: inline-block;
        padding: 0 .25rem;
    }

.archive article {
    padding-bottom: 1rem;
}

.comments .alert {
    background: #f4f4f4;
    padding: 2rem 2.5rem;
}

.page-link {
    color: #f94c3b;
    min-width: 2.5rem;
    text-align: center;
}

    .page-link:hover {
        color: #f71f0a;
    }

.page-item.active .page-link {
    background: #f94c3b;
    border-color: #f94c3b;
}

/*------------------------------------------------*/

html, body {
    line-height: 160%;
    font-weight: 400;
    font-family: 'Saira', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}




/*------ TEXT ----------*/

.text-xs, .text-s, .text-m, .text-lg, .text-xl, .text-lead, .d1, .d2, .d3, .d4, .d5, .d6 {
    line-height: 160%;
    font-weight: 400;
    font-family: 'Saira', sans-serif;
}

.text-xs {
    font-size: 12px !important;
    color: #565973;
}

.text-s {
    font-size: 14px !important;
    color: #565973;
}

.text-m {
    font-size: 16px !important;
    color: #565973;
}

.text-lg {
    font-size: 18px !important;
    color: #565973;
}

.text-xl {
    font-size: 20px !important;
    color: #565973;
}

.text-lead {
    font-size: 24px !important;
    color: #565973;
}


.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
        
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin-right: 20px;
        margin-left:20px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;

    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;

    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Header and Hero Section */

.hero-text,
.hero-description {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 3.5s ease-out, transform 2.5s ease-out;
}

    .hero-text.visible, .hero-description.visible {
        opacity: 1;
        transform: translateY(0);
    }
@media (max-width: 640px) {
    .mobile-title {
        font-size: 50px !important; 
    }

    .mobile-subtitle {
        font-size: 30px !important;
    }

    .mobile-description {
        font-size: 12px !important;
    }
}
@media (max-width: 640px) {
    .bg-seconfimg {
        width: 100px;
        height: 300px;
    }
    .bg-firstimg {
        width: 100px;
        height:300px;
    }
}

/*----------------------- Navbar Styles--------------------- */

#navbar {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

/* Hamburger Icon Styles */
.hamburger-menu {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (max-width: 576px) {
    .bar1, .bar2, .bar3 {
        width: 25px;
        height: 2.5px;
       
    }
}

.hamburger-menu.change .bar1 {
    transform: translateY(11px) rotate(-45deg);
}

.hamburger-menu.change .bar2 {
    opacity: 0;
}

.hamburger-menu.change .bar3 {
    transform: translateY(-11px) rotate(45deg);
}

/* Mobile Menu Styles */
#mobile-menu {
    display: none;
}

    #mobile-menu.open {
        display: flex;
        flex-direction: column;
        background-color: #AEFF7E;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        padding: 1rem 0;
    }

    #mobile-menu ul {
        list-style: none;
        padding: 0;
    }

        #mobile-menu ul li {
            width: 100%;
            text-align: center;
            margin: 10px 0;
        }

            #mobile-menu ul li a {
                display: inline-block;
                padding: 10px 0;
                border-bottom: 2px solid transparent;
                transition: border-color 0.3s ease, color 0.3s ease;
            }

                #mobile-menu ul li a:hover {                   
                    border-bottom: 2px solid #212529;
                }



/*------------------------LastPost----------------------------------------*/

.post-content {
    max-height: 750px;
    width: 100%;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #1E1E1E;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

    .post-content h1,
    .post-content h2,
    .post-content h3 {
        color: white;
    }

    .post-content p {
        color: white;
        margin-bottom: 12px;
    }

    .post-content pre {
        background-color: white;
        color: black;
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin-bottom: 12px;
    }



/*    ---------------------CardBlock-------------------------*/
@media (max-width: 480px) {
    .card-block {
        text-align: center;           
    
    }

    .img-fluid {
        width: 80px;
        height: 80px;
    }
}



/*----------------------------TextWidthIcons-------------------------------*/


@media (max-width: 480px) {
    .title-icon {
        font-size: calc(var(--title-size) * 0.8) !important;
    }

    .subtitle-icon {
        font-size: calc(var(--subtitle-size) * 0.6) !important;
    }

    .text {
        font-size: calc(var(--text-size) * 0.8) !important;
    }

    .markdown-content {
        font-size: calc(var(--markdown-size) * 0.8) !important;
    }
  
/*    .icon {
        width: calc(var(--icon-size) * 0.5) !important;
    }*/
}


    /*-----------------------------Hero------------------------------------*/

    @media (max-width: 480px) {
        /*    .text-content .hero-titlesida {
        font-size: 18px !important;
    }
*/
        .text-content .hero-title {
            font-size: 35px !important;
        }

        .text-content .hero-subtitle {
            font-size: 20px !important;
        }

        .text-content .hero-text-techblog {
            font-size: 16px !important;
        }
    }

    .hero-titlesida {
        font-size: var(--hero-font);
    }

    @media (max-width: 480px) {
        .hero-titlesida {
            font-size: calc(var(--hero-font) * 0.5) !important;
        }
    }



    /*-----------------------------JOBBUTTON------------------------------------*/
    .job-button {
        padding: var(--btn-padding);
    }

    @media (max-width: 480px) {
        .job-button {
            padding: 16px !important;
            margin: 0 1rem;
        }
    }

    /*--------------------------------------Hittaoss-------------------------------------------------*/

    @media (max-width: 480px) {

        .page-title {
            font-size: calc(var(--page-title-size) * 0.8) !important;
        }

        .section-title {
            font-size: calc(var(--section-title-size) * 0.8) !important;
        }

        .title {
            font-size: calc(var(--title-size) * 0.8) !important;
        }

        .description {
            font-size: calc(var(--description-size) * 0.8) !important;
        }

        .subtitle {
            font-size: calc(var(--subtitle-size) * 0.8) !important;
        }

        .text {
            font-size: calc(var(--text-size) * 0.8) !important;
        }

        .image-city {
            width: calc(var(--image-city-size) * 0.5) !important;
        }

        .main-image {
            width: calc(var(--image-size) * 0.8) !important;
        }

        .image-city-two {
            width: calc(var(--image-city-two-size) * 0.5) !important;
        }
    }



/*------------------------------------VERTICAL---------------------------------------------------*/

@media (max-width: 480px) {

    .vertical-title {
        font-size: calc(var(--title-size) * 0.5) !important;
    }


    .vertical-subtitle {
        font-size: calc(var(--subtitle-size) * 0.5) !important;
    }

   
    .vertical-description {
        font-size: calc(var(--text-size) * 0.8) !important;
    }
}
@media (max-width: 480px) {
    .hide-on-mobile {
        display: none !important;
    }
}