/*  Micom Systems additions on top of the TopTech theme.
    Keep site-specific rules here so theme files stay untouched. */

/* --- Pictures keep their shape ------------------------------------------
   The build writes each picture's real width and height onto the tag so the
   page does not jump about while it loads. Those attributes set the height as
   well as the width, so anywhere our CSS changes the width, the picture would
   be stretched or squashed to the old height. Letting the height follow the
   width keeps every picture in proportion. A rule that really wants a fixed
   height still wins, because a single tag name is the weakest kind of rule. */
img {
    height: auto;
}

/* --- The header can stay pinned ----------------------------------------
   The theme stops the page scrolling sideways with `overflow-x: hidden` on
   html and body. That quietly turns the body into its own scrolling box, and a
   pinned (sticky) header inside a scrolling box has nothing to pin to. `clip`
   holds back a sideways scroll in exactly the same way without making a
   scrolling box, so the header below can stay put. */
html,
body {
    overflow-x: clip;
    overflow-y: visible;
}

/* --- Call to action band ------------------------------------------------ */
.micom-cta-area {
    background: #041424;
    padding: 60px 0;
}

.micom-cta-area .section-title h1,
.micom-cta-area .section-title h2 {
    color: #ffffff;
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 10px;
}

.micom-cta-area .section-title p {
    color: #c4d0dd;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .micom-cta-area .col-lg-4 {
        text-align: left !important;
        margin-top: 26px;
    }
}

/* --- Hero list ---------------------------------------------------------- */
.micom-hero-list {
    margin: 22px 0 6px;
    padding: 0;
    list-style: none;
}

.micom-hero-list li {
    color: #ffffff;
    font-size: 17px;
    line-height: 32px;
}

.micom-hero-list li i {
    color: #0c5adb;
    margin-right: 10px;
}

/* --- Typed hero headline ------------------------------------------------ */
/* Typed line sitting under the static hero title. Height is reserved so the
   page does not jump as phrases change length. */
.hero-content .micom-typed {
    display: block;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 64px;
    min-height: 70px;
    color: #ffffff;
    margin: 12px 0 4px;
}

/* The typed words sit in <b>, and the script splits them into one <i> per
   letter. Style all three the same way, or the typed half renders lighter
   and more slanted than the "We". */
.hero-content .micom-typed .micom-headline-lead,
.hero-content .micom-typed .cd-words-wrapper b,
.hero-content .micom-typed .cd-words-wrapper b i,
.hero-content .micom-typed .cd-words-wrapper b em {
    font-style: normal;
}

.hero-content .micom-typed .micom-headline-lead,
.hero-content .micom-typed .cd-words-wrapper b,
.hero-content .micom-typed .cd-words-wrapper b i,
.hero-content .micom-typed .cd-words-wrapper b em {
    font-family: "Rajdhani", sans-serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
    color: #ffffff;
}

/* The markup has no whitespace between the two spans, so this margin is the
   only space between "We" and the typed word. */
.hero-content .micom-typed .micom-headline-lead {
    margin-right: 0.28em;
}

/* The hero row centres on the figure column, which is 631px tall against the
   text column's 353px. Left alone that leaves 183px above the text and 264px
   below it, which reads as a tilt. Pull the text column down by half the
   difference so both columns sit on the same optical centre. */
@media (min-width: 992px) {
    .hero-area.style-two .hero-content {
        margin-top: 40px;
    }
}

.hero-area.style-two .hero-button {
    margin-bottom: 4px;
}

/* The theme's fixed hero height clips the top of the heading on a phone,
   where the content is taller than the box. */
@media (max-width: 991px) {
    .hero-area.style-two {
        height: auto;
        min-height: 0;
        padding: 90px 0 70px;
        align-items: flex-start;
    }
}

.hero-content .micom-typed .cd-words-wrapper {
    vertical-align: top;
}

.hero-content .micom-typed.type .cd-words-wrapper::after {
    background-color: #0c5adb;
    width: 3px;
}

.hero-content .micom-typed.type .cd-words-wrapper.selected {
    background-color: #0c5adb;
}

.hero-content .micom-typed.type .cd-words-wrapper.selected b {
    color: #ffffff;
}

@media (max-width: 991px) {
    .hero-content .micom-typed {
        font-size: 42px;
        line-height: 54px;
        min-height: 60px;
    }
}

@media (max-width: 767px) {
    .hero-content .micom-typed {
        font-size: 32px;
        line-height: 42px;
        min-height: 48px;
    }
}

/* --- Hero extras: badge, rating, phone, screenshot ---------------------- */
.micom-hero-badge {
    display: inline-block;
    background: rgba(12, 90, 219, 0.18);
    border: 1px solid rgba(120, 175, 255, 0.5);
    color: #dceaff;
    border-radius: 40px;
    padding: 7px 18px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.micom-hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.micom-hero-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    transition: 0.3s;
}

a.micom-hero-rating:hover {
    color: #ffffff;
    opacity: 0.8;
}

/* Flex keeps the clipped half star level with the full ones, with no
   baseline guesswork. */
.micom-hero-rating .micom-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.micom-hero-rating .micom-stars i {
    color: #FBBC04;
    font-size: 15px;
}

/* Half star: a full star clipped down the middle, so the empty half shows
   nothing at all rather than an outline. */
.micom-hero-rating .micom-star-half {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    width: 0.5em;
    font-size: 15px;
    line-height: 1;
}

.micom-hero-rating .micom-star-half i {
    display: block;
    font-size: 1em;
    margin-right: 0;
}

.micom-hero-rating img {
    width: 20px;
    height: 20px;
}

.micom-hero-rating a {
    color: #9fc2ff;
    text-decoration: underline;
}

.micom-hero-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
}

.micom-hero-phone i {
    color: #0c5adb;
}

.micom-hero-phone a {
    color: #ffffff;
}

/* The theme renders this figure at its natural 496x752 and lets it hang a few
   pixels past the bottom of the hero, so he stands on the edge rather than
   floating. Capping it with max-width shrank him and lifted him clear, so the
   cap only applies below 992px, where the theme hides him anyway. */
@media (max-width: 991px) {
    .hero-area .hero-thumb img {
        max-width: 100%;
        height: auto;
    }

    .hero-area .hero-right {
        margin-top: 30px;
        text-align: center;
    }
}

/* --- Trust strip under the hero ----------------------------------------- */
.micom-trust-area {
    background: #ffffff;
    border-bottom: 1px solid #e6edf7;
    padding: 26px 0;
}

.micom-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.micom-trust-item i {
    color: #0c5adb;
    font-size: 22px;
    line-height: 1.3;
}

.micom-trust-item p {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: #041424;
}

/* --- Header menu fits on one line ---------------------------------------- */
/* The theme's spacing leaves the menu and the Get A Quote button a few pixels
   too wide for their column from 992 to 1399px, so the button dropped to a
   second line. Tighter spacing in those ranges. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-menu ul li {
        margin-right: 22px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-menu ul li {
        margin-right: 9px;
    }

    .style-two .header-button a {
        padding: 11px 20px;
    }
}

/* --- Service cards, light ------------------------------------------------ */
/* The theme's dark service section with its colours inverted: the light
   background of the intro and reviews sections, dark title, and the white
   cards lifted off it with a shadow. */
.service-area.style-two.micom-light {
    background: #f3f6fd;
}

.service-area.style-two.micom-light .section-title h1,
.service-area.style-two.micom-light .section-title h2 {
    color: #041424;
}

.service-area.style-two.micom-light .single-services-box {
    box-shadow: 0 10px 30px rgba(4, 20, 36, 0.08);
}

/* --- Process steps, four across ------------------------------------------ */
/* The theme drew this section for three columns: the dashed circle sits at a
   fixed offset that only centres on a three-column photo, and the 139px
   arrows overlap the photos when the gap between them is the four-column
   106px. Centre the circle on the photo and draw the arrows at 90px,
   centred on the column boundary. */
/* Concentric with the 216px photo at every width, 8px outside it (the
   theme's 244px circle sat at a fixed offset and left a 14px ring). */
.micom-process-4 .process-thumb:before {
    width: 232px;
    height: 232px;
    left: calc(50% - 116px);
    top: -8px;
}

/* The number badge 1.5 times the theme's 45px, always at the top left,
   centred on the dashed ring at the 10 o'clock point (the theme dropped
   every second one to the bottom left). */
.micom-process-4 .process-number span,
.micom-process-4 .process-number.two span {
    width: 68px;
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    left: calc(50% - 116px);
    top: -8px;
}

/* Stacked on phones: no arrows between the steps. */
@media (max-width: 767px) {
    .micom-process-4 .working-process-box:before,
    .micom-process-4 .working-process-box:after {
        display: none;
    }
}

@media (min-width: 768px) {
    .micom-process-4 .working-process-box {
        padding: 0 20px;
    }

    .micom-process-4 .working-process-box:before,
    .micom-process-4 .working-process-box:after {
        left: -62px;
        top: 76px;
        background-size: 100px auto;
    }

    /* The theme's arrows redrawn as marker-pen swooshes (the user's pick on
       arrow-choose.html). */
    .micom-process-4 .working-process-box:before {
        background-image: url(../images/micom/arrows/marker-up.svg);
    }

    .micom-process-4 .working-process-box:after {
        background-image: url(../images/micom/arrows/marker-down.svg);
    }

    .micom-process-4 .working-process-box.before-transprent:before,
    .micom-process-4 .working-process-box.after-transprent:after {
        background-image: none;
    }
}

/* --- Marker highlight ----------------------------------------------------- */
/* A phrase picked out like a marker pen: the cyan of a text selection
   (#00b9ea, the user's pick) behind the text in its own colour, the same look
   on every line when it wraps. */
mark.micom-highlight {
    background: #00b9ea;
    color: inherit;
    padding: 0;    /* tight to the word, like a selection */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --- Intro paragraph under the landing hero ------------------------------ */
/* A photo of people working at their monitors under a big blank wall fills the
   band (intro-office.jpg, 1818x1150). It's anchored to the bottom, so the
   people stay in view whatever the band's height, and the paragraph sits
   centred on the wall above them: the bottom padding is the people's share
   of the photo (the bottom 330 of 1150 rows, scaled with the width), so the
   text is centred in the wall zone. On desktop the band is as tall as the
   services section that follows (a script sets min-height). */
.micom-intro-area {
    position: relative;
    background: #e9e7e6;
    padding: 70px 0 calc(18vw + 30px);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* The photo is a layer 600px taller than the band, so that shifting it down
   for the parallax (--micom-intro-shift, set by the script: 600px as the
   band enters at the bottom of the screen, 120px at the centre, 0 as it
   leaves at the top, on desktop; none on phones) never uncovers the band's
   top. The upward travel is limited so the text stays on the wall. */
.micom-intro-area::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -600px;
    bottom: 0;
    background: url(../images/micom/intro-office.jpg) no-repeat center bottom / cover;
    transform: translateY(var(--micom-intro-shift, 0px));
    pointer-events: none;
}

.micom-intro-area .container {
    position: relative;
    width: 100%;
}

.micom-intro-area p {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-family: "Rajdhani", sans-serif;    /* the section titles' font and weight */
    font-weight: 700;
    font-size: 30px;
    line-height: 52px;
    color: #041424;
}

@media (min-width: 992px) {
    .micom-intro-area {
        padding-top: 90px;
    }
}

/* Phones and tablets: no parallax, the photo is just the band's size, and the
   script sets the bottom padding so the people stay below the text. */
@media (max-width: 991px) {
    .micom-intro-area::before {
        top: 0;
        transform: none;
    }
}

@media (max-width: 767px) {
    .micom-intro-area {
        padding: 56px 0 calc(24vw + 20px);
    }

    .micom-intro-area p {
        font-size: 22px;
        line-height: 38px;
    }
}

/* --- Scenario cards ------------------------------------------------------ */
.micom-scenario-area {
    padding: 95px 0 60px;
}

.micom-scenario-box {
    background: #ffffff;
    border: 1px solid #e3ecf7;
    border-left: 4px solid #0c5adb;
    border-radius: 10px;
    padding: 30px 28px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.micom-scenario-box span {
    display: block;
    color: #0c5adb;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.micom-scenario-box h4 {
    font-size: 21px;
    line-height: 30px;
    margin-bottom: 12px;
}

.micom-scenario-box p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 0;
}

/* --- Price pointer row --------------------------------------------------- */
.micom-price-row {
    background: #f3f7fd;
    padding: 46px 0;
}

.micom-price-row h4 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .micom-price-row h4 {
        font-size: 28px;
    }
}

.micom-price-row p {
    margin-bottom: 0;
    font-size: 16px;
    color: #4b5563;
}

/* Inverted: the price row and the contact cards on the dark navy of the
   process section, white headings, cards outlined on the dark. */
.micom-price-row.micom-dark {
    background: #021533;
}

.micom-price-row.micom-dark h4 {
    color: #ffffff;
}

.micom-price-row.micom-dark p {
    color: #b6b9c0;
}

.contact-info-area.style-two.micom-dark {
    background: #041424;
}

.contact-info-area.style-two.micom-dark .contact-info-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(120, 175, 255, 0.45);
}

.contact-info-area.style-two.micom-dark .contact-info-icon i {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.contact-info-area.style-two.micom-dark .contact-info-content h4 {
    color: #ffffff;
}

.contact-info-area.style-two.micom-dark .contact-info-content p,
.contact-info-area.style-two.micom-dark .contact-info-content p a {
    color: #6fa8ff;
}

@media (max-width: 991px) {
    .micom-price-row .text-lg-end {
        text-align: left !important;
        margin-top: 20px;
    }
}

/* --- Split intro section ------------------------------------------------ */
.micom-split-area {
    padding: 100px 0 60px;
}

.micom-split-area.grey {
    background: #f3f7fd;
}

.micom-split-thumb img {
    width: 100%;
    border-radius: 10px;
}

.micom-check-list {
    margin: 18px 0 26px;
    padding: 0;
    list-style: none;
}

.micom-check-list li {
    font-size: 17px;
    line-height: 34px;
    color: #4b5563;
}

.micom-check-list li i {
    color: #0c5adb;
    margin-right: 10px;
}

/* --- Plain feature grid ------------------------------------------------- */
.micom-grid-area {
    padding: 90px 0 50px;
}

.micom-grid-area.grey {
    background: #f3f7fd;
}

.micom-grid-box {
    background: #ffffff;
    border: 1px solid #e3ecf7;
    border-radius: 10px;
    padding: 30px 28px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transition: 0.4s;
}

.micom-grid-box:hover {
    box-shadow: 0 16px 40px rgba(12, 90, 219, 0.12);
    transform: translateY(-4px);
}

.micom-grid-box i {
    color: #0c5adb;
    font-size: 30px;
    display: block;
    margin-bottom: 14px;
}

/* A platform card shows that platform's logo where the others show an icon.
   It is given the icon's height so the row of cards still lines up. */
.micom-grid-box .micom-grid-logo {
    display: block;
    width: auto;
    height: 30px;
    margin-bottom: 14px;
}

.micom-grid-box h4 {
    font-size: 21px;
    margin-bottom: 10px;
}

.micom-grid-box p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 28px;
}

/* --- Price note under service intros ------------------------------------ */
.micom-price-note {
    display: inline-block;
    background: #eaf1fe;
    color: #0c5adb;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* --- Pricing page tweaks ------------------------------------------------ */
.pricing-area.inner-style .pricing-list ul li {
    text-align: left;
}

.micom-plan-note {
    color: #6b7280;
    font-size: 15px;
    margin-top: 18px;
}

/* --- Footer contact block ----------------------------------------------- */
.footer-widget-content .f-desc-2 a {
    color: #c9d6e6;
    transition: 0.3s;
}

.footer-widget-content .f-desc-2 a:hover {
    color: #ffffff;
}

/* --- Contact strip: long email addresses -------------------------------- */
.contact-info-area .contact-info-content p,
.contact-info-area .contact-info-content p a {
    word-break: break-word;
    font-size: 17px;
}

.contact-info-area .contact-info-content p a {
    color: inherit;
    transition: 0.3s;
}

.contact-info-area .contact-info-content p a:hover {
    color: #0c5adb;
}

.single-contact-info-box .contact-info-content h4 a {
    color: inherit;
    /* No breaks inside a word: the email may only wrap after its "@". */
    word-break: normal;
    overflow-wrap: normal;
}

/* At full size the email is a few pixels wider than the column (218px in
   215px), so it drops to two lines. A touch smaller keeps it on one. */
.single-contact-info-box .contact-info-content h4 a[href^="mailto:"] {
    font-size: 0.92em;
}

/* --- Contact page ------------------------------------------------------- */
.micom-booking-box {
    background: #f3f7fd;
    border: 1px dashed #b9cbe6;
    border-radius: 10px;
    padding: 26px 28px;
    margin-top: 30px;
}

.micom-booking-box h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

.micom-booking-box p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 28px;
}

/* --- Logo in the phone menu bar ----------------------------------------- */
/* The theme writes "Toptech" here as text; show the white logo instead. */
.mean-container .mean-bar::before {
    content: "";
    background: url(../images/micom/logo-white.svg) no-repeat left center / contain;
    width: 184px;
    height: 40px;
    top: 12px;
    left: 12px;
}

/* The theme lets the phone menu bar scroll away (responsive.css makes .sticky
   absolute under 992px). Keep it fixed at the top like the desktop header. */
@media (max-width: 991px) {
    .mobile-menu-area.sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        animation: none;    /* the theme's slide-in is for the desktop header */
    }
}

/* --- Landing hero fills the first screen -------------------------------- */
/* The hero ends exactly at the bottom of the screen. --micom-hero-top is the
   height of the top bar and header above it, set by the script after the hero.
   svh is the screen height with the phone's browser bars showing. */
.hero-area.micom-hero-full {
    /* The Nashville map render, without labels (ChatGPT, 2026-09-16) in place of the theme's
       hero-bg.png, centred and covering the hero like the theme's image. */
    background-image: url(../images/micom/hero-nashville-map.jpg);
    background-position: center center;
    position: relative;
    z-index: 0;
    height: calc(100vh - var(--micom-hero-top, 157px));
    height: calc(100svh - var(--micom-hero-top, 157px));
    min-height: 460px;
    padding-bottom: 0;
    align-items: stretch !important;
}

/* A dark blue tint over the map, heavy on the left behind the text and
   fading out to the right, so the title reads and the map still shows. */
.hero-area.micom-hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(11, 27, 63, 0.96) 0%,
        rgba(11, 27, 63, 0.90) 30%,
        rgba(11, 27, 63, 0.62) 55%,
        rgba(11, 27, 63, 0.28) 78%,
        rgba(11, 27, 63, 0.18) 100%);
    z-index: -1;
    pointer-events: none;
}

/* A soft dark blue halo around the figure, so he stands off the map. */
.hero-area.micom-hero-full {
    overflow: hidden;    /* a hero photo may run past the right edge */
}

.hero-area.micom-hero-full .hero-thumb::before {
    content: "";
    position: absolute;
    left: -70%;
    right: -70%;
    top: -15%;
    bottom: -8%;
    background: radial-gradient(ellipse 50% 50% at 50% 58%,
        rgba(11, 27, 63, 0.92) 0%,
        rgba(11, 27, 63, 0.70) 40%,
        rgba(11, 27, 63, 0.30) 70%,
        rgba(11, 27, 63, 0) 100%);
    pointer-events: none;
}

.hero-area.micom-hero-full .hero-thumb img {
    position: relative;
}

/* The hero photo enters with a short slide from the right and a fade:
   0.8 seconds, easing out, on load and on every change. Off for visitors who asked
   for reduced motion. */
@keyframes micom-slide-in {
    from { opacity: 0; transform: translateX(32px) var(--micom-slide-rest, translateX(0)); }
    to   { opacity: 1; transform: var(--micom-slide-rest, none); }
}

/* Leaving: fade out while sliding to the left, as if the next photo, arriving
   from the right, pushes it out. */
@keyframes micom-slide-out {
    from { opacity: 1; transform: var(--micom-slide-rest, none); }
    to   { opacity: 0; transform: translateX(-32px) var(--micom-slide-rest, translateX(0)); }
}

.hero-area.micom-hero-full .micom-slide.is-active {
    animation: micom-slide-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

.hero-area.micom-hero-full .micom-slide.is-leaving {
    animation: micom-slide-out 0.6s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-area.micom-hero-full .micom-slide.is-active,
    .hero-area.micom-hero-full .micom-slide.is-leaving {
        animation: none;
    }
}

@media (min-width: 992px) {
    .hero-area.micom-hero-full > .container {
        display: flex;
    }

    .hero-area.micom-hero-full .row {
        flex: 1;
        align-items: stretch !important;
    }

    /* Text centred on the hero's full height. */
    .hero-area.micom-hero-full .col-lg-8 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-area.micom-hero-full .hero-content {
        margin-top: 0;
    }

    /* The iPad photo (hands holding it, portrait, transparent background,
       both forearms leaving through the bottom) in place of the theme's
       figure. It stands on the hero's bottom edge whatever the hero's height,
       sized like the figure was: 752px, growing with the hero on big screens
       and shrinking on short ones so there's always room above it. */
    .hero-area.micom-hero-full .col-lg-4 {
        display: flex;
        align-items: flex-end;
    }

    /* At the column's start (the theme pulled the figure 48px left, into the
       title's line), and never wider than the room from there to the screen's
       edge: half the screen less the text column, for each container width.
       The 1.2 is the wider photo's height over its width (1086x1310). */
    .hero-area.micom-hero-full .hero-thumb {
        left: 0;
        top: 0;
        --micom-thumb-room: calc(50vw - 240px);
    }

    .hero-area.micom-hero-full .hero-thumb img {
        display: block;
        width: auto;
        /* 752px like the figure, growing with the hero on big screens and to
           three quarters of the hero on very tall ones; never within 48px of
           the hero's top (the tilt lifts the top-left corner by about a tenth,
           hence the 1.1), nor wider than the room to the screen's edge. */
        height: min(max(calc(752px * var(--micom-hero-scale, 1)), calc((100vh - var(--micom-hero-top, 157px)) * 0.75)), calc((100vh - var(--micom-hero-top, 157px) - 48px) / 1.1), calc(var(--micom-thumb-room) * 1.2));
        height: min(max(calc(752px * var(--micom-hero-scale, 1)), calc((100svh - var(--micom-hero-top, 157px)) * 0.75)), max(400px, calc((100svh - var(--micom-hero-top, 157px) - 48px) / 1.1)), calc(var(--micom-thumb-room) * 1.2));
    }

    /* Two photos take turns (the script swaps is-active every 6 seconds):
       the iPad, tilted 7 degrees, top to the left, as if held rather than
       upright, turned about its bottom-right corner so the bottom edge (where
       the sleeves are cut) only goes down, out of sight below the hero; and
       the consultant at the monitor, upright, laid over the first at the same
       height. The first sets the box's size. */
    .hero-area.micom-hero-full .micom-slide {
        opacity: 0;
    }

    .hero-area.micom-hero-full .micom-slide.is-active {
        opacity: 1;
    }

    .hero-area.micom-hero-full .micom-slide-ipad {
        --micom-slide-rest: rotate(-7deg);
        transform: var(--micom-slide-rest);
        transform-origin: 100% 100%;
    }

    .hero-area.micom-hero-full .hero-thumb img.micom-slide + img.micom-slide {
        position: absolute;    /* the halo rule above sets the images relative */
        left: 0;
        bottom: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hero-area.micom-hero-full .hero-thumb {
        --micom-thumb-room: calc(50vw - 210px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hero-area.micom-hero-full .hero-thumb {
        --micom-thumb-room: calc(50vw - 180px);
    }
}

@media (min-width: 992px) {
    /* On big screens the title, the typed line and the figure grow with the
       screen, so the hero isn't mostly empty space. The script sets
       --micom-hero-scale from the hero's height and the window's width: 1 up
       to a 900px hero on a 1700px window (a 16-inch MacBook Pro is unchanged),
       up to 1.4 on a 2560x1440 screen. The buttons and the proof row keep
       their size. The title wraps to two lines once it's about 1.1 times. */
    .hero-area.micom-hero-full .hero-content h1 {
        font-size: calc(var(--micom-hero-h1, 70px) * var(--micom-hero-scale, 1));
        line-height: calc(var(--micom-hero-h1-lh, 74px) * var(--micom-hero-scale, 1));
        transition: none;    /* the theme's 0.5s transition would animate the size on resize */
    }

    .hero-area.micom-hero-full .hero-content .micom-typed {
        font-size: calc(var(--micom-hero-typed, 52px) * var(--micom-hero-scale, 1));
        line-height: calc(var(--micom-hero-typed-lh, 64px) * var(--micom-hero-scale, 1));
        min-height: calc(var(--micom-hero-typed-mh, 70px) * var(--micom-hero-scale, 1));
    }

    .hero-area.micom-hero-full .hero-button {
        margin-top: calc(49px * var(--micom-hero-scale, 1));
    }

    /* The logo above the title, desktop only. Light version for the dark
       background. The script sets its width to the title's widest line, so it
       grows with the title. Hidden on short screens (under 800px, e.g.
       1280x720 and 1366x768), where it would push the rating and phone row
       out of the hero. */
    .micom-hero-logo {
        margin-bottom: calc(28px * var(--micom-hero-scale, 1));
    }

    .micom-hero-logo img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.micom-hero-logo {
    display: none;
}

@media (min-width: 992px) and (min-height: 800px) {
    .micom-hero-logo {
        display: block;
    }
}

/* The theme's smaller title in this width range (responsive.css). */
@media (min-width: 1400px) and (max-width: 1600px) {
    .hero-area.micom-hero-full {
        --micom-hero-h1: 56px;
        --micom-hero-h1-lh: 56px;
    }
}

/* Tablets held upright (992px and up, taller than wide) keep the desktop
   layout, photo on the right, but with the title and the typed line a size
   smaller: at desktop sizes the longest typed phrase takes over half of a
   1024px screen and leaves the photo a narrow strip. */
@media (min-width: 992px) and (orientation: portrait) {
    .hero-area.micom-hero-full {
        --micom-hero-h1: 56px;
        --micom-hero-h1-lh: 60px;
        --micom-hero-typed: 40px;
        --micom-hero-typed-lh: 50px;
        --micom-hero-typed-mh: 56px;
    }
}

/* Phones and tablets: the page's height rule above becomes a minimum, as the
   stacked content can be taller than the screen, and the content sits in the
   middle of the space below the 64px menu bar, which overlaps the hero: the
   top padding is 64px more than the bottom. */
@media (max-width: 991px) {
    .hero-area.micom-hero-full {
        height: auto;
        min-height: calc(100vh - var(--micom-hero-top, 0px));
        min-height: calc(100svh - var(--micom-hero-top, 0px));
        padding: 94px 0 30px;
        align-items: center !important;
    }
}

/* Accent word in section headings: Caveat, chosen on font-choose.html.
   Brand blue on light sections, lighter blue on dark ones. */
.section-title h1 em.micom-accent,
.section-title h2 em.micom-accent {
	font-family: Caveat, cursive;
	font-style: normal;
	font-weight: 700;
	font-size: 128%;
	line-height: 1;
	margin-right: 0.08em; /* Caveat's word space looks tight next to Rajdhani */
	color: #0c5adb;
}
.service-area:not(.micom-light) .section-title h1 em.micom-accent,
.working-proces-area .section-title h1 em.micom-accent,
.section-title h2 em.micom-accent {
	color: #6fa8ff;
}

/* --- Service cards, equal height ----------------------------------------- */
/* The theme lets each card shrink to its own text, so a card with two lines
   of copy is shorter than its neighbours. Stretch every card in the row to
   the tallest one and keep the Read More arrow on the bottom edge. */
.service-area .row.micom-cards > [class*="col-"] {
	display: flex;
}
.service-area .row.micom-cards .single-services-box {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.service-area .row.micom-cards .service-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.service-area .row.micom-cards .service-content a {
	margin-top: auto;
}

/* White price row, for a band between two pale-blue sections (the home
   page's "Need a website?" between IT Solutions and the reviews). */
.micom-price-row.micom-plain {
	background: #ffffff;
	border-top: 1px solid #e3e9f4;
	border-bottom: 1px solid #e3e9f4;
}

/* The theme pulls the process section up over the section before it (-163px,
   -256px on smaller screens), which is harmless dark on dark. When the white
   "Need a website?" band sits between them, the overlap would cover the band,
   so the process section starts where the band ends. */
.micom-price-row + .style-two.working-proces-area,
.micom-grid-area + .style-two.working-proces-area {
	margin-top: 0;
	padding-top: 90px;
}

/* Button under a set of service cards, to the page with the full list. */
.micom-cards-more {
	margin-top: 20px;
}

/* The theme pads service cards 40px on the left but 0 on the right above
   1200px (15px from 992px), so card text ran to the right edge. Match the
   left at every width; the number badge is positioned on its own and stays
   flush with the edge. */
.service-area.style-two .single-services-box {
	padding-right: 40px;
}

/* Platform logos beside a slim row's heading (WordPress and Shopify on the
   home page's "Need a website?" band). */
.micom-row-with-logos {
	display: flex;
	align-items: center;
	gap: 24px;
}
.micom-row-logos {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.micom-row-logos img {
	height: 48px;
	width: auto;
}
@media (max-width: 575px) {
	.micom-row-with-logos {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.micom-row-logos img {
		height: 40px;
	}
}

/* --- Contact map with our own bubble over the pin ------------------------ */
/* Google's embed always puts its place card in the top-left corner and has
   no option to show it over the pin. The map sits 120px higher than its
   window, so the card (about 100px tall) is out of view while Google's logo
   and terms at the bottom stay visible, and our bubble stands over the pin.
   Google centres the map on the place, so the pin is at the centre of the
   iframe: 60px above the centre of the window. */
.micom-map-frame {
	position: relative;
}
.micom-map-view {
	position: relative;
	overflow: hidden;
	height: 600px;
}
.google-map .micom-map-view iframe {
	position: absolute;
	top: -120px;
	left: 0;
	width: 100%;
	height: calc(100% + 120px);
	border: 0;
}
.micom-map-bubble {
	position: absolute;
	left: 50%;
	top: calc(50% - 60px);
	transform: translate(-50%, calc(-100% - 52px));
	width: 290px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(4, 20, 36, 0.22);
	padding: 16px 18px 14px;
	z-index: 2;
}
.micom-map-bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	margin-left: -9px;
	border: 9px solid transparent;
	border-bottom: 0;
	border-top-color: #ffffff;
}
.micom-map-bubble h4 {
	font-size: 19px;
	margin: 0 0 4px;
	color: #041424;
}
.micom-map-bubble p {
	font-size: 14px;
	line-height: 1.45;
	color: #4b5563;
	margin: 0 0 10px;
}
.micom-map-bubble-links {
	display: flex;
	gap: 18px;
	font-size: 14px;
	font-weight: 600;
}
.micom-map-bubble-links a {
	color: #0c5adb;
}
.micom-map-bubble-links .bi-star-fill {
	color: #f5a623;
}
@media (min-width: 992px) and (max-width: 1199px) {
	.micom-map-view { height: 500px; }
}
/* The theme's map is 350 to 400px here, too short for the bubble above the pin. */
@media (min-width: 600px) and (max-width: 991px) {
	.micom-map-view { height: 480px; }
}
/* Phones: the bubble moves under the map as a plain card. */
@media (max-width: 599px) {
	.micom-map-view { height: 300px; }
	.micom-map-bubble {
		position: static;
		transform: none;
		width: auto;
		margin: 12px 0 0;
		box-shadow: 0 2px 10px rgba(4, 20, 36, 0.12);
	}
	.micom-map-bubble::after { display: none; }
}

/* Home page quote form: one dark band, no white box, form edge to edge in height. */
.contact-area.style-three.inner.micom-contact-dark {
    padding: 0;
    background: #041424 url(../images/home-2/service-bg.png) center center / cover no-repeat;
}
.micom-contact-dark.style-three.inner .add-white-bg {
    background: transparent !important;
    filter: none;
    border-radius: 0;
    padding-top: 110px;
    padding-bottom: 110px;
}
.micom-contact-dark .contact-contetn h4 { color: #fff; }
.micom-contact-dark .single-input-box input,
.micom-contact-dark .single-input-box textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.micom-contact-dark .single-input-box input::placeholder,
.micom-contact-dark .single-input-box textarea::placeholder { color: rgba(255, 255, 255, 0.65); }
.micom-contact-dark .single-input-box input:focus,
.micom-contact-dark .single-input-box textarea:focus { border-color: #6fa8ff; }
/* "Get a quote" links jump here; keep the heading clear of the sticky header. */
#quote-form { scroll-margin-top: 60px; }

/* Inner pages use the home page's white header, so the page banner no longer
   slides up under it: drop the theme's -100px pull and the matching top padding. */
@media (min-width: 992px) {
    .breadcumb-area {
        margin-top: 0;
        padding-top: 111px;
    }
}

/* The theme pins the header by switching it to `fixed` once you have scrolled
   100px. That takes the header out of the page, so everything below jumps up by
   its height and a page banner's heading ends up hidden behind it. Sticky
   positioning pins the header just the same but keeps its space in the page, so
   nothing moves. The theme's slide-in animation is dropped with it: the header
   never leaves, so it has nothing to slide back in from. */
@media (min-width: 992px) {
    .header-area.style-two,
    .header-area.style-two.sticky {
        position: sticky !important;
        top: 0;
        z-index: 999;
        background: #ffffff;
    }

    .header-area.style-two.sticky {
        animation: none;
    }
}

/* Our own step photos are 2x files; show them at the theme's 216px. */
.process-thumb img[src*="/steps/"] {
    width: 216px;
    height: 216px;
}

/* One quiet line under the price pill: the price is a guide, not a fixed floor. */
.micom-price-small {
    font-size: 15px;
    color: #6b7280;
    margin: 2px 0 8px;
}

/* --- Example screens: app mock-ups drawn in HTML ------------------------- */
.micom-screens-area { padding: 100px 0 70px; background: #f3f7fd; }
.micom-screen { margin: 0 0 34px; }
.micom-screen-frame {
    background: #fff;
    border: 1px solid #d9e3f1;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(4, 20, 36, 0.10);
    overflow: hidden;
    font-family: "Nunito", sans-serif;
    color: #0b1b2b;
}
.micom-screen-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; background: #eef3fa; border-bottom: 1px solid #d9e3f1;
}
.micom-screen-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9d5e6; }
.micom-screen-bar span { margin-left: 10px; font-size: 13px; color: #5a6b80; }
.micom-screen-body { padding: 18px; font-size: 13px; line-height: 1.4; }
.micom-screen figcaption { margin-top: 14px; font-size: 16px; color: #4b5563; text-align: center; }
.micom-screens-note { text-align: center; font-size: 14px; color: #6b7280; margin: 0; }

.ms-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ms-top strong { font-size: 16px; }
.ms-search { flex: 1; min-width: 140px; padding: 7px 12px; border: 1px solid #d9e3f1; border-radius: 6px; color: #8a97a8; }
.ms-btn { background: #0c5adb; color: #fff; border-radius: 6px; padding: 7px 12px; font-weight: 700; font-size: 12px; margin-left: auto; }
.ms-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.ms-grey { background: #eef1f5; color: #4b5563; }
.ms-blue { background: #e3edfd; color: #0c5adb; }
.ms-amber { background: #fdf1dc; color: #a15c00; }
.ms-green { background: #e1f5ea; color: #0f7a4d; }
.ms-red { background: #fde6e3; color: #b23a2e; }

.ms-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ms-col { background: #f5f8fc; border-radius: 8px; padding: 10px; }
.ms-col h6 { font-size: 13px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.ms-card { background: #fff; border: 1px solid #e3ebf5; border-radius: 6px; padding: 9px 10px; margin-bottom: 8px; display: grid; gap: 2px; }
.ms-card small { color: #8a97a8; }
.ms-card span { color: #5a6b80; }
.ms-card em { font-style: normal; font-weight: 700; }

.ms-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ms-detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
.ms-detail dt { color: #8a97a8; font-weight: 600; }
.ms-detail dd { margin: 0; font-weight: 600; }
.ms-timeline { list-style: none; margin: 0; padding: 0; }
.ms-timeline li { position: relative; padding: 0 0 12px 22px; display: grid; }
.ms-timeline li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #c9d5e6; background: #fff; }
.ms-timeline li.done::before { background: #0c5adb; border-color: #0c5adb; }
.ms-timeline li small { color: #8a97a8; }

.ms-table { width: 100%; border-collapse: collapse; }
.ms-table th { text-align: left; color: #8a97a8; font-weight: 600; padding: 0 6px 8px; }
.ms-table td { padding: 8px 6px; border-top: 1px solid #eef1f5; }

@media (max-width: 767px) {
    .micom-screens-area { padding: 70px 0 40px; }
    .ms-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-detail { grid-template-columns: 1fr; }
    .micom-screen-body { padding: 12px; font-size: 12px; }
}

/* Linked service cards: the whole card is clickable, not only the arrow.
   The arrow's link stretches over the card (the card is position: relative). */
.single-services-box.micom-card-link .service-content a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
.single-services-box.micom-card-link { cursor: pointer; }

/* Cards with no link keep their resting look on hover, so they don't
   suggest a click that goes nowhere. */
.style-two .single-services-box.micom-card-static:hover:before { width: 0; left: 50%; }
.style-two .single-services-box.micom-card-static:hover .service-icon-thumb:before { background: #E6EEFB; }
.style-two .single-services-box.micom-card-static:hover .service-icon-thumb img { filter: none; }
.style-two .single-services-box.micom-card-static:hover .service-content h4 { color: #041424; }
.style-two .single-services-box.micom-card-static:hover .service-content p { color: #686868; }

/* Platform logo (or icon) at the top of a scenario box, e.g. WordPress / Shopify. */
.micom-scenario-mark {
    display: block;
    height: 44px;
    width: auto;
    margin-bottom: 16px;
}
i.micom-scenario-mark {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    background: #0c5adb;
    border-radius: 10px;
}

/* --- 404 page ----------------------------------------------------------- */
.micom-notfound-area { padding: 120px 0 130px; }
.micom-notfound-code {
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
    font-size: 90px;
    font-weight: 700;
    line-height: 1;
    color: #0c5adb;
    margin-bottom: 10px;
}
.micom-notfound-area h1 { font-size: 42px; line-height: 52px; margin-bottom: 14px; }
.micom-notfound-area > .container p { font-size: 17px; color: #4b5563; margin-bottom: 22px; }
.micom-notfound-links { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.micom-notfound-links a { color: #0c5adb; font-weight: 600; }
@media (max-width: 767px) {
    .micom-notfound-area { padding: 80px 0 90px; }
    .micom-notfound-area h1 { font-size: 32px; line-height: 42px; }
}

/* --- Contact form: honeypot, spam check, toast ---------------------------- */
/* A field only a bot fills in. Off-screen rather than display:none, which
   some bots detect. */
.micom-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile { margin-bottom: 18px; }

.micom-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
}

.micom-toast {
    position: relative;
    background: #041424;
    color: #fff;
    border-left: 4px solid #0c5adb;
    border-radius: 8px;
    padding: 16px 44px 16px 18px;
    font-size: 16px;
    line-height: 24px;
    box-shadow: 0 12px 34px rgba(4, 20, 36, 0.28);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.micom-toast.is-in { opacity: 1; transform: translateY(0); }
.micom-toast.is-ok { border-left-color: #16a34a; }
.micom-toast.is-error { border-left-color: #dc2626; }

.micom-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    color: #9fb3c9;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}

.micom-toast-close:hover { color: #fff; }

button[type="submit"][disabled] { opacity: 0.7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .micom-toast { transition: none; transform: none; }
}

@media (max-width: 575px) {
    .micom-toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* Form labels: browsers and password managers fill the right box when each
   field is named, and people can see what a filled-in box holds. */
.micom-field-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #041424;
}

.micom-field-label span {
    font-weight: 400;
    color: #6b7280;
}

.micom-contact-dark .micom-field-label { color: #ffffff; }
.micom-contact-dark .micom-field-label span { color: #9fb3c9; }

/* "Send a copy to my email" */
.micom-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.micom-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0c5adb;
    margin: 0;
    flex: none;
}

.micom-check label {
    margin: 0;
    font-size: 15.5px;
    color: #4b5563;
    cursor: pointer;
}

.micom-contact-dark .micom-check label { color: #c4d4e6; }

/* --- Heading structure ---------------------------------------------------
   Each page now has one <h1> (the page banner, or the hero on the home page).
   Section titles are <h2> and the small label above them is a <span>, so the
   order makes sense to search engines and screen readers. These rules give
   the new tags the theme's original look. */
.section-title h2 {
    font-size: 45px;
    line-height: 55px;
    color: #041424;
    font-weight: 700;
    margin: 0 0 14px;
}

/* Dark sections only, mirroring the theme's own h1 rules. */
.style-two.service-area .section-title h2,
.style-two.working-proces-area .section-title h2,
.style-two.video-area .section-title h2,
.micom-cta-area .section-title h2,
.testimonial-area .section-title h2 { color: #ffffff; }

.service-area.style-two.micom-light .section-title h2 { color: #041424; }

.section-title .micom-eyebrow {
    display: block;
    font-family: "Nunito", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0c5adb;
    margin-bottom: 12px;
}

.breadcumb-content h1 {
    font-size: 55px;
    line-height: 1.15;
    color: #fff;
    font-weight: 700;
    margin: 0 0 18px;
}

@media (max-width: 991px) {
    .section-title h2 { font-size: 36px; line-height: 46px; }
    .breadcumb-content h1 { font-size: 40px; }
}

@media (max-width: 575px) {
    .section-title h2 { font-size: 30px; line-height: 40px; }
    .breadcumb-content h1 { font-size: 32px; }
}

/* --- Keyboard users ------------------------------------------------------
   The theme removes focus outlines everywhere. Put one back for people who
   navigate with a keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0c5adb !important;
    outline-offset: 2px;
    border-radius: 2px;
}

.micom-contact-dark a:focus-visible,
.breadcumb-area a:focus-visible,
.footer-area a:focus-visible,
.header-area a:focus-visible { outline-color: #6fa8ff !important; }

/* Skip link: hidden until a keyboard user tabs to it. */
.micom-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: #0c5adb;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}

.micom-skip:focus {
    left: 0;
    color: #fff;
}

/* The card number is a number, not a heading, so it is a <span> now. Keep the
   theme's pill on the right-hand edge of the card. */
.style-two .service-number .micom-card-number {
    background: #E6EEFB;
    position: absolute;
    right: 0;
    top: 33px;
    transition: 0.5s;
    font-size: 26px;
    line-height: 50px;
    color: #0c5adb;
    font-weight: 600;
    font-family: "Rajdhani", sans-serif;
    padding: 0 14px 0 28px;
    border-radius: 30px 0 0 30px;
    margin: 0;
    display: block;
}

/* --- Privacy policy and other plain text pages --------------------------- */
.micom-legal-area { padding: 90px 0 100px; }
.micom-legal-area h2 { font-size: 26px; line-height: 34px; margin: 34px 0 12px; color: #041424; }
.micom-legal-area h2:first-of-type { margin-top: 0; }
.micom-legal-area p { font-size: 17px; line-height: 30px; color: #4b5563; margin-bottom: 14px; }
.micom-legal-date { font-size: 15px !important; color: #6b7280 !important; margin-bottom: 30px !important; }
.micom-legal-list { margin: 0 0 16px; padding-left: 20px; }
.micom-legal-list li { font-size: 17px; line-height: 30px; color: #4b5563; margin-bottom: 8px; }
.footer-bottom-content a { color: #9fc2ff; text-decoration: underline; }