/**********************************************
 * Standaard elements
 **********************************************/
:root {
    --elluh-primary: #666d58;
    --elluh-primary-soft: #9ea68f;
    --elluh-secondary: #bdc6b5;
    --elluh-surface: #f7f8f4;
    --elluh-border: #d9dfd2;
    --elluh-text: #1f241b;
    --elluh-muted: #626b5b;
    --elluh-radius: 18px;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--elluh-text);
    background: #fff;
    line-height: 1.7;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--elluh-primary);
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

a:hover,
a:focus {
    color: #3f4536;
    opacity: .85;
}

.playwrite-font {
    font-family: "Playwrite IN", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.size45,
.playwrite-font.size45 {
    font-size: 45px;
}

.bold400,
.playwrite-font.bold400 {
    font-weight: 400;
}

.paddingtop25 {
    padding-top: 25px;
}

.container,
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.section-spacing {
    padding: 56px 0;
}

.section-spacing-sm {
    padding: 32px 0;
}

.section-title {
    margin-bottom: 24px;
    font-weight: 400;
}

.section-intro {
    max-width: 780px;
    margin: 0 auto 32px;
    color: var(--elluh-muted);
}

.content-card,
.blog-card,
.service-card-v3,
.education-experience-card,
.contact-info,
.signle-side-bar,
.services-card,
.job-card,
.detail-card {
    height: 100%;
    border: 1px solid var(--elluh-border);
    border-radius: var(--elluh-radius);
    background: #fff;
    box-shadow: 0 12px 32px rgba(102, 109, 88, .10);
}

.content-card,
.education-experience-card,
.contact-info,
.signle-side-bar,
.job-card,
.detail-card {
    padding: 28px;
}

.empty-state {
    padding: 32px;
    border: 1px dashed var(--elluh-border);
    border-radius: var(--elluh-radius);
    color: var(--elluh-muted);
    background: var(--elluh-surface);
    text-align: center;
}

/**********************************************
 * TOPBAR
 **********************************************/
.topbar {
    min-height: 25px;
    background-color: var(--elluh-primary);
    margin-bottom: 25px;
}

/**********************************************
 * HEADER
 **********************************************/
.header {
    text-align: center;
}

.header .logo {
    width: 220px;
    height: auto;
}

.socialmedia {
    margin-top: 18px;
    min-height: 25px;
    text-align: center;
}

.socialmedia .socialmedia-inner {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.socialmedia .icon {
    height: 25px;
    width: 25px;
    fill: var(--elluh-primary);
}

/**********************************************
 * NAVIGATION
 **********************************************/
.navigation {
    margin-top: 25px;
    min-height: 56px;
    background-color: var(--elluh-secondary);
    display: flex;
    align-items: center;
}

.navigation .nav {
    justify-content: center;
    gap: 4px;
}

.navigation .nav .nav-link {
    color: #000;
    border-radius: 999px;
    padding: 10px 16px;
}

.navigation .nav .nav-link.active,
.navigation .nav .nav-link:hover,
.navigation .nav .nav-link:focus {
    background: rgba(255, 255, 255, .55);
    font-weight: 700 !important;
}

/**********************************************
 * SHARED PAGE HERO
 **********************************************/
.page-hero,
.breadcrumb-area,
.page-title {
    background: linear-gradient(135deg, var(--elluh-secondary), var(--elluh-surface));
    padding: 52px 0;
    margin-top: 25px;
    text-align: center;
}

.page-hero .title,
.breadcrumb-inner .title,
.page-title h1 {
    margin: 0;
    font-weight: 400;
}

.breadcrumb-list,
.bread-crumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
    color: var(--elluh-muted);
}

.breadcrumb-list li:not(:last-child)::after,
.bread-crumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: var(--elluh-muted);
}

/**********************************************
 * INDEX
 **********************************************/
.slider {
    background-color: var(--elluh-primary-soft);
    margin-top: 25px;
}

.slider .carousel-inner,
.slider .carousel-item {
    width: 100%;
}

.slider .slider-image {
    display: block;
    width: 100%;
    height: clamp(240px, 32vw, 560px);
    object-fit: cover;
}

.introduction {
    margin: 0;
    padding: 48px 0;
}

.introduction h1 {
    font-weight: 400;
}

.service,
.service-area {
    margin-top: 0;
    padding: 48px 0;
    background: var(--elluh-surface);
}

.service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 138px;
    padding: 22px;
}

.service-card-icon img {
    max-height: 96px;
    object-fit: contain;
}

.service-title {
    margin: 0;
    padding: 0 16px 22px;
    font-size: 1.15rem;
}

.counter-erea {
    background-color: var(--elluh-secondary);
    padding: 40px 0;
    margin-top: 0;
}

.counter-box {
    padding: 24px;
    border-radius: var(--elluh-radius);
    background: rgba(255, 255, 255, .42);
}

.counter-box .counter {
    margin-bottom: 8px;
    font-weight: 400;
}

.blog,
.blog-classic-area-wrapper {
    padding: 48px 0;
    margin-top: 0;
}

.blog-card {
    overflow: hidden;
}

.blog-card .img-box {
    position: relative;
    overflow: hidden;
}

.blog-card .img-box img,
.thumbnail-top img,
.image img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--elluh-radius);
}

.blog-card .img-box img {
    border-radius: var(--elluh-radius) var(--elluh-radius) 0 0;
    aspect-ratio: 16 / 10;
}

.blog-content-wrap {
    padding: 24px;
}

.blog-title {
    font-size: 1.25rem;
    margin-bottom: 18px;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin: 0;
    list-style: none;
    background: rgba(255, 255, 255, .88);
}

.blog-tags li {
    color: var(--elluh-muted);
    font-size: .9rem;
}

.tag-icon {
    margin-right: 6px;
}

.read-more-btn,
.detail,
.btn-elluh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

/**********************************************
 * CONTENT PAGES
 **********************************************/
.tmp-section-gap,
.tmp-section-gapTop,
.tmp-section-gapBottom,
.contact-area-wrapper,
.contact-section,
.service-page-section,
.sidebar-page-container,
.project-single-section {
    padding: 48px 0;
}

.experiences-wrapper,
.project-solution-section,
.product-info-tabs {
    margin-top: 32px;
}

.experience-content + .experience-content {
    margin-top: 20px;
}

.ex-subtitle,
.edu-title,
.dark-text,
.meta-label {
    color: var(--elluh-muted);
}

.contact-info-wrap .row,
.contact-form-wrapper,
.blog-classic-area-wrapper .row,
.service-page-section .row,
.project-single-section .row {
    row-gap: 24px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 12px;
    background: var(--elluh-secondary);
    color: var(--elluh-primary);
}

.contact-form,
.get-in-touch-wrapper {
    border-radius: var(--elluh-radius);
    background: var(--elluh-surface);
    padding: 28px;
}

.form-group {
    margin-bottom: 18px;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"] {
    border-radius: 12px;
    border-color: var(--elluh-border);
}

.tmp-button-here button,
.contact-form button,
button[type="submit"] {
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    background: var(--elluh-primary);
    color: #fff;
}

.tmp-sidebar + .tmp-sidebar {
    margin-top: 24px;
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-link {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--elluh-surface);
    color: var(--elluh-primary);
}

.list-style-two {
    padding-left: 0;
    list-style: none;
}

.list-style-two li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--elluh-border);
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.tab-btn {
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--elluh-surface);
}

.tab-btn.active-btn {
    background: var(--elluh-primary);
    color: #fff;
}

.tab {
    display: none;
}

.tab.active-tab {
    display: block;
}

/**********************************************
 * FOOTER
 **********************************************/
.footer {
    background-color: #d4dccb;
    padding: 14px 0;
}

.footer .logo img,
.footer img.logo {
    width: 92px;
    height: auto;
}

.footer .shortlinks,
.footer .contact {
    margin-top: 0;
}

.footer .shortlinks ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    padding: 0;
    margin: 0;
}

.footer .shortlinks ul li {
    list-style: none;
}

.footer .contact,
.footer-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.footer .contact .icon,
.footer .contact .social .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: var(--elluh-primary);
}

.footer .social {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.footer-email {
    white-space: nowrap;
}

.copyright {
    min-height: 32px;
    padding: 6px 0;
    background-color: var(--elluh-primary);
    color: #fff;
    font-size: .92rem;
}

.copyright a {
    color: #fff;
}

@media (max-width: 991.98px) {
    .section-spacing,
    .tmp-section-gap,
    .tmp-section-gapTop,
    .tmp-section-gapBottom,
    .contact-area-wrapper,
    .contact-section,
    .service-page-section,
    .sidebar-page-container,
    .project-single-section,
    .blog,
    .blog-classic-area-wrapper {
        padding: 36px 0;
    }

    .socialmedia {
        text-align: center;
    }

    .footer-logo,
    .footer-contact {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .header .logo {
        width: 170px;
    }

    .navigation .nav {
        justify-content: center;
    }

    .navigation .nav .nav-link {
        padding: 8px 12px;
    }

    .page-hero,
    .breadcrumb-area,
    .page-title {
        padding: 36px 0;
    }

    .contact-form,
    .get-in-touch-wrapper,
    .content-card,
    .detail-card {
        padding: 22px;
    }

    .footer-contact {
        flex-direction: column;
        gap: 8px;
    }

    .copyright,
    .copyright .text-end {
        text-align: center !important;
    }
}