@charset "UTF-8";

/*
Theme Name: Scanm
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.9
Requires PHP: 5.6
Version: 2.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

    :root {
      --bg: #f4f7fb;
      --surface: #ffffff;
      --text: #182232;
      --muted: #5d697a;
      --line: #d8e1ec;
      --accent: #1d4ed8;
      --accent-dark: #163ea9;
      --radius-xl: 28px;
      --radius-lg: 22px;
      --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      background: linear-gradient(180deg, #f7f9fc 0%, #f2f6fb 100%);
      color: var(--text);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
	img {
		width:  100%;
	}

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(18px);
      background: rgba(244, 247, 251, 0.88);
      border-bottom: 1px solid rgba(211, 220, 232, 0.95);
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
    }

    .header__inner {
      min-height: 88px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
	
	.language-dropdown__wrapper {
		cursor: pointer;
	}
	
	.language-list {
		display: none;
		position: absolute;
		padding: 0;
		margin-top: -1px;
		padding-bottom: 12px;
		padding-right: 12px;
	}
	
	.language-list li {
		list-style: none;
	}
	
	.language-dropdown {
		position: relative;
	}
	
	.language-dropdown:hover .language-list {
		display: block;
	}

    .brand {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 0 0 auto;
    }

    .brand__name {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #162033;
    }

    .brand__sub {
      font-size: 11px;
      color: #748195;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 600;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 26px;
      color: #6a7688;
      font-size: 14px;
      font-weight: 500;
    }

    .nav a {
      position: relative;
      transition: color 0.2s ease;
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease;
      opacity: 0.9;
    }

    .nav a:hover {
      color: var(--text);
    }

    .nav a:hover::after {
      transform: scaleX(1);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 22px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      transition: 0.2s ease;
      border: 1px solid transparent;
      cursor: pointer;
    }
    .btn--primary {
      background: linear-gradient(135deg, #2454eb 0%, #1d4ed8 100%);
      color: #fff;
      box-shadow: 0 14px 30px rgba(29, 78, 216, 0.22);
    }
    .btn--primary:hover {
      background: linear-gradient(135deg, #1e47cf 0%, #183fb5 100%);
      transform: translateY(-1px);
    }
    .btn--secondary {
      background: #fff;
      color: var(--text);
      border-color: var(--line);
    }

    .hero { padding: 72px 0 38px; }
    .hero__grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 28px;
      align-items: stretch;
    }
    .hero__content,
    .hero__visual {
      background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,248,252,0.98) 100%);
      border: 1px solid rgba(216,225,236,0.95);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }
    .hero__content {
      padding: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero__visual { padding: 24px; overflow: hidden; }

    .eyebrow {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #edf3ff;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0 0 18px;
      font-size: clamp(34px, 5.4vw, 58px);
      line-height: 1.03;
      letter-spacing: -0.045em;
      max-width: 760px;
    }

    .hero__lead {
      margin: 0;
      font-size: 18px;
      color: var(--muted);
      max-width: 760px;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .hero__labels {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      max-width: 560px;
    }
    .hero__label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      color: #334155;
      white-space: nowrap;
    }
    .hero__label::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(29, 78, 216, 0.12);
      flex: 0 0 auto;
    }

    .hero-photo {
      height: 100%;
      min-height: 430px;
      border-radius: 24px;
      background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
      border: 1px solid var(--line);
      /* padding: 18px; */
      display: flex;
      flex-direction: column;
      gap: 14px;
	  justify-content: center;
    }
	.hero-photo img {
		border-radius: 24px;
	}
    .hero-photo__badge {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .hero-photo__frame {
      flex: 1;
      border-radius: 20px;
      background: linear-gradient(145deg, #dfe7f2 0%, #eef3f9 100%);
      border: 1px dashed #b7c4d8;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
    }
    .hero-photo__placeholder { max-width: 360px; text-align: center; }
    .hero-photo__title {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .hero-photo__text { color: var(--muted); font-size: 15px; }

    .section { padding: 68px 0 0; }
    .section__head { max-width: 780px; margin-bottom: 22px; }
    .section__eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
    }
    h2 {
      margin: 0 0 12px;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.08;
      letter-spacing: -0.035em;
    }
    .section__desc { margin: 0; color: var(--muted); font-size: 17px; }

    .panel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .panel--dark {
      background: linear-gradient(145deg, #0d1729 0%, #15243c 48%, #1d3151 100%);
      border: none;
      box-shadow: 0 24px 60px rgba(15,23,42,0.22);
      color: #fff;
    }
    .hero-panel__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      align-content: center;
    }
    .hero-panel__card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      padding: 18px;
    }
    .hero-panel__card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
    }
    .hero-panel__card span { color: rgba(255,255,255,.74); font-size: 14px; }
    .hero-panel__footer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .pill {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 13px;
      color: rgba(255,255,255,.82);
    }

    .services {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }
    .card--image { overflow: hidden; }
    .card__image {
      height: 180px;
      background: linear-gradient(145deg, #dfe7f2 0%, #eef3f9 100%);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }
    .card__body { padding: 22px; }
    .card h3 {
      margin: 0 0 10px;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    .card p { margin: 0; font-size: 15px; color: var(--muted); }

/*     .carousel {
      position: relative;
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: center;
      gap: 14px;
    } */
    .carousel {
		position: relative;
		display: flex;
		/* grid-template-columns: 44px 1fr 44px; */
		gap: 14px;
		align-items: center;
    }
	.no-js .owl-carousel, .owl-carousel.owl-loaded {
		display: block;
		width: calc(100% - 116px);
	}
    .carousel__track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      /* overflow: hidden; */
    }
    .carousel__btn {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
	  cursor: pointer;
    }
    .work-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      /* box-shadow: var(--shadow); */
	  height: stretch;
    }
	.owl-carousel .owl-stage{display: flex;}
    .work-card__image {
      height: 220px;
      background: linear-gradient(145deg, #dfe7f2 0%, #eef3f9 100%);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }
    .work-card__body { padding: 20px; }
    .work-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
      line-height: 1.2;
    }
    .work-card span { color: var(--muted); font-size: 15px; }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .benefit-visual {
      height: 100%;
      min-height: 360px;
      border-radius: 22px;
      background: linear-gradient(145deg, #dfe7f2 0%, #eef3f9 100%);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 26px;
      text-align: center;
      color: var(--muted);
      font-size: 15px;
      font-weight: 600;
    }

    .checklist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }
    .checklist li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 16px;
      color: var(--text);
    }
    .checklist li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.12);
      flex: 0 0 auto;
    }

    .objects {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 18px;
    }
    .object {
      background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .object__image {
      height: 150px;
      background: linear-gradient(145deg, #dfe7f2 0%, #eef3f9 100%);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
	  object-fit: cover;
    }
    .object strong,
    .object span {
      display: block;
      padding-left: 22px;
      padding-right: 22px;
    }
    .object strong {
      padding-top: 18px;
      margin-bottom: 8px;
      font-size: 18px;
      line-height: 1.2;
    }
    .object span {
      padding-bottom: 22px;
      color: var(--muted);
      font-size: 15px;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .step {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .step__num {
      font-size: 12px;
      font-weight: 800;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 10px;
    }
    .step h3 {
      margin: 0 0 8px;
      font-size: 19px;
      line-height: 1.25;
    }
    .step p { margin: 0; color: var(--muted); font-size: 15px; }

    .tech-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 900px;
    }
    .tech-checklist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }
    .tech-checklist li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 16px;
      color: var(--text);
    }
    .tech-checklist li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.12);
      flex: 0 0 auto;
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .why-item {
      background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 22px;
      box-shadow: var(--shadow);
      font-size: 15px;
      color: var(--text);
    }

    .cta { padding: 38px 0 72px; }
    .cta__box {
      background: linear-gradient(140deg, #0f172a 0%, #182742 100%);
      color: #fff;
      border-radius: 30px;
      padding: 42px;
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 24px;
      align-items: center;
      box-shadow: 0 24px 60px rgba(15,23,42,0.28);
    }
    .cta__box p {
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: 17px;
    }
    .contact-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 22px;
      padding: 24px;
    }
    .contact-card strong {
      display: block;
      margin-bottom: 12px;
      font-size: 18px;
    }
    .form-grid {
      display: grid;
      gap: 12px;
      margin-bottom: 18px;
    }
    .input {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: #fff;
      padding: 12px 14px;
      font: inherit;
    }
    .input::placeholder { color: rgba(255,255,255,.54); }
    .input--textarea { min-height: 110px; resize: vertical; }

    .footer {
      margin-top: 28px;
      padding: 0 0 34px;
    }

    .footer__box {
      background: linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
      border: 1px solid rgba(216, 225, 236, 0.95);
      border-radius: 28px;
      padding: 26px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      color: #5f6d80;
      box-shadow: var(--shadow);
    }

    .footer__brand {
      min-width: 240px;
    }

    .footer__brand strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
      color: #162033;
      letter-spacing: -0.02em;
    }

    .footer__brand span {
      display: block;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #7a8798;
      margin-bottom: 10px;
    }

    .footer__text {
      max-width: 520px;
      font-size: 14px;
      line-height: 1.7;
    }

    .footer__nav {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      justify-content: flex-end;
	  align-items: center;
      max-width: 320px;
      font-size: 14px;
    }

    .footer__nav a {
      color: #536174;
      transition: color 0.2s ease;
    }

    .footer__nav a:hover {
      color: var(--accent);
    }

    @media (max-width: 1120px) {
      .hero__grid,
      .cta__box,
      .services,
      .two-col,
      .steps,
      .why-grid,
      .objects,
      .tech-columns,
      .carousel__track {
        grid-template-columns: 1fr 1fr;
      }
      .services .card:last-child,
      .steps .step:last-child,
      .why-grid .why-item:last-child,
      .objects .object:last-child,
      .carousel__track .work-card:last-child {
        grid-column: span 2;
      }
    }

    @media (max-width: 760px) {
      .container { width: min(var(--max), calc(100% - 24px)); }
      .header__inner {
        min-height: auto;
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
      }
	  .no-js .owl-carousel, .owl-carousel.owl-loaded {
		  width: 100%;
	  }
      .nav { display: none; }
      .footer__box {
        padding: 22px;
        flex-direction: column;
      }
      .footer__nav {
        justify-content: flex-start;
      }
      .hero { padding-top: 36px; }
      .hero__grid,
      .cta__box,
      .services,
      .two-col,
      .steps,
      .why-grid,
      .objects,
      .tech-columns,
      .carousel,
      .carousel__track {
        grid-template-columns: 1fr;
      }
      .carousel { grid-template-columns: 1fr; }
      .carousel__btn { display: none; }
      .services .card:last-child,
      .steps .step:last-child,
      .why-grid .why-item:last-child,
      .objects .object:last-child,
      .carousel__track .work-card:last-child {
        grid-column: auto;
      }
      .hero__content,
      .panel,
      .step,
      .why-item,
      .cta__box,
      .contact-card {
        padding: 22px;
      }
      .hero__content { padding: 28px; }
      .hero-panel__grid { grid-template-columns: 1fr; }
      .hero-photo { min-height: 320px; }
      .hero__labels { max-width: none; }
    }
	
	.grecaptcha-badge {
		display: none;
	}
	
	.container--form {
		position: relative;
	}
	
	#messagePopup--error,
	#messagePopup {
		position: absolute;
		z-index: 1;
		top: calc(50% - 140px);
		left: calc(50% - 170px);
		background: #fff;
		padding: 24px;
		border-radius: 22px;
		width: 340px;
	}
	
	.popupTitle {
		margin-bottom: 12px;
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}
	
	.popupMessage {
		font-size: 15px;
		font-weight: 400;
		text-align: center;
	}
	
	.not-active {
		display: none;
	}
	
	.close {
		background: linear-gradient(135deg, #2454eb 0%, #1d4ed8 100%);
		color: #fff;
		box-shadow: 0 14px 30px rgba(29, 78, 216, 0.22);
		margin: 12px auto 0;
		display: flex;
		width: fit-content;
	}
	
	.close:hover {
		background: linear-gradient(135deg, #1e47cf 0%, #183fb5 100%);
		transform: translateY(-1px);
	}
	
	.footer__contacts {
		display: flex;
		flex-direction: column;
	}