.tb10 {
    padding: 10px 0 10px !important;
}

.tb10-1 {
    padding: 0 0 10px !important;
}

.tb10-2 {
    padding: 0 0 45px !important;
}

.b40 {
    padding-bottom: 40px !important;
}

.b50 {
    padding-bottom: 50px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.ml85 {
    margin-left: 85px !important;
}

.mtmi50 {
    margin-top: -50px;
}

.bc1 {
    background: rgb(0 150 199) !important;
}

.bc1:hover {
    background: rgb(79 91 118) !important;
}

.fc1 {
    color: rgb(0 150 199) !important;
}

.solutek-btn a:hover {
    color: rgb(0 150 199) !important;
}

.case-studies-btn a:hover {
    color: rgb(0 150 199) !important;
}

.fc2 {
    color: rgb(0 0 0) !important;
}

.header-btn-l {
    text-align: left;
}

.header-btn-l a {
    display: inline-block;
    font-size: 15px;
    line-height: 48px;
    text-transform: uppercase;
    color: #0096C7;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.breadcumb-area {
    margin: -77px 0px 0 3px !important;
}

.fc2:hover {
    color: rgb(0 150 199) !important;
}

.fc1b::before {
    background-image: linear-gradient(270deg, var(--darkreader-background-ffffff, #0096C7) 0%, #0096C7 100%) !important;
}

.fc1a::after {
    background-image: linear-gradient(270deg, var(--darkreader-background-ffffff, #0096C7) 0%, #0096C7 100%) !important;
}

.case-studies-thumb::before {
    background-image: linear-gradient(180deg, rgba(255, 60, 0, 0) 37%, rgba(0, 155, 199, 0.9999999999999999) 100%) !important;
}

.case-studies-icon {
    background-color: #0096C7 !important;
}

.case-studies-icon:hover {
    background-color: rgb(79 91 118) !important;
}

.splide__arrow {
    background: #0096C7 !important;
}

.splide__arrow:hover {
    background-color: rgb(79 91 118) !important;
}

.testimonial-area.style-four .slide-shape-inner::before {
    background-image: linear-gradient(0deg, #4f5b76 0%, #0096C7 100%) !important;
}

.slide-shape-inner::after {
    background-image: linear-gradient(0deg, #4f5b76 0%, #0096C7 100%) !important;
}

.process-thumb::before {
    width: 240px !important;
    height: 240px !important;
    left: -13px !important;
    top: -18px !important;
    border-color: rgb(0 150 199) !important;
}

.working-process-bottom p span {
    color: #0096C7 !important;
}

.process-number span {
    background-color: rgb(0 150 199) !important;
}

.top-wrap .go-top-button {
    background: rgb(0 150 199) !important;
}

.scroll-area .go-top::before {
    background-image: linear-gradient(to right, #4f5b76 0%, #4f5b76 100%) !important;
    background-image: -ms-linear-gradient(0deg, #4f5b76 0%, #4f5b76 100%) !important;
}

.top-wrap .go-top-button::after {
    background-image: -moz-linear-gradient(0deg, #4f5b76 0%, #4f5b76 100%);
    background-image: -webkit-linear-gradient(0deg, #4f5b76 0%, #4f5b76 100%);
}

h1.section-main-title span {
    color: rgb(0 150 199) !important;
}

.blog-area.style-two .blog-button a {
    color: #0096C7 !important;
    background-color: #ffffff !important;
}

.contact-area .form_box select {
    border: 1px solid rgba(122, 122, 122, 0.5);
    height: 60px;
    border-radius: 15px;
    padding: 0 23px 0;
    margin-bottom: 21px;
    width: 100%;
    transition: 0.5s;
    font-size: 16px;
    line-height: 26px;
    color: #7a7a7a;
    font-weight: 400;
    font-family: "Fira Sans";
}

.contact-image-area {
    padding: 0px 0 0px;
    position: relative;
}

.btn-2:hover {
    background-image: linear-gradient(90deg, #4f5b76 0%, #4f5b76 49%, #4f5b76 80%, #4f5b76 100%);
    animation: slidebg 5s linear infinite;
    color: #fff;
}

/* Contact form arrow */
.contact_from_box .form_box select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 22px;
    padding-right: 60px;
}

.contact_from_box .form_box select::-ms-expand {
    display: none;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .process-thumb:before {
        left: 73px !important;
        top: -17px !important;
    }
}

/* ==================================================
   Mobile and tablet layout fixes (desktop unchanged)
   ================================================== */
@media (max-width: 991px) {
    /* Columns stack on smaller screens, so the fixed left offset only pushes text to the right */
    .ml85 {
        margin-left: 0 !important;
    }

    /* Keep content images inside the screen width */
    .about-us-img img {
        max-width: 100%;
        height: auto;
    }

    .faq-thumb img {
        width: 100%;
        height: auto;
    }

    /* Page title strip aligned with the screen edge */
    .breadcumb-area {
        margin-left: 0 !important;
    }
}

@media (max-width: 479px) {
    /* Template default (260px) leaves large empty gaps above the About Us images */
    .about-us-thumb {
        margin-top: 40px;
    }
}

/* ==================================================
   Project page cards on phones and tablets (desktop unchanged)
   ================================================== */
@media (max-width: 991px) {
    /* One project per row so the infographics stay readable */
    .image_load > .grid-item {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Image uses the full column width */
    .case-study-single-box {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .case-study-thumb {
        margin-bottom: 0;
    }

    /* Title card sits below the image instead of covering its bottom part */
    .case-study-content {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        margin-top: 12px;
    }
}

/* ==================================================
   Layout stability (CLS)
   ================================================== */
/* The carousel CSS hides the hero until its script runs; when it appears it pushes the whole page down.
   Showing it from the start keeps the layout still. */
.hero-active.owl-carousel:not(.owl-loaded) {
    display: block;
}

/* Images with width/height attributes keep their natural aspect ratio (zero specificity, theme rules still win) */
:where(img[width][height]) {
    height: auto;
}

/* Preloader panels slide out with transform instead of left/right, which does not count as a layout shift */
.loader-wrapper .loder-section.left-section,
.loader-wrapper .loder-section.right-section {
    transition: transform 1s 1.4s ease;
}

.loaded .loder-section.left-section {
    left: 0;
    transform: translateX(-100%);
}

.loaded .loder-section.right-section {
    right: 0;
    transform: translateX(100%);
}

/* Preloader spinner leaves the same way (same path as top: -100%); the translate property
   is used because the spin animation already occupies transform */
.loaded .loader {
    top: 50%;
    translate: 0 -150vh;
}

/* Before the mobile menu script runs, the raw menu list is visible (taller than the final 64px bar)
   and the page jumps up when the script replaces it. Hide the source list and keep the bar height. */
@media (max-width: 991px) {
    .mobile-menu-area {
        min-height: 64px;
    }

    .mobile-menu > nav {
        display: none;
    }
}