/* ===================================
    Crafto - Web agency
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* variable */
:root {
    --base-color: #BEFF01;
    --medium-gray: #6F7071;
    --dark-gray: #1C1D1F;
    --alt-font: 'Inter', sans-serif;
    --primary-font: 'Inter', sans-serif;
}

body {
    font-size: 17px;
    line-height: 32px;
}

.top-space-margin {
    margin-top: 120px;
}

/* header */
.navbar .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 18px;
}

header .navbar-brand img {
    max-height: 56px;
}

header .btn.btn-switch-text.btn-medium>span {
    padding: 11px 30px;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a img {
    border-radius: 0;
}

/* btn  */
.btn.btn-base-color {
    color: var(--dark-gray);
}

.btn.btn-box-shadow.btn-base-color:hover,
.btn.btn-box-shadow.btn-base-color:active {
    color: var(--dark-gray);
}

/* letter spacing */
.bg-base-color-transparent {
    background-color: rgba(204, 255, 0, 0.9);
}

/* banner title */
.banner-title {
    font-size: 320px;
    word-break: normal;
    letter-spacing: -6px;
}

/* letter spacing */
.ls-minus-20px {
    letter-spacing: -20px;
}

.ls-minus-13px {
    letter-spacing: -13px;
}

.mt-minus-12 {
    margin-top: -12%;
}

/* word break normal */
.word-break-normal {
    word-break: normal;
}

/* bg color */
.bg-sherpa-blue {
    background-color: #333436;
}

/* page title */
.page-title-extra-large h1 {
    font-size: 5rem;
    line-height: 5rem;
}

/* team style */
.team-style-05 img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.team-style-05:hover img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
}

.team-style-08 figure img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.team-style-08:hover figure img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
}

.team-style-08 figure figcaption .social-icon a {
    background-color: var(--base-color);
}

.team-style-08 figure figcaption .social-icon a:hover {
    color: var(--dark-gray);
}

/* blog comment */
.blog-classic .card .blog-image img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.blog-comment li .btn-reply:hover {
    color: var(--text-dark-gray);
}

/* tag */
.tag-cloud a {
    background-color: var(--white);
}

/* portfolio-image */
.portfolio-simple .grid-item .portfolio-image img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.portfolio-simple .portfolio-box:hover .portfolio-image img {
    opacity: 1;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
}

/* popular post sidebar */
.popular-post-sidebar li figure {
    width: 190px;
    height: auto;
}

.popular-post-sidebar li .media-body {
    padding-left: 40px;
}

/* social icon style 06 */
.social-icon-style-06 li {
    position: relative;
}

.social-icon-style-06 li:before {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: var(--medium-gray);
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    opacity: .5;
}

.social-icon-style-06 li:last-child:before {
    display: none;
}

/* footer */
footer .footer-logo img {
    max-height: 56px;
}

footer .nav-link {
    color: var(--dark-gray);
}

.footer-navbar li a:hover {
    color: var(--dark-gray);
}

/* media query responsive */
@media (min-width: 992px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
        padding: 15px 25px;
    }
}

@media (min-width: 768px) {

    /* heading tag */
    h1 {
        font-size: 5rem;
        line-height: 5rem;
    }

    h2 {
        font-size: 3.75rem;
        line-height: 3.75rem;
    }

    h3 {
        font-size: 3.125rem;
        line-height: 3.125rem;
    }
}

@media (max-width: 1399px) {
    .banner-title {
        font-size: 170px;
        letter-spacing: -7px;
    }

    header .btn.btn-switch-text.btn-medium>span {
        padding: 11px 22px;
    }
}

@media (max-width: 1199px) {
    .banner-title {
        font-size: 140px;
        letter-spacing: -5px;
    }

    .ls-minus-20px {
        letter-spacing: -15px;
    }

    header .btn.btn-switch-text.btn-medium>span {
        padding: 6px 11px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 12px;
    }

    footer .nav-link {
        padding: 2px 8px;
    }
}

@media (max-width: 991px) {
    .banner-title {
        font-size: 110px;
        letter-spacing: -3px;
    }

    .ls-minus-20px {
        letter-spacing: -10px;
    }

    .top-space-margin {
        margin-top: 100px;
    }

    header .btn.btn-switch-text.btn-medium>span {
        padding: 9px 24px;
    }
}

@media (max-width: 767px) {
    .banner-title {
        font-size: 200px;
        letter-spacing: -15px;
    }

    .process-step-style-10.hover-box:hover .hover-content {
        bottom: 0;
    }

    .ls-minus-20px {
        letter-spacing: -4px;
    }

    .ls-minus-13px {
        letter-spacing: -5px;
    }
}

@media (max-width: 575px) {
    .banner-title {
        font-size: 110px;
        letter-spacing: -3px;
    }

    .popular-post-sidebar li figure {
        width: 100%;
    }

    .popular-post-sidebar li .media-body {
        padding-left: 0;
        padding-top: 25px;
    }
}

/* proof table */
.proof-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.proof-table tr {
    border-top: 1px solid var(--dark-gray);
}
.proof-table tr:last-child {
    border-bottom: 1px solid var(--dark-gray);
}
.proof-table td {
    vertical-align: middle;
}
.proof-table td.border-divider {
    border-left: 1px solid var(--dark-gray);
}

/* tech logos below proof table */
.tech-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
}

.tech-logo-link img {
    height: 48px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: grayscale(100%) opacity(0.5);
}

.tech-logo-link:hover img {
    filter: grayscale(0%) opacity(1) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
    transform: translateY(-8px) scale(1.2);
}

/* =====================================================
   MOBILE & TABLET RESPONSIVENESS ENHANCEMENTS (Modurit)
   ===================================================== */

/* Global container & overflow protection */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 991px) {
    /* Neutralize parallax translateY collision on stacked mobile cards */
    [data-bottom-top][data-top-bottom] {
        transform: none !important;
    }

    /* Mobile navigation drawer polish */
    .navbar .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        margin-top: 15px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 12px 16px;
        font-size: 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Submenu inside mobile drawer */
    .navbar .navbar-nav .dropdown-menu {
        border: none;
        background: #f9f9f9;
        border-radius: 6px;
        padding: 8px 12px;
        margin: 5px 0 10px;
    }
}

@media (max-width: 767px) {
    /* Fluid hero headline clamping */
    .fs-110 {
        font-size: clamp(2.3rem, 8.5vw, 4rem) !important;
        line-height: 1.15 !important;
    }

    /* Relax heavy negative tracking on small screens */
    .ls-minus-4px,
    .ls-minus-3px,
    .ls-minus-2px {
        letter-spacing: -0.5px !important;
    }

    /* Executive Proof Table: Mobile Responsive Card Stack */
    .proof-table,
    .proof-table tbody,
    .proof-table tr,
    .proof-table td {
        display: block;
        width: 100% !important;
    }

    .proof-table tr {
        border-top: 1px solid var(--dark-gray);
        padding: 18px 0;
    }

    .proof-table tr:last-child {
        border-bottom: 1px solid var(--dark-gray);
    }

    .proof-table td {
        padding: 0 !important;
        text-align: left !important;
        vertical-align: top;
    }

    .proof-table td.border-divider {
        border-left: none !important;
    }

    /* Stat Badge */
    .proof-table tr td:first-child {
        margin-bottom: 8px;
    }

    .proof-table tr td:first-child span {
        display: inline-block;
        background-color: var(--dark-gray);
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 700;
        padding: 3px 12px;
        border-radius: 20px;
        letter-spacing: 0.5px;
    }

    /* Client-facing bold headline */
    .proof-table tr td:nth-child(2) {
        margin-bottom: 4px;
    }

    .proof-table tr td:nth-child(2) span {
        font-size: 16px !important;
        line-height: 24px;
        font-weight: 700;
        color: var(--dark-gray);
    }

    /* Technical proof subtext */
    .proof-table tr td:nth-child(3) span {
        font-size: 14px !important;
        line-height: 22px;
        color: var(--medium-gray) !important;
    }

    /* Tech logos scaling on mobile */
    .tech-logo-link {
        padding: 8px 10px;
    }

    .tech-logo-link img {
        height: 36px;
        max-width: 90px;
    }

    /* iOS auto-zoom prevention: ensure all inputs & selects are >= 16px */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    .contact-form-style-03 .form-control {
        font-size: 16px !important;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Consulting 5-step methodology cards on touch devices */
    .icon-with-text-style-11 .text-box-wrapper {
        min-height: 220px;
    }

    /* Footer column adjustments */
    footer .col-sm-4,
    footer .col-sm-8,
    footer .col-md-9 {
        text-align: center !important;
    }

    footer .footer-logo {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

@media (max-width: 575px) {
    /* Header on narrow viewports (< 576px) */
    header .navbar-brand img {
        max-height: 36px !important;
    }

    header .btn.btn-switch-text.btn-medium>span {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    header .btn.btn-switch-text.btn-medium i {
        display: none;
    }

    /* Full-width touch CTA button */
    .btn.submit,
    #odoo-submit-btn {
        min-height: 48px;
        font-size: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ===================================
   Language Switcher Component
====================================== */
.lang-switch-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(28, 29, 31, 0.05);
    border: 1px solid rgba(28, 29, 31, 0.12);
    border-radius: 30px;
    padding: 3px 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.lang-switch-pill .lang-opt {
    color: var(--medium-gray);
    padding: 5px 9px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-block;
}

.lang-switch-pill .lang-opt:hover {
    color: var(--dark-gray);
}

.lang-switch-pill .lang-opt.active {
    color: #121417;
    background: #BEFF01;
    font-weight: 700;
}

.lang-switch-pill .lang-sep {
    color: rgba(28, 29, 31, 0.2);
    font-size: 11px;
    margin: 0 1px;
    user-select: none;
}

@media (max-width: 991px) {
    .header-language-mobile {
        margin: 15px 0 5px 0;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .header-language-desktop {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .header-language-mobile {
        display: none !important;
    }
}