:root {
    --skn-navy: #071b35;
    --skn-navy-2: #0b315e;
    --skn-blue: #1769d3;
    --skn-blue-2: #1680ff;
    --skn-cyan: #19b9e8;
    --skn-gold: #d59a55;
    --skn-light: #f4f8fc;
    --skn-text: #24354a;
    --skn-muted: #65758a;
    --white: #fff;
    --skn-cyan-2: #65d6f3;
    --skn-line: #d8e7f3;
    --skn-green: #21b66f;
    --skn-red: #e33434;
    --shadow: 0 18px 50px rgba(7, 27, 53, .12);
  }

  * {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth
  }

  body {
    font-family: "Poppins", sans-serif;
    color: var(--skn-text);
    overflow-x: hidden;
    background: #fff
  }

  a {
    text-decoration: none
  }

  img {
    max-width: 100%;
    display: block
  }

  .container {
    max-width: 1400px;
    padding: 0 20px;
  }

  .topbar {
    background: var(--skn-navy);
    color: #dce9f7;
    font-size: 13px
  }

  .topbar a {
    color: #dce9f7;
    font-weight: 600;
  }

  .navbar-brand:focus,
  .navbar-brand:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .topbar .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--skn-cyan);
    display: inline-block;
    margin: 0 9px
  }

  .main-header {
    background: #fff;
    box-shadow: 0 8px 30px rgba(7, 27, 53, .08);
    position: sticky;
    top: 0;
    z-index: 1000
  }

  .navbar-brand img {
    width: 250px;
    height: auto
  }

  .nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--skn-navy) !important;
    padding: 28px 14px !important;
    position: relative
  }

  .nav-link:hover:after,
  .nav-link.active:after {
    transform: scaleX(1)
  }

  .dropdown-menu {
    border: 0;
    border-top: 3px solid var(--skn-blue-2);
    box-shadow: 0 18px 45px rgba(7, 27, 53, .16);
    border-radius: 0 0 12px 12px;
    padding: 10px;
    min-width: 250px
  }

  .dropdown-item {
    font-size: 13px;
    font-weight: 500;
    padding: 10px 13px;
    border-radius: 7px;
    color: var(--skn-navy)
  }

  .dropdown-item:hover {
    background: #edf6ff;
    color: var(--skn-blue)
  }

  .btn-skn {
    background: var(--skn-blue-2);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 600;
    transition: .3s;
    box-shadow: 0 8px 20px rgba(23, 105, 211, .22)
  }

  .btn-skn:hover {
    background: var(--skn-navy);
    color: #fff;
    transform: translateY(-2px)
  }

  .btn-outline-skn {
    border: 1px solid rgba(23, 105, 211, .35);
    color: var(--skn-navy);
    border-radius: 5px;
    padding: 11px 21px;
    font-size: 13px;
    font-weight: 600
  }

  .btn-outline-skn:hover {
    background: var(--skn-navy);
    color: #fff;
    border-color: var(--skn-navy)
  }

  .hero {
    min-height: 690px;
    background: #f4f8fc;
    position: relative;
    overflow: hidden
  }

  .hero:before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(25, 185, 232, .08);
    right: -130px;
    top: -150px
  }

  .hero-content {
    padding: 105px 0 85px;
    position: relative;
    z-index: 2
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: #65d6f3;
    margin-bottom: 18px
  }

  .eyebrow:before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--skn-gold)
  }

  .hero h1 {
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--skn-navy);
    margin-bottom: 22px
  }

  .hero h1 span {
    color: var(--skn-blue-2)
  }

  .hero p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--skn-muted);
    max-width: 650px
  }

  .hero-art {
    position: relative;
    z-index: 2
  }

  .hero-art img {
    width: 100%;
    max-width: 610px;
    margin: auto;
    filter: drop-shadow(0 25px 35px rgba(7, 27, 53, .16))
  }

  .hero-stats {
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid rgba(7, 27, 53, .1);
    display: flex;
    gap: 40px
  }

  .hero-stat strong {
    display: block;
    color: var(--skn-navy);
    font-size: 19px
  }

  .hero-stat span {
    font-size: 12px;
    color: var(--skn-muted)
  }

  .section {
    padding: 60px 0
  }

  .section-light {
    background: var(--skn-light)
  }

  .section-title {
    max-width: 100%;
    margin-bottom: 48px
  }

  .section-title .eyebrow {
    margin-bottom: 10px
  }

  .section-title h2 {
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.2;
    color: var(--skn-navy);
    font-weight: 700;
    letter-spacing: -1px
  }

  .section-title p {
    color: var(--skn-muted);
    line-height: 1.85;
    font-size: 14px
  }

  .cap-card {
    height: 100%;
    padding: 30px;
    border: 1px solid #e2ebf4;
    border-radius: 12px;
    background: #fff;
    transition: .35s;
    box-shadow: 0 5px 20px rgba(7, 27, 53, .04)
  }

  .cap-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: rgba(23, 128, 255, .25)
  }

  .icon-box {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: #eaf5ff;
    color: var(--skn-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 22px
  }

  .cap-card h3 {
    font-size: 18px;
    color: var(--skn-navy);
    margin-bottom: 12px
  }

  .cap-card p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--skn-muted);
    margin: 0
  }

  .about-panel {
    background: var(--skn-navy);
    border-radius: 20px;
    padding: 58px;
    color: #fff;
    position: relative;
    overflow: hidden
  }

  .about-panel:after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(25, 185, 232, .2);
    border-radius: 50%;
    right: -100px;
    bottom: -170px
  }

  .about-panel h2 {
    font-size: 40px;
    line-height: 1.2
  }

  .about-panel p {
    color: #c7d5e5;
    line-height: 1.9;
    font-size: 14px
  }

  .check-list {
    padding: 0;
    margin: 24px 0 0;
    list-style: none
  }

  .check-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 13px;
    font-size: 15px;
    color: #dbe7f2
  }

  .check-list i {
    color: var(--skn-cyan);
    margin-top: 4px
  }

  .process-item {
    position: relative;
    text-align: center;
    padding: 10px 15px
  }

  .process-number {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: #eaf5ff;
    border: 1px solid #cce6ff;
    color: var(--skn-blue);
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .process-item h4 {
    font-size: 15px;
    color: var(--skn-navy);
    margin-bottom: 8px
  }

  .process-item p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--skn-muted)
  }

  .process-line {
    position: absolute;
    left: 62%;
    right: -38%;
    top: 39px;
    border-top: 1px dashed #bdd4ea
  }

  .industry-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    min-height: 265px;
    background: #071b35;
    color: #fff
  }

  .industry-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: .5s
  }

  .industry-card:hover img {
    transform: scale(1.06);
    opacity: 1
  }

  .industry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(7 27 53) 0%, rgb(4 31 65 / 0%) 35%, rgb(230 230 230 / 0%) 65%, rgb(228 228 228 / 0%) 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
  }

  .industry-overlay h3 {
    font-size: 17px;
    margin: 0
  }

  .quote-section {
    background: var(--skn-navy);
    color: #fff;
    padding: 80px 0
  }

  .quote-section h2 {
    font-size: 42px;
    line-height: 1.2
  }

  .quote-section p {
    color: #c8d6e6;
    line-height: 1.8;
    font-size: 14px
  }

  .quote-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18)
  }

  .form-control,
  .form-select {
    border-color: #dbe5ef;
    border-radius: 5px;
    font-size: 13px;
    padding: 12px 14px
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #69aefb;
    box-shadow: 0 0 0 .2rem rgba(23, 128, 255, .1)
  }

  .footer {
    background: #061629;
    color: #9fb2c8;
    padding: 65px 0 25px
  }

  .footer h5 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 20px
  }

  .footer p,
  .footer li,
  .footer a {
    font-size: 12px;
    line-height: 1.9;
    color: #9fb2c8
  }

  .footer ul {
    list-style: none;
    padding: 0;
    margin: 0
  }

  .footer a:hover {
    color: #fff
  }

  .footer-logo {
    width: 190px;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 18px
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 45px;
    padding-top: 18px;
    font-size: 11px
  }

  .mobile-toggle {
    border: 0;
    background: var(--skn-navy);
    color: #fff;
    border-radius: 5px;
    padding: 10px 13px
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: min(360px, 90vw);
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: .35s;
    box-shadow: -15px 0 40px rgba(7, 27, 53, .18);
    overflow-y: auto
  }

  .mobile-menu.open {
    right: 0
  }

  .mobile-menu-header {
    padding: 20px;
    border-bottom: 1px solid #e7eef5;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .mobile-menu-header img {
    width: 165px
  }

  .mobile-close {
    border: 0;
    background: #edf6ff;
    color: var(--skn-navy);
    width: 38px;
    height: 38px;
    border-radius: 50%
  }

  .mobile-nav {
    padding: 15px 20px
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: var(--skn-navy);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #edf1f5
  }

  .mobile-sub {
    display: none;
    padding: 0 0 6px 15px
  }

  .mobile-sub.show {
    display: block
  }

  .mobile-sub a {
    font-size: 12px;
    font-weight: 500
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 15, 30, .45);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: .3s
  }

  .menu-backdrop.show {
    opacity: 1;
    visibility: visible
  }

  .floating-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 9px
  }

  .float-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 20px rgba(7, 27, 53, .22)
  }

  .float-btn.phone {
    background: #e33434
  }

  .float-btn.wa {
    background: #1dbb63
  }

  @media(max-width:991.98px) {
    .topbar {
      display: none
    }

    .desktop-nav {
      display: none !important
    }

    .hero {
      min-height: auto
    }

    .hero-content {
      padding: 75px 0 55px
    }

    .hero-art {
      margin-top: 25px
    }

    .section {
      padding: 75px 0
    }

    .about-panel {
      padding: 40px 28px
    }

    .process-line {
      display: none
    }

    .hero-stats {
      gap: 22px;
      flex-wrap: wrap
    }
  }

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

  @media(max-width:575.98px) {
    .navbar-brand img {
      width: 165px
    }

    .hero h1 {
      font-size: 40px;
      letter-spacing: -1px
    }

    .hero p {
      font-size: 14px
    }

    .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .section-title h2 {
      font-size: 31px
    }

    .about-panel h2,
    .quote-section h2 {
      font-size: 31px
    }
  }

  /* =========================================================
    SKN V2 - MENU, HOVER, OWL HERO & 16PX MINIMUM TYPE
  ========================================================= */
  html,
  body {
    font-size: 16px
  }

  body,
  .topbar,
  .nav-link,
  .dropdown-item,
  .btn-skn,
  .btn-outline-skn,
  .hero p,
  .hero-stat span,
  .cap-card p,
  .section-title p,
  .process-item p,
  .footer p,
  .footer li,
  .footer a,
  .form-control,
  .form-select {
    font-size: 16px
  }

  .topbar {
    font-size: 15px;
    padding: 10px 0;
  }

  .nav-link {
    font-size: 15px
  }


  .dropdown-item {
    font-size: 15px
  }

  .btn-skn,
  .btn-outline-skn {
    font-size: 15px
  }

  .hero-stat strong {
    font-size: 20px
  }

  .hero-stat span {
    font-size: 16px
  }

  .cap-card h3 {
    font-size: 20px
  }

  .cap-card p {
    font-size: 16px
  }

  .section-title p {
    font-size: 16px;
    max-width: 950px;
    margin: auto;
  }

  .process-item h4 {
    font-size: 18px
  }

  .process-item p {
    font-size: 16px
  }

  .footer h5 {
    font-size: 18px
  }

  .footer p,
  .footer li,
  .footer a {
    font-size: 16px
  }

  .footer-bottom {
    font-size: 14px
  }

  /* Desktop menu: smooth hover dropdown + Font Awesome arrow */
  @media(min-width:992px) {
    .desktop-nav .dropdown {
      position: relative
    }

    .desktop-nav .dropdown-toggle::after {
      display: none !important
    }

    .desktop-nav .dropdown-toggle .skn-menu-arrow {
      display: inline-block;
      margin-left: 7px;
      font-size: 11px;
      transition: transform .35s ease;
      color: var(--skn-blue)
    }

    .desktop-nav .dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1)
    }

    .desktop-nav .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px) scale(.98);
      transform-origin: top center;
      transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility .25s ease
    }

    .desktop-nav .dropdown:hover .skn-menu-arrow {
      transform: rotate(180deg)
    }

    .desktop-nav .dropdown-item {
      position: relative;
      overflow: hidden;
      transition: background .25s ease, color .25s ease, padding-left .25s ease, transform .25s ease
    }

    .desktop-nav .dropdown-item:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--skn-blue-2);
      transform: scaleY(0);
      transition: transform .25s ease
    }

    .desktop-nav .dropdown-item:hover {
      padding-left: 19px;
      transform: translateX(2px)
    }

    .desktop-nav .dropdown-item:hover:before {
      transform: scaleY(1)
    }
  }

  /* All interactive cards */
  .cap-card,
  .industry-card,
  .about-panel,
  .process-item,
  .quote-card {
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease
  }

  .cap-card:hover {
    transform: translateY(-10px) scale(1.01)
  }

  .icon-box {
    transition: transform .4s ease, background .4s ease, color .4s ease
  }

  .cap-card:hover .icon-box {
    transform: rotate(-4deg) scale(1.1);
    background: var(--skn-blue-2);
    color: #fff
  }

  .industry-card {
    transition: transform .5s ease, box-shadow .5s ease
  }

  .industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(7, 27, 53, .22)
  }

  .industry-card img {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease
  }

  .industry-card:hover img {
    transform: scale(1.1);
    filter: saturate(1.1)
  }

  .btn-skn,
  .btn-outline-skn,
  .float-btn {
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease
  }

  .btn-skn:hover,
  .btn-outline-skn:hover {
    box-shadow: 0 12px 28px rgba(23, 105, 211, .25)
  }

  .float-btn:hover {
    transform: translateY(-4px) scale(1.06)
  }

  /* Owl hero */
  .skn-hero-owl {
    position: relative
  }

  .skn-hero-owl .owl-item .skn-hero-slide {
    /* transform: scale(.985); */
    transition: transform .8s ease
  }

  .skn-hero-owl .owl-item.active .skn-hero-slide {
    transform: scale(1)
  }

  .skn-hero-owl .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 18px
  }

  .skn-hero-owl .owl-nav button {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    border: 1px solid rgba(7, 27, 53, .12) !important;
    background: rgba(255, 255, 255, .9) !important;
    color: var(--skn-navy) !important;
    font-size: 20px !important;
    box-shadow: 0 10px 25px rgba(7, 27, 53, .12);
    transition: .3s !important
  }

  .skn-hero-owl .owl-nav button:hover {
    background: var(--skn-blue-2) !important;
    color: #fff !important;
    transform: scale(1.08)
  }

  .skn-hero-owl .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%)
  }

  .skn-hero-owl .owl-dot span {
    width: 9px !important;
    height: 9px !important;
    margin: 4px !important;
    background: #b8c9da !important;
    transition: .3s !important
  }

  .skn-hero-owl .owl-dot.active span {
    width: 28px !important;
    border-radius: 10px;
    background: var(--skn-blue-2) !important
  }

  .skn-hero-slide {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
  }

  .skn-hero-inner {
    position: relative;
    z-index: 2;
    padding: 100px 0;
    color: #fff
  }

  .skn-hero-inner .eyebrow {
    color: #69d4df
  }

  .skn-hero-inner .eyebrow:before {
    background: var(--skn-gold)
  }

  .skn-hero-inner h1 {
    color: #fff;
    max-width: 760px
  }

  .skn-hero-inner h1 span {
    color: #69d4df
  }

  .skn-hero-inner p {
    color: #e2edf7;
    max-width: 720px
  }

  .skn-hero-badge {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 30px;
    background: rgba(255, 255, 255, .08);
    font-size: 16px;
    margin-bottom: 18px
  }

  .skn-hero-badge i {
    color: #69d4df
  }

  .skn-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
  }

  .skn-hero-actions .btn-outline-skn {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .06)
  }

  .skn-hero-actions .btn-outline-skn:hover {
    background: #fff;
    color: var(--skn-navy);
    border-color: #fff
  }

  /* Mobile menu type / smooth child animation */
  .mobile-nav a {
    font-size: 15px
  }

  .mobile-sub a {
    font-size: 15px
  }
  .mobile-sub a i {
    font-size: 15px
  }

  .mobile-parent i {
    transition: transform .3s ease
  }

  .mobile-parent[aria-expanded="true"] i {
    transform: rotate(180deg)
  }

  @media(max-width:991.98px) {

    .skn-hero-inner {
      padding: 75px 0
    }

    .skn-hero-inner h1 {
      font-size: 42px
    }

    .skn-hero-owl .owl-nav {
      padding: 0 8px
    }

    .skn-hero-owl .owl-nav button {
      width: 42px;
      height: 42px
    }
  }

  @media(max-width:575.98px) {

    .skn-hero-inner h1 {
      font-size: 38px
    }

    .skn-hero-inner p {
      font-size: 16px
    }

    .skn-hero-owl .owl-nav {
      display: none
    }
  }


  /* =========================================================
    SKN V3 - CREATIVE ENGINEERING UI / GLOBAL HOVER SYSTEM
    No gradients. Solid layers, circuit accents and motion.
  ========================================================= */
  ::selection {
    background: var(--skn-blue-2);
    color: #fff
  }

  .main-header {
    transition: box-shadow .35s ease, transform .35s ease
  }

  .main-header.skn-scrolled {
    box-shadow: 0 12px 38px rgba(7, 27, 53, .14)
  }

  .main-header.skn-scrolled .nav-link {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }

  .main-header.skn-scrolled .navbar-brand img {
    transition: .35s ease
  }

  .navbar-brand img {
    transition: .35s ease
  }

  .nav-link {
    transition: color .25s ease, padding .35s ease
  }

  .nav-link:hover {
    color: var(--skn-blue-2) !important
  }

  .btn-skn,
  .btn-outline-skn {
    position: relative;
    overflow: hidden;
    isolation: isolate
  }

  .btn-skn:before,
  .btn-outline-skn:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 25%;
    background: rgba(255, 255, 255, .24);
    transform: skewX(-22deg) translateX(-180%);
    transition: transform .55s ease;
    z-index: -1
  }

  .btn-skn:hover:before,
  .btn-outline-skn:hover:before {
    transform: skewX(-22deg) translateX(650%)
  }

  /* Hero creative layer */
  .skn-hero-slide {
    isolation: isolate
  }


  .skn-hero-tech {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .9;
    overflow: hidden
  }

  .tech-line {
    position: absolute;
    height: 1px;
    background: rgba(101, 214, 243, .28);
    transform-origin: left center;
    animation: sknCircuit 5s ease-in-out infinite
  }

  .line-a {
    width: 420px;
    right: 3%;
    top: 24%;
    transform: rotate(-12deg)
  }

  .line-b {
    width: 320px;
    right: 11%;
    top: 60%;
    transform: rotate(8deg);
    animation-delay: 1.2s
  }

  .line-c {
    width: 250px;
    left: 48%;
    top: 80%;
    transform: rotate(-18deg);
    animation-delay: 2.2s
  }

  .tech-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid var(--skn-cyan-2);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(101, 214, 243, .07);
    animation: sknNode 2.8s ease-in-out infinite
  }

  .node-a {
    right: 22%;
    top: 20%
  }

  .node-b {
    right: 15%;
    top: 62%;
    animation-delay: .8s
  }

  .node-c {
    left: 58%;
    top: 78%;
    animation-delay: 1.6s
  }

  .tech-chip {
    position: absolute;
    padding: 8px 12px;
    border: 1px solid rgba(101, 214, 243, .28);
    border-radius: 6px;
    background: rgba(4, 20, 39, .48);
    color: #d9f7ff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
    animation: sknFloat 5s ease-in-out infinite
  }

  .chip-a {
    right: 8%;
    top: 30%
  }

  .chip-b {
    right: 19%;
    top: 72%;
    animation-delay: 1.5s
  }

  .skn-hero-inner {
    z-index: 2
  }

  .skn-hero-badge {
    backdrop-filter: blur(8px);
    animation: sknBadge 1s ease both
  }

  .skn-hero-inner h1 {
    animation: sknHeroTitle .9s .12s ease both
  }

  .skn-hero-inner p {
    animation: sknHeroText .9s .22s ease both
  }

  .skn-hero-actions {
    animation: sknHeroText .9s .32s ease both
  }

  .skn-hero-owl .owl-item.active .skn-hero-badge {
    animation: sknBadge .7s ease both
  }

  .skn-hero-owl .owl-item.active h1 {
    animation: sknHeroTitle .8s .08s ease both
  }

  .skn-hero-owl .owl-item.active p {
    animation: sknHeroText .8s .18s ease both
  }

  .skn-hero-owl .owl-item.active .skn-hero-actions {
    animation: sknHeroText .8s .28s ease both
  }

  .skn-hero-ribbon {
    position: relative;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--skn-line);
    box-shadow: 0 15px 40px rgba(7, 27, 53, .08)
  }

  .skn-ribbon-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    min-height: 92px
  }

  .skn-ribbon-intro,
  .skn-ribbon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-right: 1px solid var(--skn-line)
  }

  .skn-ribbon-intro {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    background: #f7fbff
  }

  .skn-ribbon-intro strong {
    font-size: 16px;
    color: var(--skn-navy)
  }

  .skn-ribbon-intro small {
    font-size: 16px;
    color: var(--skn-muted)
  }

  .skn-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--skn-green);
    box-shadow: 0 0 0 7px rgba(33, 182, 111, .1);
    animation: sknPulse 1.8s infinite
  }

  .skn-ribbon-item {
    justify-content: center;
    color: var(--skn-navy);
    font-weight: 600;
    font-size: 16px;
    transition: background .3s ease, color .3s ease, transform .3s ease
  }

  .skn-ribbon-item i {
    color: var(--skn-blue-2);
    font-size: 20px;
    transition: transform .35s ease
  }

  .skn-ribbon-item:hover {
    background: #edf7ff;
    color: var(--skn-blue);
    overflow: hidden;
  }

  .skn-ribbon-item:hover i {
    transform: translateY(-4px) rotate(-8deg)
  }

  /* Section framing */
  .skn-section-tech,
  .skn-infra-section,
  .skn-quality-section,
  .skn-careers-section {
    position: relative;
    overflow: hidden
  }

  .skn-section-tech:before,
  .skn-infra-section:before,
  .skn-quality-section:before,
  .skn-careers-section:before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(23, 128, 255, .09);
    border-radius: 50%;
    right: -75px;
    top: 70px;
    box-shadow: 0 0 0 28px rgba(23, 128, 255, .025), 0 0 0 56px rgba(23, 128, 255, .018)
  }

  .section-title {
    position: relative
  }

  .section-title:after {
    content: "";
    display: block;
    width: 154px;
    height: 3px;
    background: var(--skn-cyan);
    margin-top: 17px;
    transform-origin: left;
    transition: width .45s ease;
    margin: auto;
    text-align: center;
  }

  .section-title:hover:after {
    width: 95px
  }

  .eyebrow {
    font-size: 16px
  }

  /* About */
  .about-panel {
    transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
    border: 1px solid rgba(101, 214, 243, .12)
  }

  .about-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(7, 27, 53, .2);
    border-color: rgba(101, 214, 243, .3)
  }

  .about-panel:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(101, 214, 243, .22);
    border-radius: 50%;
    right: 30px;
    top: 30px;
    animation: sknSpin 16s linear infinite
  }

  .check-list li {
    transition: transform .3s ease, color .3s ease;
    padding: 5px 0
  }

  .check-list li:hover {
    transform: translateX(8px);
    color: #fff
  }

  .check-list li i {
    transition: transform .3s ease
  }

  .check-list li:hover i {
    transform: scale(1.18) rotate(8deg)
  }

  /* Capability cards */
  .cap-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s ease, border-color .35s ease;
    background: #fff
  }

  .cap-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--skn-blue-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease
  }

  .cap-card:after {
    content: "";
    position: absolute;
    width: 85px;
    height: 85px;
    border: 1px solid rgba(23, 128, 255, .09);
    border-radius: 50%;
    right: -35px;
    bottom: -35px;
    transition: transform .5s ease, border-color .5s ease
  }

  .cap-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 60px rgba(7, 27, 53, .15);
    border-color: rgba(23, 128, 255, .35)
  }

  .cap-card:hover:before {
    transform: scaleX(1)
  }

  .cap-card:hover:after {
    transform: scale(1.6);
    border-color: rgba(101, 214, 243, .28)
  }

  .cap-index {
    position: absolute;
    right: 20px;
    top: 18px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #e9f2fb;
    line-height: 1;
    transition: color .35s ease, transform .35s ease
  }

  .cap-card:hover .cap-index {
    color: #cfeaff;
    transform: translateY(-3px)
  }

  .icon-box {
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .35s ease, color .35s ease, box-shadow .35s ease
  }

  .cap-card:hover .icon-box {
    transform: translateY(-4px) rotate(-5deg) scale(1.08);
    background: var(--skn-navy);
    color: #fff;
    box-shadow: 0 14px 28px rgba(7, 27, 53, .2)
  }

  .cap-card h3 {
    transition: color .3s ease, transform .3s ease
  }

  .cap-card:hover h3 {
    color: var(--skn-blue);
    transform: translateX(3px)
  }

  /* Process timeline */
  .skn-process-section {
    background: #fff;
    position: relative;
    overflow: hidden
  }

  .skn-process-section:before {
    content: "01 02 03 04 05";
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 120px;
    font-weight: 700;
    letter-spacing: 25px;
    color: rgba(7, 27, 53, .018);
    white-space: nowrap;
    text-align: center;
    pointer-events: none
  }

  .process-item {
    padding: 18px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: transform .4s ease, background .35s ease, border-color .35s ease, box-shadow .4s ease
  }

  .process-item:hover {
    transform: translateY(-9px);
    background: #f8fbff;
    border-color: #dbeaf6;
    box-shadow: 0 18px 40px rgba(7, 27, 53, .09)
  }

  .process-number {
    transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease
  }

  .process-item:hover .process-number {
    transform: scale(1.1);
    background: var(--skn-blue-2);
    color: #fff;
    box-shadow: 0 12px 25px rgba(23, 128, 255, .25)
  }

  .process-line {
    transition: border-color .35s ease
  }

  .process-item:hover .process-line {
    border-color: var(--skn-cyan)
  }

  .process-dot {
    position: absolute;
    left: 62%;
    top: 34px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--skn-cyan);
    box-shadow: 0 0 0 6px rgba(101, 214, 243, .08);
    opacity: .8
  }

  /* Industry cards */
  .industry-card {
    min-height: 300px;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .5s cubic-bezier(.2, .75, .2, 1), box-shadow .5s ease, border-color .4s ease
  }

  .industry-card:before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    z-index: 2;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none
  }

  .industry-card:after {
    content: "Explore application";
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 3;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    background: rgba(7, 27, 53, .5);
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease
  }

  .industry-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 0 30px 60px rgba(7, 27, 53, .2);
    border-color: rgba(101, 214, 243, .5)
  }

  .industry-card:hover:before {
    opacity: 1;
    transform: scale(1)
  }

  .industry-card:hover:after {
    opacity: 1;
    transform: translateY(0)
  }

  .industry-card img {
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease;
    filter: saturate(.85)
  }

  .industry-card:hover img {
    transform: scale(1.12);
    opacity: .92;
    filter: saturate(1.15)
  }


  .industry-card:hover .industry-overlay {
    background: rgba(7, 27, 53, .38) !important
  }

  .industry-overlay h3 {
    font-size: 20px;
    transition: transform .4s ease, color .35s ease
  }

  .industry-card:hover .industry-overlay h3 {
    transform: translateY(-8px);
    color: #fff
  }

  /* Infrastructure */
  .skn-infra-section .rounded-4,
  .skn-quality-section .rounded-4 {
    transition: transform .6s ease, box-shadow .5s ease;
    box-shadow: 0 20px 45px rgba(7, 27, 53, .1) !important
  }

  .skn-infra-section .rounded-4:hover,
  .skn-quality-section .rounded-4:hover {
    transform: scale(1.025) translateY(-5px);
    box-shadow: 0 30px 65px rgba(7, 27, 53, .16) !important
  }

  .skn-mini-card {
    height: 100%;
    padding: 18px;
    border: 1px solid #dbe7f1;
    border-radius: 12px;
    background: #fff;
    transition: transform .4s ease, box-shadow .4s ease, border-color .35s ease
  }

  .skn-mini-card i {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #edf7ff;
    color: var(--skn-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform .35s ease, background .35s ease, color .35s ease
  }

  .skn-mini-card strong {
    font-size: 16px
  }

  .skn-mini-card small {
    font-size: 16px
  }

  .skn-mini-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(7, 27, 53, .1);
    border-color: #a9d5f5
  }

  .skn-mini-card:hover i {
    background: var(--skn-navy);
    color: #fff;
    transform: rotate(-6deg) scale(1.08)
  }

  .alert.alert-warning {
    font-size: 16px;
    color: #fff;
    background-color: #052156;
    border: 1px solid #052156;
    border-radius: 12px;
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .alert.alert-warning:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(117, 88, 10, .08)
  }

  /* Quality */
  .skn-quality-section .check-list {
    margin-top: 25px
  }

  .skn-quality-section .check-list li {
    background: #fff;
    border: 1px solid #e1eaf2;
    border-radius: 10px;
    padding: 13px 14px;
    color: var(--skn-text);
    margin-bottom: 10px;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease
  }

  .skn-quality-section .check-list li:hover {
    transform: translateX(7px);
    border-color: #b8dff6;
    box-shadow: 0 12px 25px rgba(7, 27, 53, .08);
    color: var(--skn-navy)
  }

  .skn-quality-section .check-list li:hover i {
    transform: scale(1.08)
  }

  /* Quote */
  .skn-quote-section {
    position: relative;
    overflow: hidden
  }

  .skn-quote-section:before,
  .skn-quote-section:after {
    content: "";
    position: absolute;
    border: 1px solid rgba(101, 214, 243, .15);
    border-radius: 50%;
    pointer-events: none
  }

  .skn-quote-section:before {
    width: 460px;
    height: 460px;
    right: -170px;
    top: -180px
  }

  .skn-quote-section:after {
    width: 240px;
    height: 240px;
    left: -110px;
    bottom: -100px
  }

  .quote-card {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s ease, box-shadow .5s ease
  }

  .quote-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 75px rgba(0, 0, 0, .24)
  }

  .form-control,
  .form-select {
    transition: border-color .3s ease, box-shadow .3s ease, transform .25s ease
  }

  .form-control:hover,
  .form-select:hover {
    border-color: #a9cce8
  }

  .form-control:focus,
  .form-select:focus {
    transform: translateY(-1px)
  }

  /* Careers */
  .skn-careers-section .badge {
    font-size: 16px;
    font-weight: 600;
    transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease
  }

  .skn-careers-section .badge:hover {
    transform: translateY(-4px);
    background: #eaf6ff !important;
    border-color: #b9dcf4 !important;
    color: var(--skn-blue) !important
  }

  /* Footer */
  .footer {
    position: relative;
    overflow: hidden
  }

  .footer:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--skn-cyan)
  }

  .footer a {
    display: inline-block;
    transition: transform .3s ease, color .3s ease
  }

  .footer a:hover {
    transform: translateX(5px);
    color: var(--skn-cyan) !important
  }

  .footer-logo {
    transition: transform .4s ease, box-shadow .4s ease
  }

  .footer-logo:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2)
  }

  .footer-bottom {
    font-size: 16px !important
  }

  /* Floating contact */
  .float-btn {
    position: relative;
    overflow: visible;
    transition: transform .35s ease, box-shadow .35s ease
  }

  .float-btn:after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s ease, transform .3s ease
  }

  .float-btn:hover:after {
    opacity: .35;
    transform: scale(1.15);
    animation: sknRing 1.2s ease-out infinite
  }

  .float-btn.phone {
    color: #fff
  }

  .float-btn.wa {
    color: #fff
  }

  /* Mobile */
  .mobile-menu {
    transition: right .45s cubic-bezier(.2, .75, .2, 1)
  }

  .mobile-nav a {
    transition: padding-left .3s ease, color .3s ease, background .3s ease
  }

  .mobile-nav a:hover {
    padding-left: 7px;
    color: var(--skn-blue) !important
  }

  .mobile-close {
    transition: transform .3s ease, background .3s ease
  }

  .mobile-close:hover {
    transform: rotate(90deg);
    background: #dff3ff
  }

  /* AOS + accessibility */
  [data-aos] {
    will-change: transform, opacity
  }

  @media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important
    }
  }

  @media(max-width:1199.98px) {
    .skn-ribbon-grid {
      grid-template-columns: 1fr 1fr 1fr
    }

    .skn-ribbon-intro {
      grid-column: 1/-1;
      border-bottom: 1px solid var(--skn-line)
    }

    .skn-ribbon-item:nth-last-child(1) {
      border-right: 0
    }
  }

  @media(max-width:767.98px) {
    .skn-ribbon-grid {
      grid-template-columns: 1fr 1fr
    }

    .skn-ribbon-item {
      border-bottom: 1px solid var(--skn-line)
    }

    .skn-ribbon-item:nth-child(even) {
      border-right: 0
    }

    .tech-line {
      display: none
    }

    .tech-chip {
      font-size: 16px;
      right: 5% !important;
      top: auto !important;
      bottom: 15% !important
    }

    .skn-hero-slide:before {
      background: rgba(4, 20, 39, .76) !important
    }

    .skn-process-section:before {
      font-size: 60px;
      letter-spacing: 5px
    }

    .process-dot {
      display: none
    }

    .industry-card {
      min-height: 250px
    }

    .industry-card:after {
      font-size: 16px
    }
  }

  @media(max-width:575.98px) {
    .skn-ribbon-grid {
      grid-template-columns: 1fr
    }

    .skn-ribbon-item {
      border-right: 0 !important
    }

    .skn-ribbon-intro {
      grid-column: auto
    }

    .skn-hero-tech {
      opacity: .55
    }

    .skn-hero-inner {
      padding-left: 16px;
      padding-right: 16px
    }

    .cap-card {
      min-height: 230px
    }

    .section-title:after {
      margin-top: 13px
    }
  }

  @keyframes sknCircuit {

    0%,
    100% {
      opacity: .25;
      transform: scaleX(.86) rotate(-12deg)
    }

    50% {
      opacity: .9;
      transform: scaleX(1) rotate(-12deg)
    }
  }

  @keyframes sknNode {

    0%,
    100% {
      transform: scale(.8);
      opacity: .5
    }

    50% {
      transform: scale(1.25);
      opacity: 1
    }
  }

  @keyframes sknFloat {

    0%,
    100% {
      transform: translateY(0)
    }

    50% {
      transform: translateY(-10px)
    }
  }

  @keyframes sknPulse {

    0%,
    100% {
      box-shadow: 0 0 0 6px rgba(33, 182, 111, .08)
    }

    50% {
      box-shadow: 0 0 0 11px rgba(33, 182, 111, .02)
    }
  }

  @keyframes sknSpin {
    to {
      transform: rotate(360deg)
    }
  }

  @keyframes sknBadge {
    from {
      opacity: 0;
      transform: translateY(14px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  @keyframes sknHeroTitle {
    from {
      opacity: 0;
      transform: translateY(28px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  @keyframes sknHeroText {
    from {
      opacity: 0;
      transform: translateY(18px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  @keyframes sknRing {
    0% {
      transform: scale(1);
      opacity: .35
    }

    100% {
      transform: scale(1.5);
      opacity: 0
    }
  }


  .skn-in-view {
    animation: sknCardIn .7s var(--skn-delay, 0ms) ease both
  }

  @keyframes sknCardIn {
    from {
      opacity: 0;
      transform: translateY(18px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  /* V4 visual image system */
  .cap-image,
  .process-feature-image,
  .quote-visual,
  .career-visual {
    overflow: hidden;
    border-radius: 18px;
    position: relative
  }

  .cap-image {
    margin-bottom: 25px;
  }

  .cap-image img,
  .process-feature-image img,
  .quote-visual img,
  .career-visual img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s ease
  }

  .cap-card:hover .cap-image img,
  .process-feature-image:hover img,
  .quote-visual:hover img,
  .career-visual:hover img {
    transform: scale(1.08);
    filter: saturate(1.12)
  }

  .process-feature-image {
    height: 330px;
    box-shadow: 0 20px 55px rgba(0, 20, 50, .15)
  }

  .quote-visual-one {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22)
  }

  .quote-visual-one img {
    height: 600px;
    width: 100%;
    object-fit: cover;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22)
  }

  .career-visual {
    height: 270px;
    box-shadow: 0 18px 50px rgba(0, 20, 50, .12)
  }

  .quote-visual img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }

  .final-cta-section {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff
  }

  .final-cta-bg,
  .final-cta-overlay {
    position: absolute;
    inset: 0
  }

  .final-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease
  }

  .final-cta-section:hover .final-cta-bg img {
    transform: scale(1.05)
  }

  .final-cta-overlay {
    background: rgba(2, 18, 39, .78)
  }

  .final-cta-content {
    max-width: 850px;
    margin: auto;
    padding: 70px 20px
  }

  .final-cta-content h2 {
    font-size: clamp(32px, 4vw, 58px);
    margin: 12px 0 18px
  }

  .final-cta-content p {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    max-width: 700px;
    margin: 0 auto 28px
  }

  @media(max-width:767px) {
    .cap-image {
      height: 165px
    }

    .process-feature-image {
      height: 230px
    }

    .quote-visual {
      height: 220px
    }

    .career-visual {
      height: 220px
    }

    .final-cta-section {
      min-height: 420px
    }
  }

  /* =========================================================
    SKN ABOUT SECTION
  ========================================================= */

  .skn-about-section {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background: #f7fbff;
  }


  /* Background Circuit Pattern */

  .skn-about-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: -180px;
    border: 1px solid rgba(0, 91, 190, 0.08);
    border-radius: 50%;
    pointer-events: none;
  }

  .skn-about-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -150px;
    border: 1px solid rgba(0, 91, 190, 0.07);
    border-radius: 50%;
    pointer-events: none;
  }


  /* =========================================================
    IMAGE AREA
  ========================================================= */

  .skn-about-visual {
    position: relative;
    padding: 18px;
    min-height: 560px;
  }


  /* Main Image */

  .skn-about-image-wrap {
    position: relative;
    height: 620px;
    overflow: hidden;
    border-radius: 22px;
    background: #071d38;
    box-shadow:
      0 25px 60px rgba(4, 37, 76, 0.18);
    z-index: 2;
  }

  .skn-about-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
  }


  /* Image Hover */

  .skn-about-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 83, 170, 0.08);
    transition: background 0.5s ease;
  }

  .skn-about-visual:hover .skn-about-image {
    transform: scale(1.06);
  }

  .skn-about-visual:hover .skn-about-image-wrap::after {
    background: rgba(0, 83, 170, 0.02);
  }


  /* =========================================================
    FLOATING CARD
  ========================================================= */

  .skn-about-floating-card {
    position: absolute;
    left: -5px;
    bottom: 45px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 24px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 91, 190, 0.12);
    border-radius: 14px;

    box-shadow:
      0 15px 40px rgba(0, 40, 90, 0.15);

    transition:
      transform 0.4s ease,
      box-shadow 0.4s ease;
  }

  .skn-about-floating-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0 22px 45px rgba(0, 40, 90, 0.22);
  }

  .skn-about-floating-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #075dcc;
    color: #fff;

    border-radius: 12px;

    font-size: 20px;
  }

  .skn-about-floating-card strong {
    display: block;
    font-size: 18px;
    color: #092b52;
    font-weight: 800;
  }

  .skn-about-floating-card small {
    display: block;
    margin-top: 2px;
    color: #63758b;
    font-size: 12px;
  }


  /* =========================================================
    CIRCUIT DECORATIONS
  ========================================================= */

  .skn-about-circuit {
    position: absolute;
    z-index: 3;
    width: 100px;
    height: 1px;
    background: #159eea;
  }

  .skn-about-circuit::before,
  .skn-about-circuit::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid #159eea;
    background: #f7fbff;
    border-radius: 50%;
    top: -4px;
  }

  .skn-about-circuit::before {
    left: 0;
  }

  .skn-about-circuit::after {
    right: 0;
  }

  .skn-circuit-one {
    top: 70px;
    right: -20px;
  }

  .skn-circuit-two {
    bottom: 80px;
    right: -35px;
    width: 75px;
  }


  /* =========================================================
    CORNER DESIGN
  ========================================================= */

  .skn-about-corner {
    position: absolute;
    width: 120px;
    height: 120px;
    right: -5px;
    bottom: 0;
    border-right: 4px solid #0867d8;
    border-bottom: 4px solid #0867d8;
    border-radius: 0 0 20px 0;
    z-index: 1;
  }


  /* =========================================================
    CONTENT
  ========================================================= */

  .skn-about-content {
    position: relative;
    z-index: 2;
    padding-left: 25px;
  }

  .skn-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #0867d8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .skn-section-eyebrow span {
    width: 35px;
    height: 2px;
    display: inline-block;
    background: #13a9e8;
  }


  /* Heading */

  .skn-about-title {
    margin: 18px 0 22px;

    color: #082b52;
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
  }

  .skn-about-title span {
    display: block;
    color: #0867d8;
  }


  /* Paragraph */

  .skn-about-text {
    margin-bottom: 17px;

    color: #46576b;
    font-size: 16px;
    line-height: 1.9;
  }


  /* =========================================================
    FEATURE CARDS
  ========================================================= */

  .skn-about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .skn-about-feature {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 15px;

    background: #fff;
    border: 1px solid #e2edf7;
    border-radius: 12px;

    transition:
      transform 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }

  .skn-about-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(8, 103, 216, 0.3);

    box-shadow:
      0 15px 30px rgba(8, 71, 130, 0.10);
  }


  /* Feature Icon */

  .skn-feature-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf7ff;
    color: #0867d8;

    border-radius: 10px;

    font-size: 17px;

    transition:
      background 0.3s ease,
      color 0.3s ease,
      transform 0.3s ease;
  }

  .skn-about-feature:hover .skn-feature-icon {
    background: #0867d8;
    color: #fff;
    transform: rotate(6deg) scale(1.08);
  }


  /* Feature Text */

  .skn-about-feature h5 {
    margin: 2px 0 5px;

    color: #0a315b;
    font-size: 17px;
    font-weight: 750;
  }

  .skn-about-feature p {
    margin: 0;

    color: #718198;
    font-size: 15px;
    line-height: 1.55;
  }


  /* =========================================================
    BUTTON
  ========================================================= */

  .skn-about-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    padding: 14px 22px;

    background: #0867d8;
    color: #fff;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    overflow: hidden;

    box-shadow:
      0 10px 25px rgba(8, 103, 216, 0.22);

    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      background 0.3s ease;
  }

  .skn-about-btn i {
    transition: transform 0.3s ease;
  }

  .skn-about-btn:hover {
    color: #fff;
    background: #064da5;

    transform: translateY(-3px);

    box-shadow:
      0 15px 32px rgba(8, 103, 216, 0.3);
  }

  .skn-about-btn:hover i {
    transform: translateX(6px);
  }


  /* =========================================================
    RESPONSIVE
  ========================================================= */

  @media (max-width: 991px) {

    .skn-about-section {
      padding: 80px 0;
    }

    .skn-about-content {
      padding-left: 0;
    }

    .skn-about-visual {
      min-height: auto;
    }

    .skn-about-image-wrap {
      height: 480px;
    }

    .skn-about-title {
      font-size: 40px;
    }
  }


  @media (max-width: 767px) {

    .skn-about-section {
      padding: 65px 0;
    }

    .skn-about-visual {
      padding: 8px;
    }

    .skn-about-image-wrap {
      height: 400px;
      border-radius: 16px;
    }

    .skn-about-floating-card {
      left: 0;
      bottom: 25px;
    }

    .skn-about-features {
      grid-template-columns: 1fr;
    }

    .skn-about-title {
      font-size: 34px;
    }
  }


  @media (max-width: 575px) {

    .skn-about-image-wrap {
      height: 330px;
    }

    .skn-about-floating-card {
      padding: 12px 15px;
    }

    .skn-about-floating-icon {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }

    .skn-about-title {
      font-size: 30px;
    }

    .skn-about-text {
      font-size: 15px;
    }
  }

  /* =========================================================
    SKN WHY PANEL
  ========================================================= */

  .skn-why-panel {
    position: relative;
    padding: 42px;
    background: #061d38;
    border: 1px solid rgba(80, 190, 255, 0.18);
    border-radius: 24px;
    overflow: hidden;

    box-shadow:
      0 25px 65px rgba(4, 30, 65, 0.20);
  }


  /* Decorative glow */

  .skn-why-panel::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -120px;

    border: 1px solid rgba(38, 181, 255, 0.25);
    border-radius: 50%;
  }

  .skn-why-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -100px;
    bottom: -100px;

    border: 1px solid rgba(38, 181, 255, 0.18);
    border-radius: 50%;
  }


  /* =========================================================
    HEADER
  ========================================================= */

  .skn-why-header {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
  }

  .skn-why-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #65d6f3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
  }

  .skn-why-eyebrow i {
    font-size: 14px;
  }


  .skn-why-header h2 {
    margin: 14px 0 12px;

    color: #ffffff;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 800;
  }

  .skn-why-header h2 span {
    display: block;
    color: #43c7f4;
  }


  .skn-why-header p {
    max-width: 560px;
    margin: 0;

    color: #dce9f7;
    font-size: 14px;
    line-height: 1.8;
  }


  /* =========================================================
    FEATURE LIST
  ========================================================= */

  .skn-why-list {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 10px;
  }


  /* =========================================================
    FEATURE ITEM
  ========================================================= */

  .skn-why-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 15px 18px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;

    overflow: hidden;

    transition:
      transform 0.35s ease,
      background 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }


  /* Hover */

  .skn-why-item:hover {
    transform: translateX(8px);

    background: rgba(20, 148, 220, 0.12);
    border-color: rgba(73, 205, 246, 0.35);

    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.15);
  }


  /* Blue hover line */

  .skn-why-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;

    background: #43c7f4;

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform 0.35s ease;
  }

  .skn-why-item:hover::before {
    transform: scaleY(1);
  }


  /* =========================================================
    ICON
  ========================================================= */

  .skn-why-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #55d6f5;
    background: rgba(32, 170, 230, 0.10);

    border: 1px solid rgba(71, 205, 246, 0.20);
    border-radius: 11px;

    font-size: 17px;

    transition:
      transform 0.35s ease,
      background 0.35s ease,
      color 0.35s ease;
  }

  .skn-why-item:hover .skn-why-icon {
    color: #061d38;
    background: #55d6f5;

    transform: rotate(-5deg) scale(1.08);
  }



  /* =========================================================
    NUMBER
  ========================================================= */

  .skn-why-number {
    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(101, 214, 243, 0.16);

    font-size: 22px;
    font-weight: 800;

    transition:
      color 0.3s ease,
      transform 0.3s ease;
  }

  .skn-why-item:hover .skn-why-number {
    color: rgba(101, 214, 243, 0.45);
    transform: translateY(-50%) translateX(-4px);
  }


  /* =========================================================
    RESPONSIVE
  ========================================================= */

  @media (max-width: 767px) {

    .skn-why-panel {
      padding: 28px 20px;
      border-radius: 18px;
    }

    .skn-why-header h2 {
      font-size: 30px;
    }

    .skn-why-item {
      padding: 13px;
    }

    .skn-why-number {
      display: none;
    }

    .skn-why-item:hover {
      transform: translateX(4px);
    }
  }


  @media (max-width: 480px) {

    .skn-why-panel {
      padding: 24px 16px;
    }

    .skn-why-icon {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      font-size: 15px;
    }

    .skn-why-content h5 {
      font-size: 13px;
    }

    .skn-why-content p {
      font-size: 11px;
    }
  }

  /* =========================================================
    SKN WHY SECTION
  ========================================================= */

  .skn-why-section {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background: radial-gradient(circle at 90% 5%, rgba(21, 155, 230, 0.13), transparent 35%), #061d3a;
  }


  .skn-why-section::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -170px;
    top: -170px;

    border: 1px solid rgba(65, 210, 250, 0.15);

    border-radius: 50%;
  }

  .skn-why-section::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -180px;
    bottom: -160px;

    border: 1px solid rgba(65, 210, 250, 0.12);

    border-radius: 50%;
  }



  /* Background Decoration */

  .skn-why-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: -180px;

    border: 1px solid rgba(0, 104, 214, 0.08);
    border-radius: 50%;

    pointer-events: none;
  }

  .skn-why-section::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    bottom: -150px;

    border: 1px solid rgba(0, 104, 214, 0.08);
    border-radius: 50%;

    pointer-events: none;
  }


  /* =========================================================
    MAIN WRAPPER
  ========================================================= */

  .skn-why-wrapper {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 650px;

    background: #061d3a;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
      0 30px 80px rgba(3, 37, 72, 0.20);
  }


  /* =========================================================
    LEFT IMAGE
  ========================================================= */

  .skn-why-image-area {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #061d3a;
  }


  /* Main Image */

  .skn-why-main-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
  }

  .skn-why-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
      transform 1.2s cubic-bezier(.2, .7, .2, 1);
  }

  .skn-why-wrapper:hover .skn-why-main-image img {
    transform: scale(1.05);
  }


  /* Image Overlay */

  .skn-image-overlay {
    position: absolute;

    inset: 0;

    background:
      linear-gradient(90deg,
        rgba(3, 27, 55, 0.15),
        rgba(3, 27, 55, 0.02));

    pointer-events: none;
  }


  /* =========================================================
    SMALL IMAGE CARDS
  ========================================================= */

  .skn-image-card {
    position: absolute;

    z-index: 4;

    width: 190px;
    height: 125px;

    padding: 5px;

    background: #fff;

    border-radius: 14px;

    box-shadow:
      0 15px 40px rgba(0, 20, 50, 0.30);

    overflow: hidden;

    transition:
      transform 0.5s ease,
      box-shadow 0.5s ease;
  }

  .skn-image-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 10px;
  }

  .skn-image-card:hover {
    transform: translateY(-10px) scale(1.03);

    box-shadow:
      0 25px 50px rgba(0, 30, 70, 0.40);
  }


  /* Card One */

  .skn-image-card-one {
    left: 35px;
    bottom: 35px;

    animation:
      sknFloatOne 5s ease-in-out infinite;
  }


  /* Card Two */

  .skn-image-card-two {
    right: 25px;
    bottom: 75px;

    animation:
      sknFloatTwo 5.5s ease-in-out infinite;
  }


  /* Floating Animations */

  @keyframes sknFloatOne {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes sknFloatTwo {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(12px);
    }
  }


  /* Small Card Icon */

  .skn-image-card-icon {
    position: absolute;

    right: 10px;
    top: 10px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0867d8;

    color: #fff;

    border-radius: 8px;

    font-size: 13px;
  }


  /* =========================================================
    CIRCUIT DECORATIONS
  ========================================================= */

  .skn-circuit-line {
    position: absolute;

    z-index: 3;

    height: 1px;

    background: #36c9f5;

    opacity: .8;
  }

  .skn-circuit-line::before,
  .skn-circuit-line::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: -4px;

    border: 2px solid #36c9f5;

    background: #061d3a;

    border-radius: 50%;
  }

  .skn-circuit-line::before {
    left: 0;
  }

  .skn-circuit-line::after {
    right: 0;
  }

  .line-one {
    width: 100px;

    right: 20px;
    top: 90px;
  }

  .line-two {
    width: 75px;

    left: 30px;
    top: 150px;
  }


  /* Dots */

  .skn-circuit-dot {
    position: absolute;

    z-index: 3;

    width: 10px;
    height: 10px;

    background: #35c9f5;

    border-radius: 50%;

    box-shadow:
      0 0 0 5px rgba(53, 201, 245, 0.12);

    animation:
      sknPulse 2s infinite;
  }

  .dot-one {
    top: 75px;
    left: 80px;
  }

  .dot-two {
    top: 170px;
    right: 80px;
    animation-delay: .5s;
  }

  .dot-three {
    bottom: 190px;
    left: 45%;
    animation-delay: 1s;
  }

  @keyframes sknPulse {

    0% {
      box-shadow:
        0 0 0 0 rgba(53, 201, 245, 0.40);
    }

    70% {
      box-shadow:
        0 0 0 12px rgba(53, 201, 245, 0);
    }

    100% {
      box-shadow:
        0 0 0 0 rgba(53, 201, 245, 0);
    }
  }


  /* =========================================================
    RIGHT CONTENT
  ========================================================= */

  .skn-why-content-area {
    position: relative;

    padding: 55px 50px;

    overflow: hidden;
  }


  /* Circuit background */


  /* Content */

  .skn-why-content {
    position: relative;

    z-index: 2;
  }


  /* =========================================================
    EYEBROW
  ========================================================= */

  .skn-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #55d8f7;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
  }

  .skn-eyebrow-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(85, 216, 247, .35);

    border-radius: 8px;

    animation:
      sknIconPulse 2.5s infinite;
  }

  .skn-why-eyebrow>i {
    font-size: 13px;

    opacity: .5;
  }

  @keyframes sknIconPulse {

    0%,
    100% {
      box-shadow:
        0 0 0 0 rgba(85, 216, 247, .2);
    }

    50% {
      box-shadow:
        0 0 0 8px rgba(85, 216, 247, 0);
    }
  }


  /* =========================================================
    TITLE
  ========================================================= */

  .skn-why-title {
    margin: 18px 0 15px;

    color: #fff;

    font-size: clamp(32px, 3.2vw, 38px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;
  }

  .skn-why-title span {
    display: block;

    color: #43d5f5;
  }


  /* =========================================================
    DESCRIPTION
  ========================================================= */

  .skn-why-description {
    max-width: 580px;

    margin-bottom: 25px;

    color: rgba(255, 255, 255, 0.911);

    font-size: 15px;

    line-height: 1.8;
  }


  /* =========================================================
    FEATURES
  ========================================================= */

  .skn-why-features {
    display: flex;

    flex-direction: column;

    gap: 9px;
  }


  /* Feature */

  .skn-feature-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 74px;

    padding: 11px 48px 11px 12px;

    border: 1px solid rgba(85, 216, 247, .16);

    border-radius: 13px;

    background: rgba(255, 255, 255, .035);

    overflow: hidden;

    transition:
      transform .35s ease,
      background .35s ease,
      border-color .35s ease,
      box-shadow .35s ease;
    margin-top: 15px;
  }


  /* Hover */

  .skn-feature-item:hover {
    transform: translateX(7px);

    background: rgba(38, 176, 232, .10);

    border-color: rgba(85, 216, 247, .42);

    box-shadow:
      0 12px 30px rgba(0, 0, 0, .18);
  }


  /* Animated left line */

  .skn-feature-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #48d6f5;

    transform: scaleY(0);

    transform-origin: bottom;

    transition:
      transform .35s ease;
  }

  .skn-feature-item:hover::before {
    transform: scaleY(1);
  }


  /* =========================================================
    FEATURE ICON
  ========================================================= */

  .skn-feature-icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #58d9f7;

    border: 1px solid rgba(88, 217, 247, .35);

    background: rgba(28, 165, 222, .10);

    border-radius: 11px;

    font-size: 18px;

    transition:
      background .35s ease,
      color .35s ease,
      transform .35s ease;
  }

  .skn-feature-item:hover .skn-feature-icon {
    color: #06203d;

    background: #55d8f7;

    transform:
      rotate(-6deg) scale(1.08);
  }


  /* =========================================================
    FEATURE TEXT
  ========================================================= */

  .skn-feature-text {
    flex: 1;
  }

  .skn-feature-text h5 {
    margin: 0 0 3px;

    color: #fff;

    font-size: 16px;

    font-weight: 750;
    margin-bottom: 10px;
  }

  .skn-feature-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.878);

    font-size: 13px;

    line-height: 1.45;
  }


  /* =========================================================
    NUMBER
  ========================================================= */

  .skn-feature-number {
    position: absolute;

    right: 35px;

    top: 50%;

    transform: translateY(-50%);

    color: rgba(91, 208, 244, .22);

    font-size: 27px;

    font-weight: 800;

    transition:
      color .3s ease,
      transform .3s ease;
  }

  .skn-feature-item:hover .skn-feature-number {
    color: rgba(91, 208, 244, .55);

    transform:
      translateY(-50%) translateX(-5px);
  }


  /* =========================================================
    ARROW
  ========================================================= */

  .skn-feature-arrow {
    position: absolute;

    right: 13px;

    top: 50%;

    transform:
      translateY(-50%) translateX(-5px);

    color: #4fd6f5;

    font-size: 11px;

    opacity: .4;

    transition:
      opacity .3s ease,
      transform .3s ease;
  }

  .skn-feature-item:hover .skn-feature-arrow {
    opacity: 1;

    transform:
      translateY(-50%) translateX(3px);
  }

  /* =========================================================
    SKN CAPABILITIES CAROUSEL
  ========================================================= */

  .skn-capabilities-owl {
    position: relative;
    /* padding: 10px 65px 55px; */
  }


  /* =========================================================
    SLIDE
  ========================================================= */

  .skn-cap-slide {
    padding: 15px;
  }


  /* =========================================================
    CARD
  ========================================================= */

  .skn-capabilities-owl .cap-card {
    position: relative;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e3edf7;
    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 12px 35px rgba(7, 54, 100, 0.08);

    transition:
      transform 0.4s ease,
      box-shadow 0.4s ease,
      border-color 0.4s ease;
  }

  .skn-capabilities-owl .cap-card:hover {
    transform: translateY(-10px);

    border-color: rgba(8, 103, 216, 0.25);

    box-shadow:
      0 25px 55px rgba(7, 54, 100, 0.16);
  }


  /* =========================================================
    IMAGE
  ========================================================= */

  .skn-capabilities-owl .cap-image {
    position: relative;

    width: 100%;

    overflow: hidden;
  }

  .skn-capabilities-owl .cap-image img {
    width: 100%;
    height: 250px;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
  }

  .skn-capabilities-owl .cap-card:hover .cap-image img {
    transform: scale(1.08);
  }


  /* Image overlay */

  .skn-capabilities-owl .cap-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(3, 40, 80, 0.05);

    transition: background 0.4s ease;
  }

  .skn-capabilities-owl .cap-card:hover .cap-image::after {
    background: rgba(3, 40, 80, 0);
  }


  /* =========================================================
    NUMBER
  ========================================================= */

  .skn-capabilities-owl .cap-index {
    position: absolute;

    top: 215px;
    right: 20px;

    z-index: 5;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0867d8;
    color: #ffffff;

    border: 4px solid #ffffff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;

    transition:
      transform 0.4s ease,
      background 0.4s ease;
  }

  .skn-capabilities-owl .cap-card:hover .cap-index {
    background: #064da5;

    transform:
      rotate(10deg) scale(1.08);
  }


  /* =========================================================
    ICON
  ========================================================= */

  .skn-capabilities-owl .icon-box {
    width: 48px;
    height: 48px;

    margin: 25px 22px 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0867d8;

    background: #edf7ff;

    border-radius: 12px;

    font-size: 19px;

    transition:
      transform 0.35s ease,
      background 0.35s ease,
      color 0.35s ease;
  }

  .skn-capabilities-owl .cap-card:hover .icon-box {
    color: #ffffff;
    background: #0867d8;

    transform:
      rotate(-6deg) scale(1.08);
  }


  /* =========================================================
    TITLE
  ========================================================= */

  .skn-capabilities-owl .cap-card h3 {
    margin: 0 22px 10px;

    color: #082d54;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 750;

    transition: color 0.3s ease;
  }

  .skn-capabilities-owl .cap-card:hover h3 {
    color: #0867d8;
  }


  /* =========================================================
    DESCRIPTION
  ========================================================= */

  .skn-capabilities-owl .cap-card p {
    margin: 0 22px 0px;

    color: #6b7d91;

    font-size: 15px;

    line-height: 1.75;

  }


  /* =========================================================
    LEFT / RIGHT ARROWS
  ========================================================= */

  .skn-capabilities-owl .owl-nav {
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    display: flex;

    justify-content: space-between;

    padding: 0;

    margin: 0;

    transform: translateY(-50%);

    pointer-events: none;

    z-index: 20;
  }


  /* Both Buttons */

  .skn-capabilities-owl .owl-nav button.owl-prev,
  .skn-capabilities-owl .owl-nav button.owl-next {

    pointer-events: auto;

    width: 52px;
    height: 52px;

    margin: 0;

    display: flex !important;

    align-items: center;
    justify-content: center;

    background: #ffffff !important;

    color: #0867d8 !important;

    border: 1px solid #d8e8f6 !important;

    border-radius: 50%;

    font-size: 16px !important;

    box-shadow:
      0 10px 30px rgba(5, 55, 105, 0.15);

    transition:
      background 0.35s ease,
      color 0.35s ease,
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }


  /* Left Arrow */

  .skn-capabilities-owl .owl-nav button.owl-prev {
    margin-left: 0;
  }


  /* Right Arrow */

  .skn-capabilities-owl .owl-nav button.owl-next {
    margin-right: 0;
  }


  /* Hover */

  .skn-capabilities-owl .owl-nav button.owl-prev:hover,
  .skn-capabilities-owl .owl-nav button.owl-next:hover {

    background: #0867d8 !important;

    color: #ffffff !important;

    border-color: #0867d8 !important;

    transform: scale(1.1);

    box-shadow:
      0 14px 35px rgba(8, 103, 216, 0.30);
  }


  /* Arrow Icon Animation */

  .skn-capabilities-owl .owl-nav button.owl-prev i,
  .skn-capabilities-owl .owl-nav button.owl-next i {
    transition: transform 0.3s ease;
  }

  .skn-capabilities-owl .owl-nav button.owl-prev:hover i {
    transform: translateX(-3px);
  }

  .skn-capabilities-owl .owl-nav button.owl-next:hover i {
    transform: translateX(3px);
  }


  /* =========================================================
    DOTS
  ========================================================= */

  .skn-capabilities-owl .owl-dots {
    margin-top: 25px;

    text-align: center;
  }

  .skn-capabilities-owl .owl-dot span {
    width: 8px !important;
    height: 8px !important;

    margin: 5px !important;

    background: #cbdbea !important;

    transition:
      width 0.3s ease,
      background 0.3s ease;
  }

  .skn-capabilities-owl .owl-dot.active span {
    width: 28px !important;

    background: #0867d8 !important;
  }


  /* =========================================================
    TABLET
  ========================================================= */

  @media (max-width: 991px) {

    .skn-capabilities-owl {
      padding-left: 55px;
      padding-right: 55px;
    }

    .skn-capabilities-owl .owl-nav button.owl-prev,
    .skn-capabilities-owl .owl-nav button.owl-next {
      width: 46px;
      height: 46px;
    }

  }


  /* =========================================================
    MOBILE
  ========================================================= */

  @media (max-width: 575px) {

    .skn-capabilities-owl {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 45px;
    }

    .skn-cap-slide {
      padding: 8px;
    }

    .skn-capabilities-owl .cap-card {
      min-height: 450px;
    }

    .skn-capabilities-owl .cap-image {
      height: 220px;
    }

    .skn-capabilities-owl .cap-index {
      top: 190px;
    }


    /* Put arrows below the carousel on small screens */

    .skn-capabilities-owl .owl-nav {
      position: relative;

      top: auto;
      left: auto;
      right: auto;

      transform: none;

      justify-content: center;

      gap: 12px;

      margin-top: 22px;
    }

    .skn-capabilities-owl .owl-nav button.owl-prev,
    .skn-capabilities-owl .owl-nav button.owl-next {
      width: 44px;
      height: 44px;
    }

  }

  /* =========================================================
    SKN ELECTRONICS
    Customer Statistics Section
  ========================================================= */

  .skn-customer-stats-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--skn-light);
  }


  /* Main Container */

  .skn-customer-container {
    padding: 0;
    margin: 0;
  }


  /* =========================================================
    FACTORY IMAGE GALLERY
  ========================================================= */

  .skn-customer-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 89%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
  }


  /* Individual Image */

  .skn-customer-image {
    position: relative;
    height: 412px;
    overflow: hidden;
    background: #dfe8f3;
  }


  /* Image */

  .skn-customer-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
      transform 0.8s cubic-bezier(.2, .7, .2, 1),
      filter 0.6s ease;
  }


  /* Dark Overlay */

  .skn-customer-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 35, 85, 0);

    transition:
      background 0.5s ease;

    pointer-events: none;
  }


  /* Hover */

  .skn-customer-image:hover img {
    transform: scale(1.08);
    filter: brightness(1.05);
  }

  .skn-customer-image:hover::after {
    background: rgba(0, 55, 125, 0.12);
  }


  /* =========================================================
    STATISTICS AREA
  ========================================================= */

  .skn-customer-stat-area {
    position: relative;
    background: #06469d;
    padding: 80px 0 60px;
    margin-top: -1px;
  }


  /* Decorative Background */

  .skn-customer-stat-area::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -200px;

    background: rgba(255, 255, 255, 0.025);

    border-radius: 50%;

    pointer-events: none;
  }


  /* =========================================================
    INTRO
  ========================================================= */

  .skn-customer-intro {
    position: relative;
    padding-right: 25px;
    animation: sknIntroReveal 1s ease both;
  }


  .skn-customer-label {
    display: block;

    color: #ffa500;

    font-size: 42px;
    font-weight: 800;

    line-height: 1.02;

    letter-spacing: 0.3px;

    margin-bottom: 5px;
  }


  .skn-customer-intro h2 {
    margin: 0;

    color: #ffa500;

    font-size: 42px;
    font-weight: 800;

    line-height: 1.02;

    text-transform: uppercase;
  }


  /* =========================================================
    STAT CARD
  ========================================================= */

  .skn-stat-card {
    position: relative;

    padding: 8px 0 15px;

    transition:
      transform 0.4s ease;
  }


  .skn-stat-card:hover {
    transform: translateY(-8px);
  }


  /* Number */

  .skn-stat-number {
    display: flex;
    align-items: baseline;

    color: #ffffff;

    font-size: 50px;
    font-weight: 300;

    line-height: 1;

    white-space: nowrap;

    letter-spacing: -2px;
  }


  .skn-stat-number sup {
    font-size: 34px;
    font-weight: 300;

    margin-left: 3px;

    top: -0.25em;
  }


  /* Horizontal Line */

  .skn-stat-line {
    width: 100%;
    height: 1px;

    margin: 27px 0 25px;

    background: rgba(255, 255, 255, 0.35);

    position: relative;
    overflow: hidden;
  }


  .skn-stat-line::after {
    content: "";

    position: absolute;

    left: -100%;
    top: 0;

    width: 100%;
    height: 100%;

    background: #ffffff;

    transition: left 0.7s ease;
  }


  .skn-stat-card:hover .skn-stat-line::after {
    left: 0;
  }


  /* Description */

  .skn-stat-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 22px;
    font-weight: 300;

    line-height: 1.4;

    transition:
      color 0.35s ease,
      transform 0.35s ease;
  }


  .skn-stat-card:hover p {
    color: #ffffff;
    transform: translateX(5px);
  }


  /* =========================================================
    ANIMATIONS
  ========================================================= */

  @keyframes sknIntroReveal {

    from {
      opacity: 0;
      transform: translateX(-35px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }

  }


  /* =========================================================
    TABLET
  ========================================================= */

  @media (max-width: 1199px) {

    .skn-customer-gallery {
      width: 94%;
    }

    .skn-customer-image {
      height: 360px;
    }

    .skn-customer-stat-area {
      padding: 90px 0 70px;
    }

    .skn-customer-label,
    .skn-customer-intro h2 {
      font-size: 36px;
    }

    .skn-stat-number {
      font-size: 58px;
    }

    .skn-stat-card p {
      font-size: 19px;
    }

  }


  /* =========================================================
    MOBILE
  ========================================================= */

  @media (max-width: 767px) {

    .skn-customer-gallery {
      width: 100%;

      grid-template-columns: 1fr;

      border-radius: 0;
    }


    .skn-customer-image {
      height: 260px;
    }


    .skn-customer-stat-area {
      padding: 65px 20px 55px;
    }


    .skn-customer-intro {
      padding-right: 0;
      margin-bottom: 25px;
    }


    .skn-customer-label,
    .skn-customer-intro h2 {
      font-size: 34px;
    }


    .skn-stat-card {
      padding: 15px 0;
    }


    .skn-stat-number {
      font-size: 52px;
    }


    .skn-stat-card p {
      font-size: 18px;
    }


    .skn-stat-line {
      margin: 20px 0 18px;
    }

  }


  /* =========================================================
    SMALL MOBILE
  ========================================================= */

  @media (max-width: 480px) {

    .skn-customer-image {
      height: 230px;
    }


    .skn-customer-label,
    .skn-customer-intro h2 {
      font-size: 29px;
    }


    .skn-stat-number {
      font-size: 46px;
    }


    .skn-stat-number sup {
      font-size: 25px;
    }

  }

  .skn-customer-stats-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #06469d;
    z-index: 1;
    height: 500px;
    top: 125px;
  }

  .skn-customer-stats-section>* {
    position: relative;
    z-index: 2;
  }

  /* Topbar Base Style */
  .topbar {
    background-color: #0f172a;
    /* Sleek dark slate background */
    color: #f1f5f9;
    padding: 10px 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85rem;
  }

  /* Contact Group Spacing */
  .contact-links {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* Link Styling & Hover Transitions */
  .topbar-link {
    color: #38bdf8;
    /* Light sky blue */
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
  }

  /* Hover State Color Shift */
  .topbar-link:hover {
    color: #7dd3fc;
  }

  /* Smooth Underline Hover Animation */
  .topbar-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1.5px;
    bottom: -2px;
    left: 0;
    background-color: #7dd3fc;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }

  .topbar-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

  /* Alignment Layout */
  .tech-capabilities {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbcfd5;
  }

  .tech-capabilities span {
    color: #dce9f7;
    font-weight: 600;
  }

  /* Separators */
  .separator {
    color: #475569;
  }

  /* Responsive Mobile Layout */
  @media (max-width: 768px) {
    .topbar .container {
      flex-direction: column;
      gap: 8px;
      text-align: center;
    }

    .contact-links,
    .tech-capabilities {
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  /* =========================================================
    SKN ELECTRONICS - PREMIUM FOOTER
  ========================================================= */

  .skn-footer {
    position: relative;
    background: #061827;
    color: rgba(255, 255, 255, 0.75);
    padding: 75px 0 0;
    overflow: hidden;
  }


  /* Subtle Top Line */

  .skn-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #159bd7;
  }


  /* =========================================================
    BRAND
  ========================================================= */

  .skn-footer-brand {
    position: relative;
  }

  .skn-footer-logo-wrap {
    display: inline-block;
    margin-bottom: 22px;
    overflow: hidden;
  }

  .skn-footer-logo {
    width: 185px;
    height: auto;
    display: block;
    transition:
      transform 0.5s ease,
      filter 0.5s ease;
  }

  .skn-footer-logo-wrap:hover .skn-footer-logo {
    transform: scale(1.05);
    filter: brightness(1.08);
  }


  .skn-footer-description {
    max-width: 430px;
    margin: 0 0 18px;
    color: #dce9f7;
    font-size: 15px;
    line-height: 1.9;
  }


  .skn-footer-tagline {
    position: relative;
    display: inline-block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
  }


  .skn-footer-tagline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 35px;
    height: 2px;
    background: #159bd7;
    transition: width 0.4s ease;
  }

  .skn-footer-tagline:hover::after {
    width: 100%;
  }


  .skn-footer-cin {
    color: #dce9f7;
    font-size: 15px;
  }


  /* =========================================================
    FOOTER TITLES
  ========================================================= */

  .skn-footer-title {
    position: relative;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 25px;
    padding-bottom: 12px;
  }


  .skn-footer-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background: #159bd7;
    transition: width 0.4s ease;
  }

  .skn-footer-column:hover .skn-footer-title::before,
  .skn-footer-contact:hover .skn-footer-title::before {
    width: 65px;
  }


  /* =========================================================
    FOOTER LINKS
  ========================================================= */

  .skn-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }


  .skn-footer-links li {
    margin-bottom: 15px;
  }


  .skn-footer-link {
    position: relative;
    display: inline-block;
    padding-left: 0px;
    color: #dce9f7;
    text-decoration: none;
    font-size: 15px;
    transition:
      color 0.3s ease,
      padding-left 0.3s ease;
  }


  .skn-footer-link::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #159bd7;
    font-size: 13px;
    margin-right: 8px;
    color: #159bd7;
    transform: translateX(-8px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }


  .skn-footer-link:hover {
    color: #ffffff;
    padding-left: 20px;
  }


  .skn-footer-link:hover::before {
    opacity: 1;
    transform: translateX(0);
  }


  /* =========================================================
    CONTACT DETAILS
  ========================================================= */

  .skn-footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }


  .skn-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
  }


  .skn-contact-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(21, 155, 215, 0.3);
    border-radius: 7px;
    color: #159bd7;
    background: rgba(21, 155, 215, 0.06);
    transition:
      background 0.3s ease,
      color 0.3s ease,
      transform 0.3s ease,
      border-color 0.3s ease;
  }


  .skn-footer-contact-item:hover .skn-contact-icon {
    background: #159bd7;
    color: #ffffff;
    border-color: #159bd7;
    transform: translateY(-3px) rotate(-4deg);
  }


  .skn-contact-link {
    align-self: center;
    color: #dce9f7;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
  }


  .skn-contact-link:hover {
    color: #159bd7;
  }


  .skn-address-item {
    align-items: flex-start;
  }


  .skn-address-text {
    color: #dce9f7;
    font-size: 15px;
    line-height: 1.8;
  }


  .skn-map-icon {
    margin-top: 2px;
  }


  /* =========================================================
    BOTTOM BAR
  ========================================================= */

  .skn-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 55px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .skn-footer-bottom img {
    width: 115px;
  }

  .skn-copyright {
    color: #dce9f7;
    font-size: 15px;
  }


  .skn-industry-label {
    color: #159bd7;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
  }


  .skn-industry-label:hover {
    color: #ffffff;
  }


  /* =========================================================
    FLOATING ACTION BUTTONS
  ========================================================= */

  .skn-floating-actions {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }


  .skn-float-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }


  /* Call */

  .skn-call-btn {
    background: #e53935;
  }


  .skn-call-btn:hover {
    color: #ffffff;
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(229, 57, 53, 0.4);
  }


  /* WhatsApp */

  .skn-whatsapp-btn {
    background: #25d366;
  }


  .skn-whatsapp-btn:hover {
    color: #ffffff;
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
  }


  /* =========================================================
    FLOATING BUTTON PULSE
  ========================================================= */

  .skn-float-btn::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0;
    animation: sknFloatPulse 2.5s infinite;
  }


  @keyframes sknFloatPulse {

    0% {
      transform: scale(0.85);
      opacity: 0;
    }

    35% {
      opacity: 0.35;
    }

    100% {
      transform: scale(1.35);
      opacity: 0;
    }
  }


  /* =========================================================
    ICON ANIMATION
  ========================================================= */

  .skn-call-btn i {
    animation: sknPhoneRing 2.5s infinite;
  }


  @keyframes sknPhoneRing {

    0%,
    70%,
    100% {
      transform: rotate(0);
    }

    73% {
      transform: rotate(-12deg);
    }

    76% {
      transform: rotate(12deg);
    }

    79% {
      transform: rotate(-8deg);
    }

    82% {
      transform: rotate(8deg);
    }

    85% {
      transform: rotate(0);
    }
  }


  /* =========================================================
    TOOLTIP
  ========================================================= */

  .skn-float-tooltip {
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 7px 12px;
    background: #061827;
    color: #ffffff;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }


  .skn-float-tooltip::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: #061827;
  }


  .skn-float-btn:hover .skn-float-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }


  /* =========================================================
    MOBILE
  ========================================================= */

  @media (max-width: 767px) {

    .skn-footer {
      padding-top: 55px;
    }

    .skn-footer-brand {
      margin-bottom: 10px;
    }

    .skn-footer-logo {
      width: 165px;
    }

    .skn-footer-description {
      font-size: 13px;
      line-height: 1.8;
    }

    .skn-footer-title {
      margin-bottom: 20px;
    }

    .skn-footer-link {
      font-size: 13px;
    }

    .skn-footer-contact-item {
      gap: 10px;
    }

    .skn-footer-bottom {
      margin-top: 35px;
      flex-direction: column;
      align-items: flex-start;
    }

    .skn-floating-actions {
      right: 15px;
      bottom: 18px;
      gap: 10px;
    }

    .skn-float-btn {
      width: 38px;
      height: 38px;
      font-size: 16px;
    }

    .skn-float-tooltip {
      display: none;
    }
  }

  /* =========================================================
    RESPONSIVE
  ========================================================= */
  @media (max-width: 1399px) {
    .container {
      padding: 0 35px;
    }
  }

  @media (max-width: 1299px) {

    .btn-skn,
    .btn-outline-skn {
      font-size: 13px;
    }

    .nav-link {
      font-size: 14px;
    }

    .navbar-brand img {
      width: 200px;
    }

    .skn-about-title {
      font-size: clamp(30px, 4vw, 36px);
    }

    .skn-why-title {
      font-size: clamp(30px, 3.2vw, 36px);
    }

    .section-title h2 {
      font-size: clamp(30px, 3.5vw, 36px);
    }
  }

  @media (max-width: 1199px) {

    .skn-why-content-area {
      padding: 45px 35px;
    }

    .skn-why-title {
      font-size: 38px;
    }

    .skn-image-card {
      width: 155px;
      height: 105px;
    }
  }


  @media (max-width: 991px) {

    .skn-why-wrapper {
      grid-template-columns: 1fr;
    }

    .skn-why-image-area {
      min-height: 500px;
    }

    .skn-why-content-area {
      padding: 45px 35px;
    }

    .skn-why-title {
      font-size: 38px;
    }
  }


  @media (max-width: 767px) {

    .skn-why-section {
      padding: 70px 0;
    }

    .skn-why-wrapper {
      border-radius: 20px;
    }

    .skn-why-image-area {
      min-height: 420px;
    }

    .skn-image-card {
      width: 140px;
      height: 95px;
    }

    .skn-image-card-one {
      left: 20px;
      bottom: 20px;
    }

    .skn-image-card-two {
      right: 20px;
      bottom: 50px;
    }

    .skn-why-content-area {
      padding: 35px 20px;
    }

    .skn-why-title {
      font-size: 32px;
    }

    .skn-feature-item {
      min-height: 70px;
    }

    a.btn.btn-skn {
      color: #ffff;
      padding: 15px 14px;
    }
  }


  @media (max-width: 480px) {

    .skn-why-image-area {
      min-height: 340px;
    }

    .skn-image-card {
      width: 110px;
      height: 75px;
    }

    .skn-image-card-two {
      bottom: 35px;
    }

    .skn-why-title {
      font-size: 28px;
    }

    .skn-feature-icon {
      flex: 0 0 48px;

      width: 48px;
      height: 48px;

      font-size: 15px;
      margin-bottom: 20px;
    }

    .skn-feature-text h5 {
      font-size: 15px;
    }

    .skn-feature-text p {
      font-size: 14px;
    }

    .skn-feature-number {
      display: none;
    }

    .skn-feature-arrow {
      right: 10px;
    }

    .skn-feature-item {
      display: block;
    }
  }
  .main-header .navbar-nav > li.current > a {
    position: relative;
    color: var(--skn-blue-2) !important;
}


/* Default underline hidden */
.main-header .navbar-nav > li > a.nav-link::before {
    content: "";
    position: absolute;
    left: 15px;
    right: 25px;
    bottom: 18px;
    height: 2px;
    background: var(--skn-blue-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: .3s;
}

/* Active menu and hover underline */
.main-header .navbar-nav > li.current > a.nav-link::before,
.main-header .navbar-nav > li > a.nav-link:hover::before {
    transform: scaleX(1);
}

/* Required for underline positioning */
.main-header .navbar-nav > li > a.nav-link {
    position: relative;
}