/* =========================================================
   GLOBAL
========================================================= */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;

  font-family: "Poppins", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   COLOR SYSTEM
========================================================= */

:root {
  --black: #000000;

  --orange: #EB7E00;

  --white: #ffffff;

  --dark-text: #222222;

  --light-gray: #eeeeee;

  --border-dark:
    rgba(255, 255, 255, 0.15);

  --border-light:
    #e1e1e1;

  /* -------------------------------------------------------
     MOBILE COLORS
  ------------------------------------------------------- */

  --mobile-arrow:
    #00d639;

  --mobile-box-bg:
    #111111;

  --mobile-box-border:
    rgba(255, 255, 255, 0.18);

  --mobile-scroll-track:
    #eeeeee;

  --mobile-scroll-thumb:
    #777777;

  /* -------------------------------------------------------
     MOBILE HEADER DIMENSIONS
  ------------------------------------------------------- */

  --mobile-nav-height:
    62px;

  --mobile-search-height:
    76px;

  --mobile-menu-top:
    138px;
}


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

.topbar {
  width: 100%;

  background:
    var(--black);

  color:
    var(--white);

  font-size:
    13px;

  padding:
    7px 0;

  position:
    relative;

  z-index:
    1000;

  font-family:
    "Poppins",
    sans-serif;
}


/* =========================================================
   TOPBAR HIGHLIGHT
========================================================= */

.topbar .green {
  color:
    var(--orange);
}


/* =========================================================
   TOPBAR CONTAINER
========================================================= */

.topbar .container {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


/* =========================================================
   TOPBAR LEFT SIDE
========================================================= */

.topbar .container > div:first-child {
  display: flex !important;

  align-items: center;

  gap: 28px;

  white-space: nowrap;
}


/* =========================================================
   TOPBAR LEFT ITEMS
========================================================= */

.topbar .container > div:first-child > * {
  display: flex;

  align-items: center;
}


/* =========================================================
   SEARCH BOX
========================================================= */

.search-box {
  position: relative;

  width: 180px;

  margin-right: 5px;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.search-box input {
  width: 100%;

  height: 34px;

  padding:
    6px
    38px
    6px
    15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.25);

  border-radius:
    25px;

  background:
    var(--white);

  color:
    var(--dark-text);

  outline:
    none;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    12px;

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


/* =========================================================
   SEARCH FOCUS
========================================================= */

.search-box input:focus {
  border-color:
    var(--orange);

  box-shadow:
    0 0 0 2px
    rgba(235, 126, 0, 0.20);
}


/* =========================================================
   SEARCH PLACEHOLDER
========================================================= */

.search-box input::placeholder {
  color:
    #888888;
}


/* =========================================================
   MIC
========================================================= */

.search-box .mic {
  position:
    absolute;

  right:
    11px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    var(--orange);

  font-size:
    15px;

  cursor:
    pointer;

  z-index:
    2;
}


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

.profile {
  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--orange);

  border:
    1px solid
    var(--orange);

  color:
    var(--white);

  border-radius:
    25px;

  padding:
    6px 17px;

  margin-right:
    3px;

  font-size:
    12px;

  font-weight:
    500;

  white-space:
    nowrap;

  cursor:
    pointer;

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


/* =========================================================
   PROFILE HOVER
========================================================= */

.profile:hover {
  background:
    var(--white);

  color:
    var(--black);

  transform:
    translateY(-1px);
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.social a {
  width:
    29px;

  height:
    29px;

  background:
    var(--orange);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  margin-left:
    0;

  color:
    var(--white);

  font-size:
    13px;

  text-decoration:
    none;

  transition:
    0.25s ease;
}


/* =========================================================
   SOCIAL HOVER
========================================================= */

.social a:hover {
  background:
    var(--white);

  color:
    var(--black);

  transform:
    translateY(-2px);
}


/* =========================================================
   NAVBAR
========================================================= */

.nav-main {
  width:
    100%;

  background:
    var(--black);

  padding:
    10px 0 12px;

  position:
    relative;

  z-index:
    1100;

  font-family:
    "Poppins",
    sans-serif;

  border-top:
    1px solid
    rgba(235, 126, 0, 0.18);

  border-bottom:
    2px solid
    var(--orange);
}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.nav-main .container {
  position:
    relative;

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  min-height:
    46px;
}


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

.navbar-brand {
  flex:
    0 0 auto;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    21px;

  font-weight:
    700;

  color:
    var(--white) !important;

  text-decoration:
    none;

  white-space:
    nowrap;

  margin-right:
    38px;

  line-height:
    1;
}


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

.navbar-brand:hover {
  color:
    var(--orange) !important;
}


/* =========================================================
   DESKTOP NAVBAR
========================================================= */

@media (min-width: 992px) {

  .nav-main .navbar-collapse {
    flex:
      1;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      0;
  }


  .nav-main .navbar-nav {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      1px;

    margin:
      0 auto !important;

    padding:
      0;

    width:
      auto;

    flex-wrap:
      nowrap;
  }


  .nav-main .navbar-nav .nav-item {
    display:
      flex;

    align-items:
      center;
  }

}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-link {
  position:
    relative;

  color:
    var(--white) !important;

  margin:
    0 8px;

  padding:
    9px 2px !important;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    13px;

  font-weight:
    500;

  cursor:
    pointer;

  text-decoration:
    none;

  white-space:
    nowrap;

  line-height:
    1.4;

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


/* =========================================================
   NAV LINK HOVER
========================================================= */

.nav-link:hover {
  color:
    var(--orange) !important;
}


/* =========================================================
   NAV LINK ACTIVE
========================================================= */

.nav-link.active {
  color:
    var(--orange) !important;

  font-weight:
    600;
}


/* =========================================================
   DESKTOP NAV UNDERLINE
========================================================= */

@media (min-width: 992px) {

  .nav-link::after {
    content:
      "";

    position:
      absolute;

    left:
      50%;

    bottom:
      1px;

    width:
      0;

    height:
      2px;

    background:
      var(--orange);

    transform:
      translateX(-50%);

    transition:
      width 0.25s ease;
  }


  .nav-link:hover::after,
  .nav-link.active::after {
    width:
      70%;
  }

}


/* =========================================================
   MEGA MENU PARENT
========================================================= */

.mega {
  position:
    static;
}


/* =========================================================
   MEGA MENU WRAPPER
========================================================= */

.mega-wrap {
  position:
    absolute;

  left:
    50%;

  right:
    auto;

  transform:
    translateX(-50%);

  top:
    calc(100% + 1px);

  width:
    1140px;

  max-width:
    calc(100vw - 40px);

  padding-top:
    10px;

  display:
    none;

  z-index:
    1200;
}


/* =========================================================
   DESKTOP MEGA MENU DISPLAY
========================================================= */

@media (min-width: 992px) {

  .mega:hover .mega-wrap {
    display:
      block;
  }


  .mega-wrap:hover {
    display:
      block;
  }

}


/* =========================================================
   MEGA BOX
========================================================= */

.mega-box {
  width:
    100%;

  display:
    flex;

  background:
    var(--light-gray);

  border-radius:
    14px;

  border-top:
    4px solid
    var(--orange);

  border-bottom:
    4px solid
    var(--orange);

  box-shadow:
    0 20px 45px
    rgba(0, 0, 0, 0.22),

    0 8px 20px
    rgba(0, 0, 0, 0.12);

  overflow:
    hidden;

  position:
    relative;
}


/* =========================================================
   LEFT PANEL
========================================================= */

.left-panel {
  width:
    275px;

  min-width:
    275px;

  flex-shrink:
    0;

  background:
    #f7f7f7;

  border-right:
    1px solid
    #dcdcdc;

  font-family:
    "Poppins",
    sans-serif;
}


/* =========================================================
   LEFT PANEL UL
========================================================= */

.left-panel > ul {
  list-style:
    none;

  margin:
    0;

  padding:
    0;
}


/* =========================================================
   LEFT PANEL DIRECT LI
========================================================= */

.left-panel > ul > li {
  position:
    relative;

  padding:
    13px 18px;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.5;

  color:
    #555555;

  border-bottom:
    1px solid
    var(--border-light);

  cursor:
    pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    padding-left 0.25s ease;
}


/* =========================================================
   LAST LEFT ITEM
========================================================= */

.left-panel > ul > li:last-child {
  border-bottom:
    none;
}


/* =========================================================
   LEFT ITEM HOVER
========================================================= */

.left-panel > ul > li:hover {
  background:
    #eeeeee;

  color:
    var(--orange);

  padding-left:
    22px;
}


/* =========================================================
   DESKTOP ACTIVE LEFT ITEM
========================================================= */

@media (min-width: 992px) {

  .left-panel > ul > li.active {
    background:
      linear-gradient(
        90deg,
        #000000 0%,
        #EB7E00 50%,
        #000000 100%
      );

    color:
      var(--white);

    font-weight:
      600;

    padding-left:
      18px;
  }


  .left-panel > ul > li.active:hover {
    color:
      var(--white);

    padding-left:
      18px;
  }


  .left-panel > ul > li.active::after {
    content:
      "";

    position:
      absolute;

    right:
      -21px;

    top:
      50%;

    transform:
      translateY(-50%);

    width:
      0;

    height:
      0;

    border-top:
      21px solid transparent;

    border-bottom:
      21px solid transparent;

    border-left:
      21px solid #000000;

    z-index:
      10;
  }

}


/* =========================================================
   RIGHT PANEL
========================================================= */

.right-panel {
  flex:
    1;

  min-width:
    0;

  padding:
    25px 35px;

  background:
    #eeeeee;

  font-family:
    "Poppins",
    sans-serif;
}


/* =========================================================
   RIGHT PANEL TAB
========================================================= */

.right-panel > .tab {
  display:
    none;
}


.right-panel > .tab.active {
  display:
    block;
}


/* =========================================================
   RIGHT PANEL HEADING
========================================================= */

.right-panel h6 {
  margin-top:
    0;

  margin-bottom:
    15px;

  color:
    var(--orange);

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   RIGHT PANEL UL
========================================================= */

.right-panel ul {
  list-style:
    none;

  margin:
    0;

  padding:
    0;
}


/* =========================================================
   RIGHT PANEL LI
========================================================= */

.right-panel li {
  padding:
    5px 0;

  color:
    #444444;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.6;

  cursor:
    pointer;

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


/* =========================================================
   RIGHT PANEL LI HOVER
========================================================= */

.right-panel li:hover {
  color:
    var(--orange);

  transform:
    translateX(4px);
}


/* =========================================================
   GENERIC TAB
========================================================= */

.tab {
  display:
    none;
}


.tab.active {
  display:
    block;
}


/* =========================================================
   RIGHT PANEL ROW
========================================================= */

.right-panel .row {
  margin-left:
    0;

  margin-right:
    0;
}


/* =========================================================
   DESKTOP MEGA ANIMATION
========================================================= */

@media (min-width: 992px) {

  .mega:hover .mega-wrap {
    animation:
      megaFadeIn
      0.18s
      ease-out;
  }


  @keyframes megaFadeIn {

    from {
      opacity:
        0;

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


    to {
      opacity:
        1;

      transform:
        translateX(-50%)
        translateY(0);
    }

  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .topbar .container,
  .nav-main .container {
    max-width:
      1320px;
  }


  .mega-wrap {
    width:
      1140px;

    max-width:
      calc(100vw - 40px);
  }


  .navbar-brand {
    margin-right:
      45px;
  }


  .nav-link {
    margin-left:
      9px;

    margin-right:
      9px;
  }

}


/* =========================================================
   LAPTOP / TABLET DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

  .topbar .container,
  .nav-main .container {
    max-width:
      960px;
  }


  .topbar .container > div:first-child {
    gap:
      18px;
  }


  .search-box {
    width:
      155px;
  }


  .navbar-brand {
    margin-right:
      18px;
  }


  .nav-link {
    margin-left:
      5px;

    margin-right:
      5px;

    font-size:
      12px;
  }


  .mega-wrap {
    width:
      960px;

    max-width:
      calc(100vw - 30px);
  }


  .left-panel {
    width:
      240px;

    min-width:
      240px;
  }


  .right-panel {
    padding:
      22px 28px;
  }


  .right-panel li {
    font-size:
      13px;
  }

}


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

@media (max-width: 991px) {

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

  html {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden;
  }


  body {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden;
  }


  body.mobile-menu-open {
    overflow:
      hidden;

    height:
      100dvh;

    touch-action:
      none;
  }


  /* =======================================================
     MOBILE NAVBAR
     
     Logo + Close button remain at top.
  ======================================================= */

  .nav-main {

    width:
      100%;

    height:
      var(--mobile-nav-height);

    min-height:
      var(--mobile-nav-height);

    padding:
      8px 0;

    background:
      var(--black);

    position:
      relative;

    z-index:
      10004;

    border-top:
      none;

    border-bottom:
      2px solid
      var(--orange);
  }


  /* =======================================================
     NAVBAR CONTAINER
  ======================================================= */

  .nav-main .container {

    width:
      100%;

    height:
      100%;

    min-height:
      0;

    position:
      relative;

    z-index:
      10005;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;
  }


  /* =======================================================
     MOBILE BRAND / LOGO
  ======================================================= */

  .navbar-brand {

    flex:
      0 0 auto;

    display:
      inline-flex !important;

    align-items:
      center;

    font-size:
      18px;

    font-weight:
      700;

    color:
      var(--white) !important;

    white-space:
      nowrap;

    margin-right:
      0;

    line-height:
      1;

    position:
      relative;

    z-index:
      10006;

    visibility:
      visible !important;

    opacity:
      1 !important;
  }


  .navbar-brand:hover {
    color:
      var(--orange) !important;
  }


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

  .navbar-toggler {

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      center;

    width:
      44px;

    height:
      44px;

    padding:
      0 !important;

    margin:
      0 !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    font-size:
      24px;

    position:
      relative;

    z-index:
      10007;

    visibility:
      visible !important;

    opacity:
      1 !important;
  }


  /* =======================================================
     TOGGLER HOVER / FOCUS
  ======================================================= */

  .navbar-toggler:hover,
  .navbar-toggler:focus,
  .navbar-toggler:active {

    color:
      var(--orange) !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;
  }


  /* =======================================================
     OPEN / CLOSE ICON
  ======================================================= */

  .menu-open-icon {
    display:
      block;
  }


  .menu-close-icon {
    display:
      none;
  }


  .navbar-toggler[aria-expanded="true"]
  .menu-open-icon {

    display:
      none;
  }


  .navbar-toggler[aria-expanded="true"]
  .menu-close-icon {

    display:
      block;
  }


  /* =======================================================
     TOPBAR
     
     On mobile the topbar becomes the SEARCH HEADER.
     
     It is placed BELOW the logo/navbar.
  ======================================================= */

  .topbar {

    width:
      100%;

    height:
      var(--mobile-search-height);

    min-height:
      var(--mobile-search-height);

    padding:
      10px 0;

    background:
      var(--black);

    position:
      relative;

    z-index:
      10002;

    display:
      block;

    border-bottom:
      1px solid
      rgba(235, 126, 0, 0.25);
  }


  /* =======================================================
     TOPBAR CONTAINER MOBILE
  ======================================================= */

  .topbar .container {

    width:
      100%;

    height:
      100%;

    display:
      flex !important;

    flex-direction:
      column;

    align-items:
      stretch !important;

    justify-content:
      center;

    gap:
      0;

    padding:
      0 15px;
  }


  /* =======================================================
     HIDE DESKTOP TOPBAR CONTENT
  ======================================================= */

  .topbar .container > div:first-child {

    display:
      none !important;
  }


  /* =======================================================
     SEARCH AREA
  ======================================================= */

  .topbar .container > div:last-child {

    width:
      100%;

    height:
      100%;

    display:
      flex !important;

    align-items:
      center;
  }


  /* =======================================================
     HIDE PROFILE / SOCIAL
  ======================================================= */

  .topbar .profile,
  .topbar .social {

    display:
      none !important;
  }


  /* =======================================================
     MOBILE SEARCH BOX
  ======================================================= */

  .topbar .search-box,
  .search-box {

    width:
      100% !important;

    height:
      48px;

    margin:
      0 !important;

    position:
      relative;

    display:
      block;
  }


  /* =======================================================
     MOBILE SEARCH INPUT
  ======================================================= */

  .topbar .search-box input,
  .search-box input {

    width:
      100% !important;

    height:
      48px;

    padding:
      0 50px 0 18px;

    background:
      #111111;

    color:
      var(--white);

    border:
      1px solid
      rgba(255, 255, 255, 0.35);

    border-radius:
      12px;

    font-family:
      "Poppins",
      sans-serif;

    font-size:
      14px;

    outline:
      none;

    box-shadow:
      none;
  }


  /* =======================================================
     SEARCH PLACEHOLDER
  ======================================================= */

  .topbar .search-box input::placeholder,
  .search-box input::placeholder {

    color:
      rgba(255, 255, 255, 0.60);
  }


  /* =======================================================
     SEARCH FOCUS
  ======================================================= */

  .topbar .search-box input:focus,
  .search-box input:focus {

    border-color:
      var(--orange);

    box-shadow:
      0 0 0 2px
      rgba(235, 126, 0, 0.15);
  }


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

  .topbar .search-box .mic,
  .search-box .mic {

    right:
      17px;

    top:
      50%;

    transform:
      translateY(-50%);

    color:
      var(--orange);

    font-size:
      19px;

    z-index:
      3;
  }


  /* =======================================================
     WHEN MOBILE MENU IS OPEN
     
     NAVBAR = TOP
     TOPBAR = BELOW NAVBAR
  ======================================================= */

  body.mobile-menu-open .nav-main {

    position:
      fixed !important;

    top:
      0 !important;

    left:
      0 !important;

    width:
      100% !important;

    height:
      var(--mobile-nav-height) !important;

    min-height:
      var(--mobile-nav-height) !important;

    z-index:
      10004 !important;

    background:
      var(--black) !important;

    border-bottom:
      2px solid
      var(--orange) !important;
  }


  /* =======================================================
     SEARCH BAR FIXED BELOW LOGO
  ======================================================= */

  body.mobile-menu-open .topbar {

    position:
      fixed !important;

    top:
      var(--mobile-nav-height) !important;

    left:
      0 !important;

    width:
      100% !important;

    height:
      var(--mobile-search-height) !important;

    min-height:
      var(--mobile-search-height) !important;

    z-index:
      10003 !important;

    background:
      var(--black) !important;

    border-bottom:
      1px solid
      rgba(235, 126, 0, 0.30) !important;
  }


  /* =======================================================
     FULL MOBILE COLLAPSE
     
     Starts BELOW:
     
     1. Logo/header
     2. Search
  ======================================================= */

  .nav-main .navbar-collapse {

    position:
      fixed !important;

    top:
      var(--mobile-menu-top) !important;

    left:
      0 !important;

    width:
      100% !important;

    height:
      calc(
        100dvh -
        var(--mobile-menu-top)
      ) !important;

    max-height:
      calc(
        100dvh -
        var(--mobile-menu-top)
      ) !important;

    padding:
      0 !important;

    margin:
      0 !important;

    background:
      var(--black) !important;

    z-index:
      10001 !important;

    overflow:
      hidden !important;

    overflow-x:
      hidden !important;

    overflow-y:
      hidden !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;
  }


  /* =======================================================
     COLLAPSE CLOSED
  ======================================================= */

  .nav-main .navbar-collapse:not(.show) {

    display:
      none !important;
  }


  /* =======================================================
     COLLAPSE OPEN
  ======================================================= */

  .nav-main .navbar-collapse.show {

    display:
      block !important;
  }


  /* =======================================================
     MAIN NAVIGATION SCROLL CONTAINER
     
     This is ONLY for the complete main menu.
  ======================================================= */

  .nav-main .navbar-collapse
  > .navbar-nav {

    width:
      100% !important;

    height:
      100% !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    padding:
      0 16px 60px 15px !important;

    display:
      block !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;

    scrollbar-width:
      auto;

    scrollbar-color:
      var(--mobile-scroll-thumb)
      var(--mobile-scroll-track);
  }


  /* =======================================================
     MAIN MENU SCROLLBAR
  ======================================================= */

  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar {

    width:
      14px;

    height:
      auto;
  }


  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar-track {

    background:
      var(--mobile-scroll-track);

    border-radius:
      0;
  }


  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar-thumb {

    background:
      var(--mobile-scroll-thumb);

    border-radius:
      3px;

    min-height:
      70px;
  }


  /* =======================================================
     NAVBAR NAV
  ======================================================= */

  .nav-main .navbar-nav {

    width:
      100%;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;
  }


  /* =======================================================
     MAIN MEGA ITEM
  ======================================================= */

  .nav-main .navbar-nav > .mega {

    width:
      100%;

    position:
      static !important;

    display:
      block;

    margin:
      0;

    padding:
      0;
  }


  /* =======================================================
     MAIN CATEGORY LINK
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link {

    width:
      100%;

    min-height:
      60px;

    margin:
      0 !important;

    padding:
      18px 36px 18px 4px !important;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      space-between;

    position:
      relative;

    color:
      var(--white) !important;

    background:
      transparent !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.16);

    font-size:
      17px;

    font-weight:
      600;

    line-height:
      1.4;

    white-space:
      normal;
  }


  /* =======================================================
     MAIN CATEGORY HOVER
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link:hover {

    color:
      var(--orange) !important;
  }


  /* =======================================================
     MAIN CATEGORY ACTIVE
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link.active {

    color:
      var(--orange) !important;
  }


  /* =======================================================
     MAIN CATEGORY ARROW
     
     Down = closed
     Up   = open
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link.mobile-toggle::after {

    content:
      "";

    position:
      absolute;

    right:
      9px;

    top:
      50%;

    width:
      10px;

    height:
      10px;

    border-right:
      2px solid
      var(--mobile-arrow);

    border-bottom:
      2px solid
      var(--mobile-arrow);

    transform:
      translateY(-65%)
      rotate(45deg);

    transition:
      transform 0.25s ease;
  }


  /* =======================================================
     MAIN CATEGORY OPEN ARROW
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link.mobile-toggle.active::after {

    transform:
      translateY(-25%)
      rotate(225deg);
  }


  /* =======================================================
     REMOVE DESKTOP UNDERLINE
  ======================================================= */

  .nav-main .navbar-nav
  > .mega
  > .nav-link::after {

    display:
      none !important;
  }


  /* =======================================================
     MEGA WRAPPER MOBILE
  ======================================================= */

  .mega-wrap {

    position:
      static !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    width:
      100% !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    padding:
      0 !important;

    margin:
      0 !important;

    transform:
      none !important;

    display:
      none;

    background:
      transparent !important;

    box-shadow:
      none !important;

    animation:
      none !important;

    z-index:
      auto;
  }


  /* =======================================================
     OPEN MEGA
  ======================================================= */

  .mega.active > .mega-wrap {

    display:
      block !important;
  }


  /* =======================================================
     MEGA BOX MOBILE
  ======================================================= */

  .mega-box {

    width:
      100% !important;

    display:
      block !important;

    margin:
      0 !important;

    padding:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     LEFT PANEL MOBILE
  ======================================================= */

  .left-panel {

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     LEFT PANEL UL
  ======================================================= */

  .left-panel > ul {

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    list-style:
      none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     DIRECT LEFT ITEMS
  ======================================================= */

  .left-panel > ul > li {

    position:
      relative;

    width:
      100% !important;

    min-height:
      55px;

    height:
      auto !important;

    margin:
      0 !important;

    padding:
      16px 42px 16px 22px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.12);

    border-left:
      3px solid
      transparent;

    font-family:
      "Poppins",
      sans-serif;

    font-size:
      15px;

    font-weight:
      500;

    line-height:
      1.5;

    cursor:
      pointer;

    transition:
      background 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease;
  }


  /* =======================================================
     INNER ITEM HOVER
  ======================================================= */

  .left-panel > ul > li:hover {

    color:
      var(--orange) !important;

    background:
      rgba(235, 126, 0, 0.07) !important;
  }


  /* =======================================================
     INNER ITEM ACTIVE
  ======================================================= */

  .left-panel > ul > li.active {

    color:
      var(--orange) !important;

    background:
      rgba(235, 126, 0, 0.10) !important;

    border-left:
      3px solid
      var(--orange) !important;

    font-weight:
      600;
  }


  /* =======================================================
     INNER ITEM ACTIVE HOVER
  ======================================================= */

  .left-panel > ul > li.active:hover {

    color:
      var(--orange) !important;

    background:
      rgba(235, 126, 0, 0.10) !important;
  }


  /* =======================================================
     INNER CATEGORY ARROW
     
     Entity Registration
     Hospitality
     FSSAI
     etc.
  ======================================================= */

  .left-panel > ul > li[data-tab]::after {

    content:
      "";

    position:
      absolute;

    right:
      14px;

    top:
      22px;

    width:
      9px;

    height:
      9px;

    border-right:
      2px solid
      var(--mobile-arrow);

    border-bottom:
      2px solid
      var(--mobile-arrow);

    transform:
      rotate(45deg);

    transition:
      transform 0.25s ease;
  }


  /* =======================================================
     INNER CATEGORY OPEN ARROW
  ======================================================= */

  .left-panel > ul > li[data-tab].active::after {

    transform:
      rotate(225deg);
  }


  /* =======================================================
     MOBILE INNER CONTENT BOX
     
     IMPORTANT:
     
     Entity Registration ke andar ka
     complete menu isi box mein rahega.
  ======================================================= */

  .left-panel
  > ul
  > li
  > .mobile-inner-content {

    display:
      none;

    width:
      calc(100% - 2px) !important;

    height:
      300px !important;

    min-height:
      300px !important;

    max-height:
      300px !important;

    margin:
      0 1px 10px 0 !important;

    padding:
      0 10px 0 14px !important;

    background:
      var(--mobile-box-bg) !important;

    border:
      1px solid
      var(--mobile-box-border) !important;

    border-radius:
      5px;

    box-shadow:
      inset
      0 0 0 1px
      rgba(255, 255, 255, 0.025);

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;

    scrollbar-width:
      auto;

    scrollbar-color:
      var(--mobile-scroll-thumb)
      var(--mobile-scroll-track);

    box-sizing:
      border-box !important;

    cursor:
      default;
  }


  /* =======================================================
     OPEN INNER BOX
  ======================================================= */

  .left-panel
  > ul
  > li
  > .mobile-inner-content.open {

    display:
      block !important;
  }


  /* =======================================================
     INNER BOX SCROLLBAR
  ======================================================= */

  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar {

    width:
      12px;

    height:
      auto;
  }


  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar-track {

    background:
      var(--mobile-scroll-track);

    border-radius:
      0;
  }


  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar-thumb {

    background:
      var(--mobile-scroll-thumb);

    border-radius:
      3px;

    min-height:
      60px;
  }


  /* =======================================================
     INNER TAB
  ======================================================= */

  .left-panel
  > ul
  > li
  > .mobile-inner-content
  > .tab {

    display:
      none;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      10px 8px 18px 4px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }


  /* =======================================================
     ACTIVE TAB
  ======================================================= */

  .left-panel
  > ul
  > li
  > .mobile-inner-content
  > .tab.active {

    display:
      block !important;

    animation:
      mobileTabOpen
      0.18s
      ease-out;
  }


  /* =======================================================
     TAB OPEN ANIMATION
  ======================================================= */

  @keyframes mobileTabOpen {

    from {

      opacity:
        0;

      transform:
        translateY(-4px);
    }


    to {

      opacity:
        1;

      transform:
        translateY(0);
    }

  }


  /* =======================================================
     TAB HEADING
  ======================================================= */

  .mobile-inner-content
  .tab
  h6 {

    display:
      block;

    margin:
      0 !important;

    padding:
      2px 0 12px !important;

    color:
      var(--orange) !important;

    font-family:
      "Poppins",
      sans-serif;

    font-size:
      15px;

    font-weight:
      600;

    line-height:
      1.5;
  }


  /* =======================================================
     TAB LIST
  ======================================================= */

  .mobile-inner-content
  .tab
  ul {

    width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      0 !important;

    list-style:
      none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     NESTED TAB ITEMS
     
     These are NOT accordion items.
  ======================================================= */

  .mobile-inner-content
  .tab
  ul
  li {

    position:
      static !important;

    width:
      100% !important;

    min-height:
      0 !important;

    height:
      auto !important;

    margin:
      0 !important;

    padding:
      7px 4px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    border:
      0 !important;

    border-left:
      0 !important;

    font-family:
      "Poppins",
      sans-serif;

    font-size:
      14px;

    font-weight:
      400;

    line-height:
      1.55;

    cursor:
      pointer;

    box-shadow:
      none !important;

    transition:
      color 0.2s ease,
      padding-left 0.2s ease;
  }


  /* =======================================================
     NESTED ITEM HOVER
  ======================================================= */

  .mobile-inner-content
  .tab
  ul
  li:hover {

    color:
      var(--orange) !important;

    background:
      transparent !important;

    padding-left:
      8px !important;

    border:
      0 !important;
  }


  /* =======================================================
     REMOVE ARROW FROM NESTED ITEMS
  ======================================================= */

  .mobile-inner-content
  .tab
  ul
  li::after {

    display:
      none !important;

    content:
      none !important;
  }


  /* =======================================================
     TAB ROW
  ======================================================= */

  .mobile-inner-content
  .tab
  .row {

    width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;
  }


  .mobile-inner-content
  .tab
  .row
  > [class*="col-"] {

    width:
      100% !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;
  }


  /* =======================================================
     ORIGINAL RIGHT PANEL
     
     Hidden because JS moves tabs.
  ======================================================= */

  .mega-box
  > .right-panel {

    display:
      none !important;

    width:
      0 !important;

    min-width:
      0 !important;

    height:
      0 !important;

    max-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;
  }


  /* =======================================================
     RIGHT PANEL FALLBACK
  ======================================================= */

  .right-panel {

    width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    border:
      0 !important;
  }


  .right-panel > .tab {

    display:
      none !important;
  }


  .right-panel > .tab.active {

    display:
      none !important;
  }


  /* =======================================================
     BODY / PAGE LOCK
  ======================================================= */

  html:has(body.mobile-menu-open) {

    overflow:
      hidden !important;

    height:
      100dvh !important;
  }


  body.mobile-menu-open {

    overflow:
      hidden !important;

    height:
      100dvh !important;
  }


  /* =======================================================
     REMOVE UNWANTED DESKTOP EFFECTS
  ======================================================= */

  .mega-wrap,
  .mega-box {

    animation:
      none !important;
  }


  /* =======================================================
     PREVENT HORIZONTAL OVERFLOW
  ======================================================= */

  .nav-main,
  .nav-main .navbar-collapse,
  .nav-main .navbar-nav,
  .mega,
  .mega-wrap,
  .mega-box,
  .left-panel,
  .left-panel > ul,
  .mobile-inner-content {

    max-width:
      100%;
  }


  .nav-main .navbar-collapse,
  .nav-main .navbar-collapse > .navbar-nav {

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     KEEP INNER CONTENT INSIDE PARENT
  ======================================================= */

  .left-panel
  > ul
  > li.active
  > .mobile-inner-content {

    display:
      block !important;
  }


  /* =======================================================
     REMOVE DESKTOP ACTIVE TRIANGLE
  ======================================================= */

  .left-panel
  > ul
  > li.active::before {

    content:
      none !important;
  }


  /* =======================================================
     NESTED CONTENT COLORS
  ======================================================= */

  .mobile-inner-content,
  .mobile-inner-content .tab,
  .mobile-inner-content .tab ul {

    background:
      transparent !important;
  }


  .left-panel
  > ul
  > li
  > .mobile-inner-content {

    background:
      var(--mobile-box-bg) !important;
  }


  .mobile-inner-content
  .tab
  li {

    color:
      var(--white) !important;
  }


  .mobile-inner-content
  .tab
  li:hover {

    color:
      var(--orange) !important;
  }


  /* =======================================================
     TAB HEADING COLOR
  ======================================================= */

  .mobile-inner-content
  .tab
  h6 {

    color:
      var(--orange) !important;
  }

}


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

@media (max-width: 575px) {

  /* -------------------------------------------------------
     MOBILE VARIABLES
  ------------------------------------------------------- */

  :root {

    --mobile-nav-height:
      58px;

    --mobile-search-height:
      70px;

    --mobile-menu-top:
      128px;
  }


  /* -------------------------------------------------------
     NAVBAR
  ------------------------------------------------------- */

  .nav-main {

    height:
      var(--mobile-nav-height);

    min-height:
      var(--mobile-nav-height);

    padding:
      8px 0;
  }


  .nav-main .container {

    padding-left:
      15px;

    padding-right:
      15px;
  }


  /* -------------------------------------------------------
     BRAND
  ------------------------------------------------------- */

  .navbar-brand {

    font-size:
      16px !important;
  }


  /* -------------------------------------------------------
     TOGGLER
  ------------------------------------------------------- */

  .navbar-toggler {

    width:
      40px;

    height:
      40px;

    font-size:
      22px;
  }


  /* -------------------------------------------------------
     SEARCH HEADER
  ------------------------------------------------------- */

  .topbar {

    height:
      var(--mobile-search-height);

    min-height:
      var(--mobile-search-height);

    padding:
      9px 0;
  }


  .topbar .container {

    padding-left:
      15px !important;

    padding-right:
      15px !important;
  }


  /* -------------------------------------------------------
     SEARCH
  ------------------------------------------------------- */

  .search-box input {

    height:
      46px;

    font-size:
      14px;
  }


  .search-box .mic {

    right:
      16px;

    font-size:
      18px;
  }


  /* -------------------------------------------------------
     MOBILE COLLAPSE
  ------------------------------------------------------- */

  .nav-main .navbar-collapse {

    top:
      var(--mobile-menu-top) !important;

    height:
      calc(
        100dvh -
        var(--mobile-menu-top)
      ) !important;

    max-height:
      calc(
        100dvh -
        var(--mobile-menu-top)
      ) !important;
  }


  /* -------------------------------------------------------
     MAIN SCROLL
  ------------------------------------------------------- */

  .nav-main .navbar-collapse
  > .navbar-nav {

    height:
      100% !important;

    max-height:
      100% !important;

    padding:
      0 16px 65px 15px !important;
  }


  /* -------------------------------------------------------
     MAIN CATEGORY
  ------------------------------------------------------- */

  .nav-main .navbar-nav
  > .mega
  > .nav-link {

    min-height:
      58px;

    padding:
      17px 34px 17px 3px !important;

    font-size:
      16px;
  }


  /* -------------------------------------------------------
     MAIN ARROW
  ------------------------------------------------------- */

  .nav-main .navbar-nav
  > .mega
  > .nav-link.mobile-toggle::after {

    right:
      8px;

    width:
      9px;

    height:
      9px;
  }


  /* -------------------------------------------------------
     INNER CATEGORY
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li {

    font-size:
      14px;

    padding:
      15px 40px 15px 18px !important;
  }


  /* -------------------------------------------------------
     INNER ARROW
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li[data-tab]::after {

    right:
      13px;

    top:
      21px;

    width:
      8px;

    height:
      8px;
  }


  /* -------------------------------------------------------
     INNER BOX
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li
  > .mobile-inner-content {

    height:
      280px !important;

    min-height:
      280px !important;

    max-height:
      280px !important;

    padding:
      0 9px 0 12px !important;

    margin-bottom:
      8px !important;
  }


  /* -------------------------------------------------------
     INNER BOX SCROLLBAR
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar {

    width:
      11px;
  }


  /* -------------------------------------------------------
     TAB
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab {

    padding:
      9px 7px 16px 3px !important;
  }


  /* -------------------------------------------------------
     TAB HEADING
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab
  h6 {

    font-size:
      14px;

    padding:
      2px 0 10px !important;
  }


  /* -------------------------------------------------------
     TAB ITEMS
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab
  ul
  li {

    font-size:
      13px;

    padding:
      6px 3px !important;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

  :root {

    --mobile-nav-height:
      56px;

    --mobile-search-height:
      68px;

    --mobile-menu-top:
      124px;
  }


  /* -------------------------------------------------------
     MAIN SCROLL
  ------------------------------------------------------- */

  .nav-main .navbar-collapse
  > .navbar-nav {

    padding-left:
      12px !important;

    padding-right:
      12px !important;
  }


  /* -------------------------------------------------------
     MAIN CATEGORY
  ------------------------------------------------------- */

  .nav-main .navbar-nav
  > .mega
  > .nav-link {

    font-size:
      15px;

    padding-right:
      32px !important;
  }


  /* -------------------------------------------------------
     INNER CATEGORY
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li {

    font-size:
      13px;

    padding-left:
      16px !important;

    padding-right:
      38px !important;
  }


  /* -------------------------------------------------------
     INNER BOX
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li
  > .mobile-inner-content {

    height:
      260px !important;

    min-height:
      260px !important;

    max-height:
      260px !important;
  }


  /* -------------------------------------------------------
     TAB ITEMS
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab
  ul
  li {

    font-size:
      12.5px;
  }

}


/* =========================================================
   DESKTOP SAFETY
========================================================= */

@media (min-width: 992px) {

  .nav-main .navbar-nav {

    flex-wrap:
      nowrap;
  }


  .nav-main .container {

    align-items:
      center;
  }


  .topbar .container {

    align-items:
      center;
  }

}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

.nav-link:focus,
.navbar-brand:focus,
.navbar-toggler:focus,
.profile:focus,
.search-box input:focus {

  outline:
    none;
}


/* =========================================================
   MOBILE FINAL RESET
     
   These rules make sure desktop styles
   cannot leak into mobile.
========================================================= */

@media (max-width: 991px) {

  /* -------------------------------------------------------
     NO DESKTOP MEGA SHADOW
  ------------------------------------------------------- */

  .mega-box {

    box-shadow:
      none !important;
  }


  /* -------------------------------------------------------
     NO DESKTOP LEFT ACTIVE TRIANGLE
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li.active::after {

    /* IMPORTANT:
       This selector is overridden below for
       data-tab arrow.
    */

    border:
      0 !important;

    width:
      auto;

    height:
      auto;
  }


  /* -------------------------------------------------------
     RESTORE MOBILE DATA-TAB ARROW
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li[data-tab]::after {

    content:
      "";

    position:
      absolute;

    right:
      14px;

    top:
      22px;

    width:
      9px;

    height:
      9px;

    border-right:
      2px solid
      var(--mobile-arrow) !important;

    border-bottom:
      2px solid
      var(--mobile-arrow) !important;

    transform:
      rotate(45deg);

    background:
      transparent !important;
  }


  /* -------------------------------------------------------
     OPEN DATA-TAB ARROW
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li[data-tab].active::after {

    transform:
      rotate(225deg);
  }


  /* -------------------------------------------------------
     NESTED LI NEVER GETS ARROW
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab
  ul
  li::after {

    content:
      none !important;

    display:
      none !important;
  }


  /* -------------------------------------------------------
     ONLY INNER BOX SCROLLS INTERNALLY
  ------------------------------------------------------- */

  .left-panel
  > ul
  > li
  > .mobile-inner-content {

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;
  }


  /* -------------------------------------------------------
     INNER CONTENT ITSELF DOES NOT SCROLL
  ------------------------------------------------------- */

  .mobile-inner-content
  .tab,
  .mobile-inner-content
  .tab ul {

    overflow:
      visible !important;

    max-height:
      none !important;
  }


  /* -------------------------------------------------------
     MAIN MENU HAS ITS OWN SCROLL
  ------------------------------------------------------- */

  .nav-main .navbar-collapse
  > .navbar-nav {

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;
  }


  /* -------------------------------------------------------
     BODY NEVER SCROLLS WHEN MENU OPEN
  ------------------------------------------------------- */

  body.mobile-menu-open {

    overflow:
      hidden !important;

    height:
      100dvh !important;
  }


  html:has(body.mobile-menu-open) {

    overflow:
      hidden !important;

    height:
      100dvh !important;
  }


  /* -------------------------------------------------------
     LOGO ALWAYS VISIBLE
  ------------------------------------------------------- */

  body.mobile-menu-open
  .nav-main
  .navbar-brand {

    display:
      inline-flex !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    position:
      relative !important;

    z-index:
      10006 !important;
  }


  /* -------------------------------------------------------
     CLOSE BUTTON ALWAYS VISIBLE
  ------------------------------------------------------- */

  body.mobile-menu-open
  .nav-main
  .navbar-toggler {

    display:
      flex !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    position:
      relative !important;

    z-index:
      10007 !important;
  }

}
/* =========================================================
   FINAL MOBILE HEADER / SEARCH FIX
   ---------------------------------------------------------
   CLOSED:
   - Search bar is completely hidden.
   - Only logo + hamburger remain in navbar.

   OPEN:
   - Navbar stays fixed at the top.
   - Search bar appears BELOW the navbar.
   - Main mobile menu starts BELOW the search bar.
   - Body/page remains locked while menu is open.
========================================================= */

@media (max-width: 991px) {

  /* =======================================================
     CLOSED STATE — SEARCH MUST NOT BE VISIBLE
  ======================================================= */

  .topbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }


  /* =======================================================
     NORMAL MOBILE NAVBAR
  ======================================================= */

  .nav-main {
    position: relative !important;
    width: 100% !important;
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    background: var(--black) !important;
    z-index: 10004 !important;
  }


  .nav-main .container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 10005 !important;
  }


  /* =======================================================
     LOGO — ALWAYS VISIBLE
  ======================================================= */

  .nav-main .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10007 !important;
    flex: 0 0 auto !important;
  }


  /* =======================================================
     HAMBURGER — ALWAYS VISIBLE
  ======================================================= */

  .nav-main .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10008 !important;
  }


  /* =======================================================
     CLOSED MENU — COLLAPSE HIDDEN
  ======================================================= */

  .nav-main .navbar-collapse {
    display: none !important;
  }


  /* =======================================================
     OPEN MENU — NAVBAR FIXED AT TOP
  ======================================================= */

  body.mobile-menu-open .nav-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    background: var(--black) !important;
    z-index: 10004 !important;
    border-bottom: 2px solid var(--orange) !important;
  }


  /* =======================================================
     OPEN MENU — SEARCH BAR BELOW NAVBAR
  ======================================================= */

  body.mobile-menu-open .topbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;

    top: var(--mobile-nav-height) !important;
    left: 0 !important;

    width: 100% !important;
    height: var(--mobile-search-height) !important;
    min-height: var(--mobile-search-height) !important;
    max-height: var(--mobile-search-height) !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    background: var(--black) !important;

    border-top: 0 !important;
    border-bottom:
      1px solid
      rgba(235, 126, 0, 0.30) !important;

    overflow: visible !important;

    z-index: 10003 !important;
  }


  /* =======================================================
     OPEN SEARCH CONTAINER
  ======================================================= */

  body.mobile-menu-open .topbar .container {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 15px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 0 !important;
  }


  /* =======================================================
     HIDE DESKTOP TOPBAR CONTENT
  ======================================================= */

  body.mobile-menu-open
  .topbar .container > div:first-child {
    display: none !important;
  }


  /* =======================================================
     SHOW SEARCH AREA
  ======================================================= */

  body.mobile-menu-open
  .topbar .container > div:last-child {
    display: flex !important;

    width: 100% !important;
    height: 100% !important;

    align-items: center !important;
    justify-content: center !important;
  }


  /* =======================================================
     PROFILE / SOCIAL — NEVER SHOW ON MOBILE
  ======================================================= */

  .topbar .profile,
  .topbar .social {
    display: none !important;
  }


  /* =======================================================
     SEARCH BOX
  ======================================================= */

  body.mobile-menu-open .topbar .search-box {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
  }


  /* =======================================================
     SEARCH INPUT
  ======================================================= */

  body.mobile-menu-open
  .topbar .search-box input {
    display: block !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;

    padding: 0 50px 0 18px !important;

    background: #111111 !important;
    color: var(--white) !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.35) !important;

    border-radius: 12px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family:
      "Poppins",
      sans-serif !important;

    font-size: 14px !important;
  }


  /* =======================================================
     SEARCH PLACEHOLDER
  ======================================================= */

  body.mobile-menu-open
  .topbar .search-box input::placeholder {
    color:
      rgba(255, 255, 255, 0.60) !important;
  }


  /* =======================================================
     SEARCH FOCUS
  ======================================================= */

  body.mobile-menu-open
  .topbar .search-box input:focus {
    border-color:
      var(--orange) !important;

    box-shadow:
      0 0 0 2px
      rgba(235, 126, 0, 0.15) !important;
  }


  /* =======================================================
     MICROPHONE
  ======================================================= */

  body.mobile-menu-open
  .topbar .search-box .mic {
    position: absolute !important;

    right: 17px !important;
    top: 50% !important;

    transform:
      translateY(-50%) !important;

    color:
      var(--orange) !important;

    font-size: 19px !important;

    z-index: 5 !important;
  }


  /* =======================================================
     OPEN MENU — START BELOW SEARCH
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-collapse {
    display: block !important;

    position: fixed !important;

    top: var(--mobile-menu-top) !important;
    left: 0 !important;

    width: 100% !important;

    height:
      calc(100dvh - var(--mobile-menu-top)) !important;

    max-height:
      calc(100dvh - var(--mobile-menu-top)) !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
      var(--black) !important;

    z-index: 10001 !important;

    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }


  /* =======================================================
     MAIN MOBILE MENU SCROLL
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-collapse
  > .navbar-nav {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;

    padding:
      0 16px 60px 15px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    scrollbar-width: auto;

    scrollbar-color:
      var(--mobile-scroll-thumb)
      var(--mobile-scroll-track);
  }


  /* =======================================================
     MAIN MENU SCROLLBAR
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar {
    width: 14px;
  }


  body.mobile-menu-open
  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar-track {
    background:
      var(--mobile-scroll-track);
  }


  body.mobile-menu-open
  .nav-main .navbar-collapse
  > .navbar-nav::-webkit-scrollbar-thumb {
    background:
      var(--mobile-scroll-thumb);

    border-radius: 3px;

    min-height: 70px;
  }


  /* =======================================================
     MOBILE NAV ITEMS
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav > .mega {
    width: 100% !important;

    position: static !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link {
    width: 100% !important;

    min-height: 60px !important;

    margin: 0 !important;

    padding:
      18px 36px 18px 4px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    position: relative !important;

    color:
      var(--white) !important;

    background:
      transparent !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.16) !important;

    font-size: 17px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    white-space: normal !important;
  }


  /* =======================================================
     MAIN ITEM HOVER
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link:hover {
    color:
      var(--orange) !important;
  }


  /* =======================================================
     MAIN ITEM ACTIVE
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link.active {
    color:
      var(--orange) !important;
  }


  /* =======================================================
     MAIN CATEGORY ARROW
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link.mobile-toggle::after {
    content: "";

    position: absolute;

    right: 9px;
    top: 50%;

    width: 10px;
    height: 10px;

    border-right:
      2px solid
      var(--mobile-arrow);

    border-bottom:
      2px solid
      var(--mobile-arrow);

    transform:
      translateY(-65%)
      rotate(45deg);

    transition:
      transform 0.25s ease;
  }


  /* =======================================================
     MAIN CATEGORY OPEN ARROW
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link.mobile-toggle.active::after {
    transform:
      translateY(-25%)
      rotate(225deg);
  }


  /* =======================================================
     REMOVE DESKTOP UNDERLINE
  ======================================================= */

  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link::after {
    display: none !important;
    content: none !important;
  }


  /* =======================================================
     MEGA WRAPPER
  ======================================================= */

  body.mobile-menu-open .mega-wrap {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    display: none;

    background:
      transparent !important;

    box-shadow:
      none !important;

    animation:
      none !important;
  }


  body.mobile-menu-open
  .mega.active > .mega-wrap {
    display: block !important;
  }


  /* =======================================================
     MEGA BOX
  ======================================================= */

  body.mobile-menu-open .mega-box {
    width: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
      transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     LEFT PANEL
  ======================================================= */

  body.mobile-menu-open .left-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
      transparent !important;

    border: 0 !important;

    overflow:
      visible !important;
  }


  body.mobile-menu-open .left-panel > ul {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     LEFT PANEL ITEMS
  ======================================================= */

  body.mobile-menu-open
  .left-panel > ul > li {
    position: relative;

    width: 100% !important;

    min-height: 55px !important;
    height: auto !important;

    margin: 0 !important;

    padding:
      16px 42px 16px 22px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.12) !important;

    border-left:
      3px solid
      transparent !important;

    font-family:
      "Poppins",
      sans-serif !important;

    font-size:
      15px !important;

    font-weight:
      500 !important;

    line-height:
      1.5 !important;

    cursor:
      pointer !important;
  }


  /* =======================================================
     LEFT ITEM HOVER
  ======================================================= */

  body.mobile-menu-open
  .left-panel > ul > li:hover {
    color:
      var(--orange) !important;

    background:
      rgba(235, 126, 0, 0.07) !important;
  }


  /* =======================================================
     LEFT ITEM ACTIVE
  ======================================================= */

  body.mobile-menu-open
  .left-panel > ul > li.active {
    color:
      var(--orange) !important;

    background:
      rgba(235, 126, 0, 0.10) !important;

    border-left:
      3px solid
      var(--orange) !important;

    font-weight:
      600 !important;
  }


  /* =======================================================
     INNER CATEGORY ARROW
  ======================================================= */

  body.mobile-menu-open
  .left-panel > ul > li[data-tab]::after {
    content: "";

    position: absolute;

    right: 14px;
    top: 22px;

    width: 9px;
    height: 9px;

    border-right:
      2px solid
      var(--mobile-arrow);

    border-bottom:
      2px solid
      var(--mobile-arrow);

    transform:
      rotate(45deg);

    transition:
      transform 0.25s ease;
  }


  body.mobile-menu-open
  .left-panel > ul > li[data-tab].active::after {
    transform:
      rotate(225deg);
  }


  /* =======================================================
     MOBILE INNER CONTENT BOX
  ======================================================= */

  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content {
    display: none;

    width:
      calc(100% - 2px) !important;

    height:
      300px !important;

    min-height:
      300px !important;

    max-height:
      300px !important;

    margin:
      0 1px 10px 0 !important;

    padding:
      0 10px 0 14px !important;

    background:
      var(--mobile-box-bg) !important;

    border:
      1px solid
      var(--mobile-box-border) !important;

    border-radius:
      5px !important;

    box-shadow:
      inset
      0 0 0 1px
      rgba(255, 255, 255, 0.025) !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;

    scrollbar-width:
      auto;

    scrollbar-color:
      var(--mobile-scroll-thumb)
      var(--mobile-scroll-track);

    box-sizing:
      border-box !important;

    cursor:
      default !important;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content.open {
    display: block !important;
  }


  /* =======================================================
     INNER CONTENT SCROLLBAR
  ======================================================= */

  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar {
    width: 12px;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar-track {
    background:
      var(--mobile-scroll-track);
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content::-webkit-scrollbar-thumb {
    background:
      var(--mobile-scroll-thumb);

    border-radius:
      3px;

    min-height:
      60px;
  }


  /* =======================================================
     INNER TAB
  ======================================================= */

  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content
  > .tab {
    display: none;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      10px 8px 18px 4px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content
  > .tab.active {
    display: block !important;

    animation:
      mobileTabOpen
      0.18s
      ease-out;
  }


  /* =======================================================
     TAB HEADING
  ======================================================= */

  body.mobile-menu-open
  .mobile-inner-content
  .tab
  h6 {
    display: block;

    margin:
      0 !important;

    padding:
      2px 0 12px !important;

    color:
      var(--orange) !important;

    font-family:
      "Poppins",
      sans-serif;

    font-size:
      15px;

    font-weight:
      600;

    line-height:
      1.5;
  }


  /* =======================================================
     TAB LIST
  ======================================================= */

  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul {
    width: 100% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     TAB LIST ITEMS
  ======================================================= */

  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul
  li {
    position: static !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    padding:
      7px 4px !important;

    background:
      transparent !important;

    color:
      var(--white) !important;

    border:
      0 !important;

    border-left:
      0 !important;

    font-family:
      "Poppins",
      sans-serif !important;

    font-size:
      14px !important;

    font-weight:
      400 !important;

    line-height:
      1.55 !important;

    cursor:
      pointer !important;

    box-shadow:
      none !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul
  li:hover {
    color:
      var(--orange) !important;

    background:
      transparent !important;

    padding-left:
      8px !important;

    border:
      0 !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul
  li::after {
    display:
      none !important;

    content:
      none !important;
  }


  /* =======================================================
     TAB ROW
  ======================================================= */

  body.mobile-menu-open
  .mobile-inner-content
  .tab
  .row {
    width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  .row
  > [class*="col-"] {
    width:
      100% !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;
  }


  /* =======================================================
     RIGHT PANEL HIDDEN ON MOBILE
  ======================================================= */

  body.mobile-menu-open
  .mega-box
  > .right-panel {
    display:
      none !important;

    width:
      0 !important;

    min-width:
      0 !important;

    height:
      0 !important;

    max-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;
  }


  /* =======================================================
     PAGE LOCK
  ======================================================= */

  html:has(body.mobile-menu-open) {
    overflow:
      hidden !important;

    height:
      100dvh !important;
  }


  body.mobile-menu-open {
    overflow:
      hidden !important;

    height:
      100dvh !important;

    touch-action:
      none !important;
  }


  /* =======================================================
     VERY IMPORTANT:
     SEARCH IS HIDDEN AGAIN IF MENU CLOSES
  ======================================================= */

  body:not(.mobile-menu-open) .topbar {
    display:
      none !important;

    visibility:
      hidden !important;

    opacity:
      0 !important;

    height:
      0 !important;

    min-height:
      0 !important;

    max-height:
      0 !important;

    padding:
      0 !important;

    margin:
      0 !important;

    border:
      0 !important;

    overflow:
      hidden !important;
  }

}


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

@media (max-width: 575px) {

  :root {
    --mobile-nav-height: 58px;
    --mobile-search-height: 70px;
    --mobile-menu-top: 128px;
  }


  .nav-main {
    height:
      58px !important;

    min-height:
      58px !important;
  }


  body.mobile-menu-open
  .nav-main {
    height:
      58px !important;

    min-height:
      58px !important;
  }


  body.mobile-menu-open
  .topbar {
    top:
      58px !important;

    height:
      70px !important;

    min-height:
      70px !important;

    max-height:
      70px !important;
  }


  body.mobile-menu-open
  .nav-main .navbar-collapse {
    top:
      128px !important;

    height:
      calc(100dvh - 128px) !important;

    max-height:
      calc(100dvh - 128px) !important;
  }


  body.mobile-menu-open
  .topbar .search-box,
  body.mobile-menu-open
  .topbar .search-box input {
    height:
      46px !important;
  }


  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link {
    min-height:
      58px !important;

    padding:
      17px 34px 17px 3px !important;

    font-size:
      16px !important;
  }


  body.mobile-menu-open
  .left-panel > ul > li {
    font-size:
      14px !important;

    padding:
      15px 40px 15px 18px !important;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content {
    height:
      280px !important;

    min-height:
      280px !important;

    max-height:
      280px !important;

    padding:
      0 9px 0 12px !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  h6 {
    font-size:
      14px !important;

    padding:
      2px 0 10px !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul
  li {
    font-size:
      13px !important;

    padding:
      6px 3px !important;
  }

}


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

@media (max-width: 380px) {

  :root {
    --mobile-nav-height: 56px;
    --mobile-search-height: 68px;
    --mobile-menu-top: 124px;
  }


  .nav-main,
  body.mobile-menu-open .nav-main {
    height:
      56px !important;

    min-height:
      56px !important;
  }


  body.mobile-menu-open
  .topbar {
    top:
      56px !important;

    height:
      68px !important;

    min-height:
      68px !important;

    max-height:
      68px !important;
  }


  body.mobile-menu-open
  .nav-main .navbar-collapse {
    top:
      124px !important;

    height:
      calc(100dvh - 124px) !important;

    max-height:
      calc(100dvh - 124px) !important;
  }


  body.mobile-menu-open
  .nav-main .navbar-nav
  > .mega
  > .nav-link {
    font-size:
      15px !important;

    padding-right:
      32px !important;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li {
    font-size:
      13px !important;

    padding-left:
      16px !important;

    padding-right:
      38px !important;
  }


  body.mobile-menu-open
  .left-panel
  > ul
  > li
  > .mobile-inner-content {
    height:
      260px !important;

    min-height:
      260px !important;

    max-height:
      260px !important;
  }


  body.mobile-menu-open
  .mobile-inner-content
  .tab
  ul
  li {
    font-size:
      12.5px !important;
  }

}


/* =========================================================
   END HEADER CSS
========================================================= */


/*------------hero section-------*/

/* =========================================================
   HERO - BASE
========================================================= */

.hero {
  position: relative;
  width: 100%;
  height: calc(100svh - 120px);
  min-height: 560px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}


/* =========================================================
   VIDEO
========================================================= */

.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

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

  z-index: 1;
}


/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.48);

  z-index: 2;

  pointer-events: none;
}


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

.hero-content {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  max-width: 1100px;

  padding: 20px;

  transform: translate(-50%, -50%);

  z-index: 3;

  text-align: center;

  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   HEADING
========================================================= */

.hero-content h1 {
  margin: 0;

  width: 100%;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: clamp(38px, 4.5vw, 58px);

  font-weight: 600;

  line-height: 1.15;

  letter-spacing: -0.5px;
}


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

.hero-content p {
  margin: 15px 0 27px;

  width: 100%;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: clamp(15px, 1.5vw, 19px);

  font-weight: 400;

  line-height: 1.5;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {
  display: flex;

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

  gap: 14px;

  flex-wrap: wrap;
}


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

.hero .btn-primary {
  display: inline-flex;

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

  min-width: 135px;
  height: 46px;

  padding: 0 25px;

  border: 1px solid #EB7E00;
  border-radius: 30px;

  background: linear-gradient(
    90deg,
    #EB7E00 0%,
    #000000 100%
  );

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 14px;
  font-weight: 500;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition: all 0.25s ease;
}


.hero .btn-primary:hover {
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.30);
}


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

.hero .btn-outline {
  display: inline-flex;

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

  min-width: 115px;
  height: 46px;

  padding: 0 24px;

  border: 2px solid #fff;
  border-radius: 30px;

  background: transparent;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 14px;
  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition: all 0.25s ease;
}


.hero .btn-outline:hover {
  background: #fff;

  color: #000;

  transform: translateY(-2px);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

  .hero {
    height: calc(100svh - 115px);
    min-height: 520px;
  }

  .hero-content {
    max-width: 950px;
  }

  .hero-content h1 {
    font-size: 48px;
  }

  .hero-content p {
    font-size: 17px;
    margin-top: 14px;
    margin-bottom: 25px;
  }

}


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

@media (min-width: 769px) and (max-width: 991px) {

  .hero {
    height: calc(100svh - 80px);
    min-height: 500px;
  }

  .hero-content {
    max-width: 800px;
    padding: 25px;
  }

  .hero-content h1 {
    font-size: clamp(36px, 6vw, 48px);
  }

  .hero-content p {
    font-size: 16px;
    margin: 13px 0 24px;
  }

}


/* =========================================================
   MOBILE
   481px - 768px
========================================================= */

@media (max-width: 768px) {

  .hero {
    /*
      Mobile navbar approx 70-80px.
    */
    height: calc(100svh - 70px);

    min-height: 480px;

    width: 100%;

    overflow: hidden;
  }


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

  .hero-video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
      Center crop.
    */
    object-position: center center;
  }


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

  .hero-overlay {
    background:
      rgba(0, 0, 0, 0.52);
  }


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

  .hero-content {

    top: 50%;
    left: 50%;

    width: 100%;

    max-width: 100%;

    padding:
      20px 18px;

    transform:
      translate(-50%, -50%);
  }


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

  .hero-content h1 {

    width: 100%;

    max-width: 650px;

    margin: 0 auto;

    font-size:
      clamp(
        30px,
        7.5vw,
        42px
      );

    line-height: 1.18;

    letter-spacing: -0.2px;
  }


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

  .hero-content p {

    width: 100%;

    max-width: 500px;

    margin:
      12px auto 22px;

    font-size:
      clamp(
        13px,
        3.5vw,
        16px
      );

    line-height: 1.55;
  }


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

  .hero-buttons {

    width: 100%;

    gap: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: nowrap;
  }


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

  .hero .btn-primary {

    min-width: 125px;

    width: auto;

    height: 43px;

    padding:
      0 20px;

    font-size: 13px;
  }


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

  .hero .btn-outline {

    min-width: 105px;

    width: auto;

    height: 43px;

    padding:
      0 18px;

    font-size: 13px;
  }

}


/* =========================================================
   SMALL PHONE
   376px - 480px
========================================================= */

@media (max-width: 480px) {

  .hero {

    height:
      calc(100svh - 68px);

    min-height:
      500px;
  }


  /* =======================================================
     VIDEO
  ======================================================= */

  .hero-video {

    object-position:
      center center;
  }


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

  .hero-content {

    padding:
      20px 16px;
  }


  /* =======================================================
     HEADING
  ======================================================= */

  .hero-content h1 {

    max-width:
      360px;

    font-size:
      clamp(
        28px,
        8vw,
        36px
      );

    line-height:
      1.17;

    letter-spacing:
      -0.2px;
  }


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

  .hero-content p {

    max-width:
      340px;

    margin:
      11px auto 21px;

    font-size:
      13.5px;

    line-height:
      1.5;
  }


  /* =======================================================
     BUTTONS
  ======================================================= */

  .hero-buttons {

    gap:
      9px;

    flex-wrap:
      nowrap;
  }


  .hero .btn-primary {

    min-width:
      120px;

    height:
      42px;

    padding:
      0 17px;

    font-size:
      12.5px;
  }


  .hero .btn-outline {

    min-width:
      100px;

    height:
      42px;

    padding:
      0 16px;

    font-size:
      12.5px;
  }

}


/* =========================================================
   VERY SMALL PHONE
   320px - 375px
========================================================= */

@media (max-width: 375px) {

  .hero {

    height:
      calc(100svh - 65px);

    min-height:
      470px;
  }


  .hero-content {

    padding:
      18px 13px;
  }


  /* =======================================================
     HEADING
  ======================================================= */

  .hero-content h1 {

    max-width:
      330px;

    font-size:
      28px;

    line-height:
      1.16;
  }


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

  .hero-content p {

    max-width:
      300px;

    margin:
      10px auto 19px;

    font-size:
      12.5px;

    line-height:
      1.5;
  }


  /* =======================================================
     BUTTONS
  ======================================================= */

  .hero-buttons {

    gap:
      7px;
  }


  .hero .btn-primary {

    min-width:
      112px;

    height:
      40px;

    padding:
      0 14px;

    font-size:
      12px;
  }


  .hero .btn-outline {

    min-width:
      96px;

    height:
      40px;

    padding:
      0 13px;

    font-size:
      12px;
  }

}


/* =========================================================
   EXTRA SMALL PHONE
   320px AND BELOW
========================================================= */

@media (max-width: 320px) {

  .hero {

    min-height:
      450px;
  }


  .hero-content h1 {

    max-width:
      290px;

    font-size:
      25px;
  }


  .hero-content p {

    max-width:
      280px;

    font-size:
      12px;
  }


  .hero-buttons {

    gap:
      6px;
  }


  .hero .btn-primary {

    min-width:
      105px;

    height:
      39px;

    padding:
      0 11px;

    font-size:
      11px;
  }


  .hero .btn-outline {

    min-width:
      90px;

    height:
      39px;

    padding:
      0 10px;

    font-size:
      11px;
  }

}


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

@media (max-width: 991px) and (orientation: landscape) {

  .hero {

    height:
      calc(100svh - 65px);

    min-height:
      330px;
  }


  .hero-content {

    padding:
      12px 20px;
  }


  .hero-content h1 {

    font-size:
      clamp(
        24px,
        5vw,
        34px
      );

    line-height:
      1.12;
  }


  .hero-content p {

    margin:
      7px auto 13px;

    font-size:
      12px;
  }


  .hero .btn-primary,
  .hero .btn-outline {

    height:
      37px;

    min-width:
      100px;

    padding:
      0 15px;

    font-size:
      11px;
  }

}


/* =========================================================
   SHORT MOBILE SCREEN
========================================================= */

@media (max-width: 768px)
and (max-height: 700px)
and (orientation: portrait) {

  .hero {

    min-height:
      450px;
  }


  .hero-content {

    padding:
      15px;
  }


  .hero-content h1 {

    font-size:
      clamp(
        26px,
        7vw,
        34px
      );
  }


  .hero-content p {

    margin:
      9px auto 17px;

    font-size:
      12.5px;
  }


  .hero .btn-primary,
  .hero .btn-outline {

    height:
      40px;
  }

}


/* =========================================================
   SAFE AREA
========================================================= */

@supports (padding: max(0px)) {

  @media (max-width: 768px) {

    .hero-content {

      padding-left:
        max(
          16px,
          env(safe-area-inset-left)
        );

      padding-right:
        max(
          16px,
          env(safe-area-inset-right)
        );
    }

  }

}


/* =========================================================
   FOCUS
========================================================= */

.hero .btn-primary:focus-visible,
.hero .btn-outline:focus-visible {

  outline:
    2px solid
    #EB7E00;

  outline-offset:
    3px;
}



  
  /* about section start */
  /* =========================================================
   CORPORATE SOLUTION SECTION
   BASE / DESKTOP
========================================================= */

.corp-section {
  width: 100%;
  padding: 70px 20px;
  background: #f6f8fb;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.corp-heading {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}


.corp-title {
  margin: 0 0 10px;

  font-family: "Roboto", sans-serif !important;

  font-size: 32px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.5px;

  background:
    linear-gradient(
      90deg,
      #000000 0%,
      #EB7E00 50%,
      #000000 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.15);
}


.corp-subtitle {
  margin: 0 auto 40px;

  max-width: 800px;

  color: #555555;

  font-size: 17px;

  line-height: 1.6;

  font-weight: 400;
}


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

.corp-wrapper {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto;

  display: flex;

  align-items: flex-start;

  gap: 35px;
}


/* =========================================================
   LEFT MENU
========================================================= */

.corp-left-menu {
  width: 270px;

  min-width: 270px;

  display: flex;

  flex-direction: column;
}


/* =========================================================
   MENU ITEM
========================================================= */

.corp-menu-item {
  width: 100%;

  min-height: 48px;

  margin-bottom: 12px;

  padding: 8px 10px;

  display: flex;

  align-items: center;

  gap: 12px;

  background: #edf2f7;

  color: #333333;

  border-radius: 12px;

  cursor: pointer;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.35;

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


.corp-menu-item:hover {
  transform: translateX(3px);

  color: #EB7E00;

  box-shadow:
    0 5px 15px
    rgba(0, 0, 0, 0.08);
}


/* =========================================================
   ACTIVE MENU
========================================================= */

.corp-menu-item.active {
  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      #000000 0%,
      #EB7E00 50%,
      #000000 100%
    );

  box-shadow:
    0 7px 18px
    rgba(235, 126, 0, 0.20);
}


.corp-menu-item.active:hover {
  color: #ffffff;

  transform: translateX(3px);
}


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

.corp-icon {
  width: 32px;
  height: 32px;

  min-width: 32px;

  border-radius: 50%;

  background: #EB7E00;

  display: flex;

  align-items: center;

  justify-content: center;
}


.corp-icon img {
  width: 18px;
  height: 18px;

  object-fit: contain;
}


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

.corp-right {
  flex: 1;

  min-width: 0;
}


/* =========================================================
   TAB
========================================================= */

.corp-tab {
  width: 100%;

  display: none;

  align-items: flex-start;

  justify-content: space-between;

  gap: 35px;
}


.corp-tab.active {
  display: flex;
}


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

.corp-text {
  flex: 1;

  min-width: 0;
}


.corp-text h3 {
  margin: 0 0 10px;

  font-family: "Roboto", sans-serif !important;

  font-size: 25px;

  font-weight: 550;

  line-height: 1.3;

  color: #222222;
}


.corp-text > p {
  margin: 0;

  color: #555555;

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.corp-list {
  width: 100%;

  margin-top: 20px;
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.corp-item {
  width: 100%;

  min-height: 43px;

  margin-bottom: 10px;

  padding: 8px 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  background: #dfe5ee;

  border-radius: 40px;

  color: #222222;

  font-size: 14px;

  line-height: 1.4;

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


.corp-item:hover {
  transform: translateX(3px);

  box-shadow:
    0 5px 15px
    rgba(0, 0, 0, 0.08);
}


/* =========================================================
   LEFT SIDE OF SERVICE ITEM
========================================================= */

.corp-left {
  min-width: 0;

  flex: 1;

  display: flex;

  align-items: center;

  gap: 10px;
}


.corp-left span {
  min-width: 0;
}


/* =========================================================
   TICK
========================================================= */

.corp-tick {
  width: 22px;
  height: 22px;

  min-width: 22px;

  border-radius: 50%;

  background: #EB7E00;

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;
}


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

.corp-arrow {
  width: 25px;

  min-width: 25px;

  text-align: right;

  color: #EB7E00;

  font-size: 19px;

  font-weight: 600;
}


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

.corp-image {
  width: 35%;

  min-width: 250px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.corp-image img {
  display: block;

  width: 100%;

  max-width: 360px;

  height: auto;

  object-fit: contain;
}


/* =========================================================
   LARGE TABLET
   993px - 1199px
========================================================= */

@media (min-width: 993px) and (max-width: 1199px) {

  .corp-section {
    padding: 60px 18px;
  }

  .corp-wrapper {
    max-width: 1000px;
    gap: 25px;
  }

  .corp-left-menu {
    width: 235px;
    min-width: 235px;
  }

  .corp-menu-item {
    font-size: 13px;
  }

  .corp-tab {
    gap: 20px;
  }

  .corp-text h3 {
    font-size: 23px;
  }

  .corp-text > p {
    font-size: 14px;
  }

  .corp-item {
    font-size: 13px;
  }

  .corp-image {
    width: 30%;
    min-width: 190px;
  }

  .corp-image img {
    max-width: 260px;
  }
}


/* =========================================================
   TABLET
   769px - 992px
========================================================= */

@media (min-width: 769px) and (max-width: 992px) {

  .corp-section {
    padding: 55px 20px;
  }

  .corp-title {
    font-size: 30px;
  }

  .corp-subtitle {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .corp-wrapper {
    max-width: 850px;

    flex-direction: column;

    gap: 28px;
  }

  /* 3 COLUMN CATEGORY GRID */

  .corp-left-menu {
    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 10px;
  }

  .corp-menu-item {
    margin: 0;

    min-height: 52px;

    padding: 8px 10px;

    font-size: 13px;
  }

  .corp-icon {
    width: 30px;
    height: 30px;

    min-width: 30px;
  }

  .corp-icon img {
    width: 17px;
    height: 17px;
  }

  .corp-right {
    width: 100%;
  }

  .corp-tab {
    width: 100%;

    flex-direction: column;

    gap: 25px;
  }

  .corp-text {
    width: 100%;
  }

  .corp-image {
    width: 100%;

    min-width: 0;

    justify-content: center;
  }

  .corp-image img {
    max-width: 280px;
  }
}


/* =========================================================
   PHONE
   <= 768px
========================================================= */

@media (max-width: 768px) {

  .corp-section {
    width: 100%;

    padding:
      42px
      15px;

    overflow-x: hidden;
  }


  /* -----------------------------------------------
     TITLE
  ------------------------------------------------ */

  .corp-title {
    font-size:
      clamp(24px, 7vw, 29px);

    line-height: 1.25;

    margin-bottom: 10px;

    letter-spacing: 0.2px;
  }


  .corp-subtitle {
    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 28px;

    padding: 0 5px;
  }


  /* -----------------------------------------------
     WRAPPER
  ------------------------------------------------ */

  .corp-wrapper {
    width: 100%;

    flex-direction: column;

    gap: 25px;
  }


  /* -----------------------------------------------
     CATEGORY GRID
  ------------------------------------------------ */

  .corp-left-menu {

    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }


  .corp-menu-item {

    width: 100%;

    min-height: 50px;

    margin: 0;

    padding:
      7px
      8px;

    gap: 7px;

    border-radius: 10px;

    font-size: 12px;

    line-height: 1.3;

    overflow: hidden;
  }


  .corp-menu-item span {
    min-width: 0;
  }


  .corp-icon {

    width: 27px;
    height: 27px;

    min-width: 27px;
  }


  .corp-icon img {

    width: 15px;
    height: 15px;
  }


  /* -----------------------------------------------
     CONTENT
  ------------------------------------------------ */

  .corp-right {
    width: 100%;

    min-width: 0;
  }


  .corp-tab {

    width: 100%;

    flex-direction: column;

    gap: 0;

    text-align: left;
  }


  .corp-text {

    width: 100%;

    min-width: 0;
  }


  .corp-text h3 {

    margin:
      0
      0
      9px;

    font-size: 22px;

    line-height: 1.3;
  }


  .corp-text > p {

    margin: 0;

    font-size: 13.5px;

    line-height: 1.65;
  }


  /* -----------------------------------------------
     SERVICE LIST
  ------------------------------------------------ */

  .corp-list {

    width: 100%;

    margin-top: 16px;
  }


  .corp-item {

    width: 100%;

    min-height: 47px;

    margin-bottom: 8px;

    padding:
      7px
      11px;

    border-radius: 28px;

    gap: 8px;

    font-size: 13px;
  }


  .corp-left {

    gap: 8px;

    font-size: 13px;

    line-height: 1.4;
  }


  .corp-tick {

    width: 24px;

    height: 24px;

    min-width: 24px;

    font-size: 12px;
  }


  .corp-arrow {

    width: 23px;

    min-width: 23px;

    font-size: 18px;
  }


  /* -----------------------------------------------
     HIDE IMAGE ON PHONE
  ------------------------------------------------ */

  .corp-image {
    display: none !important;
  }
}


/* =========================================================
   SMALL PHONE
   <= 575px
========================================================= */

@media (max-width: 575px) {

  .corp-section {

    padding:
      36px
      11px;
  }


  .corp-title {

    font-size:
      clamp(22px, 7vw, 27px);

    line-height: 1.25;
  }


  .corp-subtitle {

    font-size: 12.5px;

    line-height: 1.65;

    margin-bottom: 24px;
  }


  /* -----------------------------------------------
     CATEGORY
  ------------------------------------------------ */

  .corp-left-menu {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }


  .corp-menu-item {

    min-height: 48px;

    padding:
      6px
      7px;

    gap: 6px;

    border-radius: 9px;

    font-size: 11.5px;
  }


  .corp-icon {

    width: 25px;

    height: 25px;

    min-width: 25px;
  }


  .corp-icon img {

    width: 14px;

    height: 14px;
  }


  /* -----------------------------------------------
     SERVICE CONTENT
  ------------------------------------------------ */

  .corp-text h3 {

    font-size: 20px;

    line-height: 1.3;
  }


  .corp-text > p {

    font-size: 12.5px;

    line-height: 1.6;
  }


  .corp-list {

    margin-top: 14px;
  }


  .corp-item {

    min-height: 46px;

    padding:
      6px
      9px;

    margin-bottom: 8px;

    border-radius: 26px;
  }


  .corp-left {

    gap: 7px;

    font-size: 12px;

    line-height: 1.35;
  }


  .corp-tick {

    width: 23px;

    height: 23px;

    min-width: 23px;

    font-size: 11px;
  }


  .corp-arrow {

    width: 21px;

    min-width: 21px;

    font-size: 17px;
  }
}


/* =========================================================
   VERY SMALL PHONE
   <= 380px
========================================================= */

@media (max-width: 380px) {

  .corp-section {

    padding:
      30px
      9px;
  }


  .corp-title {

    font-size: 21px;
  }


  .corp-subtitle {

    font-size: 12px;

    padding: 0;

    margin-bottom: 21px;
  }


  .corp-left-menu {

    gap: 7px;
  }


  .corp-menu-item {

    min-height: 46px;

    padding: 6px;

    gap: 5px;

    font-size: 10.5px;
  }


  .corp-icon {

    width: 23px;

    height: 23px;

    min-width: 23px;
  }


  .corp-icon img {

    width: 13px;

    height: 13px;
  }


  .corp-text h3 {

    font-size: 19px;
  }


  .corp-text > p {

    font-size: 11.5px;
  }


  .corp-item {

    min-height: 44px;

    padding:
      6px
      8px;
  }


  .corp-left {

    font-size: 11.5px;

    gap: 6px;
  }


  .corp-tick {

    width: 22px;

    height: 22px;

    min-width: 22px;
  }


  .corp-arrow {

    font-size: 16px;

    width: 20px;

    min-width: 20px;
  }
}


/* =========================================================
   CORPORATE SECTION — TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

  .corp-menu-item:hover,
  .corp-item:hover {

    transform: none;

    box-shadow: none;
  }

}


/* sats start */




/* =========================================================
   STATS SECTION
   BASE
========================================================= */

.stats-section {

  width: 100%;

  padding:
    0
    20px
    70px;

  background: #f6f8fb;

  font-family:
    "Poppins",
    sans-serif;

  overflow: hidden;
}


/* =========================================================
   STATS CONTAINER
========================================================= */

.stats-container {

  width: 100%;

  max-width: 1200px;

  margin:
    0
    auto;

  padding:
    40px
    20px;

  border-radius: 15px;

  background:
    linear-gradient(
      90deg,
      #000000 0%,
      #EB7E00 50%,
      #000000 100%
    );

  box-shadow:
    0 10px 25px
    rgba(0, 0, 0, 0.20);
}


/* =========================================================
   STATS GRID
========================================================= */

.stats-grid {

  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  align-items: center;

  text-align: center;
}


/* =========================================================
   SINGLE STAT
========================================================= */

.stat {

  min-width: 0;

  padding:
    10px
    15px;

  color: #ffffff;
}


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

.stat-icon {

  width: 60px;

  height: 60px;

  margin:
    0
    auto
    15px;

  border-radius: 50%;

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

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;
}


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

.stat-number {

  font-size: 42px;

  font-weight: 700;

  line-height: 1.1;

  color: #39FF14;
}


/* =========================================================
   LABEL
========================================================= */

.stat-label {

  margin-top: 10px;

  font-size: 18px;

  line-height: 1.4;

  color: #dddddd;
}


/* =========================================================
   TABLET
   769px - 992px
========================================================= */

@media (min-width: 769px) and (max-width: 992px) {

  .stats-section {

    padding:
      0
      20px
      55px;
  }


  .stats-container {

    max-width: 850px;

    padding:
      32px
      15px;

    border-radius: 14px;
  }


  .stats-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 25px;
  }


  .stat {

    padding:
      10px;
  }


  .stat-icon {

    width: 55px;

    height: 55px;

    margin-bottom: 12px;

    font-size: 22px;
  }


  .stat-number {

    font-size: 36px;
  }


  .stat-label {

    font-size: 16px;

    margin-top: 8px;
  }
}


/* =========================================================
   PHONE
   <= 768px
========================================================= */

@media (max-width: 768px) {

  .stats-section {

    width: 100%;

    padding:
      0
      12px
      45px;

    overflow-x: hidden;
  }


  .stats-container {

    width: 100%;

    margin: 0;

    padding:
      28px
      10px;

    border-radius: 13px;
  }


  .stats-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      22px
      5px;
  }


  .stat {

    width: 100%;

    padding:
      7px
      3px;
  }


  .stat-icon {

    width: 50px;

    height: 50px;

    margin-bottom: 10px;

    font-size: 20px;
  }


  .stat-number {

    font-size: 31px;

    line-height: 1.1;
  }


  .stat-label {

    margin-top: 7px;

    font-size: 13px;

    line-height: 1.4;
  }
}


/* =========================================================
   SMALL PHONE
   <= 575px
========================================================= */

@media (max-width: 575px) {

  .stats-section {

    padding:
      0
      10px
      38px;
  }


  .stats-container {

    padding:
      24px
      7px;

    border-radius: 12px;
  }


  .stats-grid {

    gap:
      18px
      2px;
  }


  .stat {

    padding:
      6px
      2px;
  }


  .stat-icon {

    width: 44px;

    height: 44px;

    margin-bottom: 8px;

    font-size: 18px;
  }


  .stat-number {

    font-size: 27px;
  }


  .stat-label {

    font-size: 11.5px;

    line-height: 1.35;

    margin-top: 6px;
  }
}


/* =========================================================
   VERY SMALL PHONE
   <= 380px
========================================================= */

@media (max-width: 380px) {

  .stats-section {

    padding:
      0
      8px
      32px;
  }


  .stats-container {

    padding:
      22px
      5px;
  }


  .stats-grid {

    gap:
      16px
      0;
  }


  .stat-icon {

    width: 40px;

    height: 40px;

    font-size: 17px;
  }


  .stat-number {

    font-size: 24px;
  }


  .stat-label {

    font-size: 10.5px;
  }
}

/* starts end  */


/* testmonials start */


/* SECTION */
.pu-section{
    background: linear-gradient(90deg, #000000 0%, #EB7E00 50%, #000000 100%);
    padding:60px 20px 90px;
    color:#fff;
  }
  
  /* TOP TEXT */
  .pu-top{
    text-align:center;
    color:#ffd700;
    font-size:20px;
    margin-bottom:40px;
  }
  .pu-top::after{
    content:"";
    width:40px;
    height:3px;
    background:#ffd700;
    display:block;
    margin:12px auto 0;
  }
  
  /* LAYOUT */
  .pu-wrap{
    max-width:1250px;
    margin:auto;
    display:flex;
    gap:40px;
  }
  
  /* LEFT PANEL */
  .pu-left{
    width:30%;
  }
  .pu-left h3{
    color:#ffd700;
    margin-bottom:28px;
  }
  
  .pu-rating{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
  }
  .pu-rating img{width:34px}
  .pu-rating div{font-size:15px}
  .pu-rating strong{color:#ffd700}
  
  .jd-logo svg{width:34px;height:34px}
  
  .pu-exp{
    margin-top:30px;
    display:flex;
    gap:12px;
    align-items:center;
  }
  .pu-exp-num{
    font-size:72px;
    font-weight:800;
    background:linear-gradient(#ffd700,#ffb300);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .pu-exp-text{
    font-size:14px;
  }
  .pu-exp-text span{
    letter-spacing:4px;
    font-weight:600;
  }
  
  /* RIGHT SLIDER */
  .pu-right{
    width:70%;
    overflow:hidden;
    position:relative;
  }
  
  .pu-track{
    display:flex;
    transition:transform .6s ease;
  }
  
  .pu-slide{
    min-width:100%;
    display:flex;
    gap:22px;
  }
  
  /* CARD */
  .pu-card{
    background:#fff;
    color:#2c4a6e;
    border-radius:20px;
    border:2px solid #8de4b7;
    padding:28px 26px;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  
  .pu-card p{
    font-size:16px;
    line-height:1.7;
  }
  
  .pu-user{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:25px;
  }
  
  .pu-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#2f7d1f;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
  }
  
  .pu-avatar-img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
  }
  
  .pu-google{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
    color:#f6b800;
  }
  .pu-google img{width:16px}
  
  /* DOTS */
  .pu-dots{
    text-align:center;
    margin-top:18px;
  }
  .pu-dots span{
    width:8px;
    height:8px;
    background:#9bb9d1;
    border-radius:50%;
    display:inline-block;
    margin:0 4px;
    cursor:pointer;
  }
  .pu-dots .active{background:#fff}
  
  /* ARROWS */
  .pu-arrow{
    position:absolute;
    bottom:-50px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:#fff;
    cursor:pointer;
    font-size:18px;
  }
  .pu-prev{left:0}
  .pu-next{left:48px}
  
  /* MOBILE */
  @media(max-width:900px){
    .pu-wrap{flex-direction:column}
    .pu-left,.pu-right{width:100%}
    .pu-slide{flex-direction:column}
  }
  
/* testmonial end */



  /* trusted partner start */

  /* SECTION */
  .trusted-section{
    padding:70px 20px 80px;
  }
  
  /* HEADING */
  .trusted-heading{
    text-align:center;
    margin-bottom:48px;
  }
  .trusted-heading h2{
    font-size:32px;
    font-weight:600;
    color:#EB7E00;
    position:relative;
    display:inline-block;
  }
  .trusted-heading h2::after{
    content:"";
    width:42px;
    height:4px;
    background:#2e8b73;
    display:block;
    margin:8px auto 0;
    border-radius:4px;
  }
  
  /* SLIDER */
  .trusted-slider{
    max-width:1200px;
    margin:auto;
    overflow:hidden;
    padding:1px 0; /* breathing space */
  }
  
  /* ROW */
  .trusted-row{
    width:100%;
    padding:15px 0;
  }
  .trusted-row + .trusted-row{
    margin-top:30px;
  }
  
  /* TRACK */
  .trusted-track{
    display:flex;
    width:max-content;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-duration:150s;
  }
  
  /* CARD */
  .trusted-card{
    width:160px;
    min-width:160px;
    height:100px;
    background:#ffffff;
    border-radius:18px;
    margin:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,0.08);
    border:1px solid rgba(0,0,0,0.04);
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease;
  }
  
  /* LOGO */
  .trusted-card img{
    max-width:120px;
    max-height:55px;
    object-fit:contain;
    opacity:.85;
    transition:opacity .35s ease, filter .35s ease;
  }
  
  /* ✨ LUXURY HOVER ✨ */
  .trusted-card:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 38px rgba(0,0,0,0.14);
    border-color:#2e8b73;
  }
  .trusted-card:hover img{
    opacity:1;
    filter:contrast(1.05);
  }
  
  /* ANIMATIONS */
  @keyframes slide-left{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }
  @keyframes slide-right{
    0%{transform:translateX(-50%)}
    100%{transform:translateX(0)}
  }
  
  .row-left .trusted-track{
    animation-name:slide-left;
  }
  .row-right .trusted-track{
    animation-name:slide-right;
  }
  
  /* RESPONSIVE */
  @media(max-width:768px){
    .trusted-card{
      width:150px;
      min-width:150px;
      height:90px;
      margin:0 10px;
    }
  }

  /* trusted partner end */


  /* why section start */
/* =========================================================
   PREMIUM WHY CHOOSE US
========================================================= */

.why-pu {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    padding: 85px 20px 95px;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(235,126,0,0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(11,58,111,0.045),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffaf5 52%,
            #f8fbff 100%
        );

    font-family: "Poppins", sans-serif;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.why-pu::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: -190px;
    bottom: -170px;

    border-radius: 50%;

    border: 1px solid rgba(235,126,0,0.12);

    pointer-events: none;
}


.why-pu::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.07),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.why-pu-heading {
    position: relative;
    z-index: 2;

    width: 100%;

    text-align: center;

    margin: 0 auto 65px;
}


.why-pu-small-title {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #EB7E00;

    text-transform: uppercase;
}


.why-pu-heading h2 {
    position: relative;

    display: inline-block;

    margin: 0;

    padding-bottom: 18px;

    font-family: "Roboto", sans-serif !important;

    font-size: clamp(32px, 4vw, 44px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.7px;

    color: #111827;
}


/* PREMIUM TITLE LINE */

.why-pu-heading-line {
    position: relative;

    width: 68px;

    height: 4px;

    margin: 14px auto 0;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #111111 0%,
            #EB7E00 50%,
            #111111 100%
        );
}


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

.why-pu-wrap {
    position: relative;
    z-index: 2;

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(350px, 0.88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: 75px;

    box-sizing: border-box;
}


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

.why-pu-image {
    position: relative;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    isolation: isolate;
}


/* MAIN CIRCLE */

.why-pu-image-circle {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #ffffff 0%,
            #fff8ee 48%,
            #ffe7c8 100%
        );

    box-shadow:
        0 30px 80px rgba(235,126,0,0.13);

    z-index: 0;
}


/* OUTER RING */

.why-pu-image-circle::before {
    content: "";

    position: absolute;

    inset: -18px;

    border-radius: 50%;

    border: 1px dashed rgba(235,126,0,0.35);

    box-shadow:
        0 0 0 15px rgba(235,126,0,0.025);
}


/* INNER RING */

.why-pu-image-circle::after {
    content: "";

    position: absolute;

    inset: 28px;

    border-radius: 50%;

    border: 1px solid rgba(235,126,0,0.12);
}


/* PERSON */

.why-pu-image img {
    position: relative;

    z-index: 3;

    display: block;

    width: auto;

    max-width: 92%;

    height: auto;

    max-height: 510px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 24px 25px rgba(0,0,0,0.16)
        );

    transition:
        transform .5s ease,
        filter .5s ease;
}


.why-pu-image:hover img {
    transform:
        translateY(-8px)
        scale(1.015);

    filter:
        drop-shadow(
            0 30px 30px rgba(0,0,0,0.20)
        );
}


/* =========================================================
   IMAGE DECORATIVE DOTS
========================================================= */

.why-pu-image::before {
    content: "";

    position: absolute;

    width: 85px;
    height: 85px;

    top: 35px;
    left: 20px;

    background-image:
        radial-gradient(
            #EB7E00 1.3px,
            transparent 1.3px
        );

    background-size: 10px 10px;

    opacity: .35;

    z-index: 0;
}


.why-pu-image::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: 30px;
    bottom: 35px;

    border-radius: 18px;

    border: 1px solid rgba(235,126,0,0.20);

    transform: rotate(12deg);

    z-index: 0;
}


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

.why-pu-content {
    position: relative;

    width: 100%;

    min-width: 0;
}


/* SMALL LABEL */

.why-pu-label {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #EB7E00;

    text-transform: uppercase;
}


.why-pu-label::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 20px;

    background: #EB7E00;
}


/* =========================================================
   MAIN CONTENT HEADING
========================================================= */

.why-pu-content h2 {
    max-width: 720px;

    margin: 0 0 20px;

    font-family: "Roboto", sans-serif !important;

    font-size: clamp(30px, 3.3vw, 40px);

    font-weight: 700;

    line-height: 1.22;

    letter-spacing: -0.5px;

    color: #101828;
}


/* HIGHLIGHT */

.why-pu-content h2 span {
    color: #EB7E00;

    position: relative;

    white-space: nowrap;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.why-pu-content p {
    max-width: 720px;

    margin: 0 0 13px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.85;

    color: #667085;
}


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

.why-pu-features {
    width: 100%;

    margin-top: 32px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    box-sizing: border-box;
}


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

.pu-feature {
    position: relative;

    min-width: 0;

    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 11px 15px 11px 11px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.98),
            rgba(255,250,244,0.95)
        );

    border: 1px solid rgba(17,24,39,0.07);

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(16,24,40,0.055);

    overflow: hidden;

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


/* TOP SHINE */

.pu-feature::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #EB7E00,
            transparent
        );

    opacity: 0;

    transition: opacity .3s ease;
}


.pu-feature:hover {
    transform: translateY(-5px);

    border-color:
        rgba(235,126,0,0.25);

    box-shadow:
        0 18px 38px rgba(16,24,40,0.11);
}


.pu-feature:hover::after {
    opacity: 1;
}


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

.pu-icon {
    position: relative;

    flex: 0 0 51px;

    width: 51px;
    height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #111111 0%,
            #3a2105 38%,
            #EB7E00 100%
        );

    box-shadow:
        0 9px 20px rgba(235,126,0,0.22);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* ICON SHINE */

.pu-icon::before {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    top: -42px;
    left: -30px;

    border-radius: 50%;

    background: rgba(255,255,255,0.16);
}


.pu-feature:hover .pu-icon {
    transform:
        rotate(-4deg)
        scale(1.07);

    box-shadow:
        0 12px 25px rgba(235,126,0,0.30);
}


/* FONT AWESOME */

.pu-icon i {
    position: relative;

    z-index: 2;

    color: #ffffff !important;

    font-size: 18px !important;

    line-height: 1;
}


/* IMAGE ICON */

.pu-icon img {
    position: relative;

    z-index: 2;

    display: block;

    width: 24px !important;

    height: 24px !important;

    object-fit: contain;
}


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

.pu-feature-text {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.pu-feature-text strong {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 13.5px;

    font-weight: 600;

    line-height: 1.3;

    color: #0b3a6f;
}


.pu-feature-text span {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 10.5px;

    font-weight: 400;

    line-height: 1.3;

    color: #8a94a6;
}


/* =========================================================
   LARGE DESKTOP
   1200px+
========================================================= */

@media (min-width: 1200px) {

    .why-pu {
        padding: 90px 30px 100px;
    }

    .why-pu-wrap {
        max-width: 1240px;

        gap: 80px;
    }

    .why-pu-image {
        min-height: 510px;
    }

    .why-pu-image-circle {
        width: 390px;
        height: 390px;
    }

    .why-pu-image img {
        max-height: 520px;
    }

}


/* =========================================================
   LAPTOP
   1001px - 1199px
========================================================= */

@media (min-width: 1001px) and (max-width: 1199px) {

    .why-pu {
        padding: 70px 25px 80px;
    }

    .why-pu-heading {
        margin-bottom: 50px;
    }

    .why-pu-heading h2 {
        font-size: 34px;
    }

    .why-pu-wrap {
        max-width: 1080px;

        grid-template-columns:
            minmax(300px, .85fr)
            minmax(0, 1.15fr);

        gap: 45px;
    }

    .why-pu-image {
        min-height: 420px;
    }

    .why-pu-image-circle {
        width: 320px;
        height: 320px;
    }

    .why-pu-image img {
        max-height: 430px;
    }

    .why-pu-content h2 {
        font-size: 30px;
    }

    .why-pu-content p {
        font-size: 13px;
        line-height: 1.75;
    }

    .why-pu-features {
        gap: 12px;
    }

    .pu-feature {
        min-height: 70px;
    }

    .pu-icon {
        flex-basis: 46px;

        width: 46px;
        height: 46px;

        border-radius: 13px;
    }

    .pu-feature-text strong {
        font-size: 12px;
    }

    .pu-feature-text span {
        font-size: 9.5px;
    }

}


/* =========================================================
   TABLET LANDSCAPE
   769px - 1000px
========================================================= */

@media (min-width: 769px) and (max-width: 1000px) {

    .why-pu {
        padding: 60px 25px 70px;
    }

    .why-pu-heading {
        margin-bottom: 42px;
    }

    .why-pu-heading h2 {
        font-size: 31px;
    }

    .why-pu-wrap {
        max-width: 900px;

        grid-template-columns:
            minmax(260px, .78fr)
            minmax(0, 1.22fr);

        gap: 30px;
    }

    .why-pu-image {
        min-height: 360px;
    }

    .why-pu-image-circle {
        width: 270px;
        height: 270px;
    }

    .why-pu-image img {
        max-height: 370px;
        max-width: 95%;
    }

    .why-pu-label {
        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .why-pu-content h2 {
        font-size: 26px;

        line-height: 1.28;
    }

    .why-pu-content p {
        font-size: 12px;

        line-height: 1.7;
    }

    .why-pu-features {
        margin-top: 22px;

        gap: 10px;
    }

    .pu-feature {
        min-height: 62px;

        gap: 8px;

        padding: 7px;
    }

    .pu-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .pu-icon i {
        font-size: 14px !important;
    }

    .pu-icon img {
        width: 20px !important;
        height: 20px !important;
    }

    .pu-feature-text strong {
        font-size: 10.5px;
    }

    .pu-feature-text span {
        font-size: 8.5px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   600px - 768px
========================================================= */

@media (min-width: 600px) and (max-width: 768px) {

    .why-pu {
        padding: 55px 25px 65px;
    }

    .why-pu-heading {
        margin-bottom: 38px;
    }

    .why-pu-small-title {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .why-pu-heading h2 {
        font-size: 30px;
    }

    .why-pu-wrap {
        max-width: 680px;

        display: flex;

        flex-direction: column;

        gap: 38px;

        text-align: center;
    }

    .why-pu-image {
        width: 100%;

        min-height: 330px;
    }

    .why-pu-image-circle {
        width: 290px;
        height: 290px;
    }

    .why-pu-image img {
        max-height: 340px;
        max-width: 75%;
    }

    .why-pu-content {
        width: 100%;
    }

    .why-pu-label {
        font-size: 10px;
    }

    .why-pu-label::before {
        display: none;
    }

    .why-pu-content h2 {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        font-size: 28px;
    }

    .why-pu-content p {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        font-size: 13px;

        line-height: 1.75;
    }

    .why-pu-features {
        grid-template-columns: repeat(2, 1fr);

        text-align: left;

        gap: 13px;
    }

}


/* =========================================================
   MOBILE
   481px - 599px
========================================================= */

@media (min-width: 481px) and (max-width: 599px) {

    .why-pu {
        padding: 50px 18px 60px;
    }

    .why-pu-heading {
        margin-bottom: 30px;
    }

    .why-pu-small-title {
        font-size: 9px;

        letter-spacing: 2.5px;
    }

    .why-pu-heading h2 {
        font-size: 28px;
    }

    .why-pu-wrap {
        display: flex;

        flex-direction: column;

        gap: 30px;

        text-align: center;
    }

    .why-pu-image {
        min-height: 280px;
    }

    .why-pu-image-circle {
        width: 235px;
        height: 235px;
    }

    .why-pu-image img {
        max-height: 285px;
        max-width: 75%;
    }

    .why-pu-label {
        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .why-pu-label::before {
        display: none;
    }

    .why-pu-content h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .why-pu-content p {
        font-size: 12.5px;
        line-height: 1.7;
    }

    .why-pu-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 11px;

        text-align: left;
    }

    .pu-feature {
        min-height: 67px;

        gap: 8px;

        padding: 8px;

        border-radius: 13px;
    }

    .pu-icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .pu-icon i {
        font-size: 14px !important;
    }

    .pu-icon img {
        width: 20px !important;
        height: 20px !important;
    }

    .pu-feature-text strong {
        font-size: 11px;
    }

    .pu-feature-text span {
        display: none;
    }

}


/* =========================================================
   PHONE
   320px - 480px
========================================================= */

@media (max-width: 480px) {

    .why-pu {
        padding: 45px 14px 55px;
    }


    /* HEADING */

    .why-pu-heading {
        margin-bottom: 30px;
    }

    .why-pu-small-title {
        font-size: 8px;

        letter-spacing: 2px;

        margin-bottom: 7px;
    }

    .why-pu-heading h2 {
        font-size: 25px;

        letter-spacing: -0.3px;

        padding-bottom: 14px;
    }

    .why-pu-heading-line {
        width: 48px;

        height: 3px;

        margin-top: 10px;
    }


    /* WRAPPER */

    .why-pu-wrap {
        width: 100%;

        max-width: 440px;

        display: flex;

        flex-direction: column;

        gap: 27px;

        text-align: center;
    }


    /* IMAGE */

    .why-pu-image {
        width: 100%;

        min-height: 235px;

        order: 1;
    }

    .why-pu-image-circle {
        width: 200px;
        height: 200px;
    }

    .why-pu-image-circle::before {
        inset: -10px;
    }

    .why-pu-image-circle::after {
        inset: 17px;
    }

    .why-pu-image img {
        max-width: 75%;

        max-height: 245px;
    }


    /* CONTENT */

    .why-pu-content {
        order: 2;

        width: 100%;
    }

    .why-pu-label {
        font-size: 8px;

        letter-spacing: 1.4px;

        margin-bottom: 9px;
    }

    .why-pu-label::before {
        display: none;
    }

    .why-pu-content h2 {
        margin-bottom: 15px;

        font-size: 22px;

        line-height: 1.3;
    }

    .why-pu-content p {
        margin-bottom: 12px;

        font-size: 12px;

        line-height: 1.7;

        text-align: center;
    }


    /* FEATURES */

    .why-pu-features {
        width: 100%;

        margin-top: 22px;

        grid-template-columns: 1fr;

        gap: 10px;

        text-align: left;
    }


    /* CARD */

    .pu-feature {
        width: 100%;

        min-height: 62px;

        padding: 7px 10px 7px 8px;

        gap: 11px;

        border-radius: 13px;
    }


    /* ICON */

    .pu-icon {
        flex: 0 0 43px;

        width: 43px;
        height: 43px;

        border-radius: 12px;
    }

    .pu-icon i {
        font-size: 15px !important;
    }

    .pu-icon img {
        width: 21px !important;
        height: 21px !important;
    }


    /* TEXT */

    .pu-feature-text {
        gap: 2px;
    }

    .pu-feature-text strong {
        font-size: 12px;

        line-height: 1.3;
    }

    .pu-feature-text span {
        font-size: 9px;
    }

}


/* =========================================================
   VERY SMALL PHONE
   320px - 360px
========================================================= */

@media (max-width: 360px) {

    .why-pu {
        padding: 38px 11px 48px;
    }

    .why-pu-heading {
        margin-bottom: 25px;
    }

    .why-pu-small-title {
        font-size: 7.5px;

        letter-spacing: 1.5px;
    }

    .why-pu-heading h2 {
        font-size: 22px;
    }

    .why-pu-wrap {
        gap: 22px;
    }

    .why-pu-image {
        min-height: 205px;
    }

    .why-pu-image-circle {
        width: 175px;
        height: 175px;
    }

    .why-pu-image img {
        max-height: 215px;
    }

    .why-pu-content h2 {
        font-size: 20px;
    }

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

        line-height: 1.65;
    }

    .why-pu-features {
        margin-top: 18px;

        gap: 8px;
    }

    .pu-feature {
        min-height: 56px;

        padding: 6px 8px;
    }

    .pu-icon {
        flex-basis: 39px;

        width: 39px;
        height: 39px;
    }

    .pu-icon i {
        font-size: 13px !important;
    }

    .pu-icon img {
        width: 19px !important;
        height: 19px !important;
    }

    .pu-feature-text strong {
        font-size: 11px;
    }

    .pu-feature-text span {
        font-size: 8px;
    }

}


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

.why-pu img {
    max-width: 100%;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.why-pu button:focus,
.why-pu a:focus {
    outline: 2px solid #EB7E00;

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .why-pu *,
    .why-pu *::before,
    .why-pu *::after {
        transition: none !important;
        animation: none !important;
    }

}

/* team start */


/* SECTION */
/* =========================================================
   RC TAX CONSULTANCY
   TEAM SECTION
   FULL RESPONSIVE CSS
========================================================= */


/* =========================================================
   FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');


/* =========================================================
   ROOT
========================================================= */

:root {

  --utx-black: #000000;

  --utx-orange: #EB7E00;

  --utx-orange-light: #ff9d2e;

  --utx-white: #ffffff;

  --utx-gold: #ffd700;

  --utx-gray: rgba(255, 255, 255, 0.72);

  --utx-border:
    rgba(255, 255, 255, 0.16);

}


/* =========================================================
   SECTION
========================================================= */

.utx-wrapper {

  position: relative;

  width: calc(100% - 40px);

  max-width: 1250px;

  margin: 70px auto;

  padding:
    clamp(45px, 6vw, 75px)
    clamp(22px, 5vw, 65px);

  color: var(--utx-white);

  background:
    linear-gradient(
      115deg,
      #000000 0%,
      #080808 28%,
      #EB7E00 55%,
      #050505 100%
    );

  border-radius: 26px;

  overflow: hidden;

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.22);

  font-family:
    "Poppins",
    sans-serif;

  isolation: isolate;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.utx-wrapper::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  right: -170px;

  top: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.13),
      transparent 68%
    );

  pointer-events: none;

  z-index: -1;
}


.utx-wrapper::after {

  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  left: -160px;

  bottom: -180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(235,126,0,0.30),
      transparent 70%
    );

  pointer-events: none;

  z-index: -1;
}


/* =========================================================
   MAIN FLEX
========================================================= */

.utx-flex {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: clamp(35px, 5vw, 80px);
}


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

.utx-content {

  width: 50%;

  min-width: 0;

  position: relative;

  z-index: 2;
}


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

.utx-eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: var(--utx-gold);

  font-family:
    "Roboto",
    sans-serif;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.utx-eyebrow span {

  display: inline-block;

  width: 28px;

  height: 2px;

  background:
    var(--utx-gold);

  border-radius: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.utx-heading {

  margin: 0 0 24px;

  max-width: 650px;

  color: var(--utx-white);

  font-family:
    "Roboto",
    sans-serif;

  font-size:
    clamp(25px, 3.3vw, 40px);

  font-weight: 600;

  line-height: 1.15;

  letter-spacing: -0.5px;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.utx-highlight {

  position: relative;

  display: inline-block;

  color: var(--utx-gold);

  font-weight: 700;
}


.utx-highlight::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  width: 100%;

  height: 3px;

  background:
    var(--utx-gold);

  border-radius: 5px;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.utx-para {

  max-width: 650px;

  margin: 0 0 17px;

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

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    clamp(13px, 1.25vw, 15px);

  font-weight: 400;

  line-height: 1.85;
}


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

.utx-btns {

  display: flex;

  align-items: center;

  gap: 13px;

  flex-wrap: wrap;

  margin-top: 30px;
}


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

.utx-btn-main,
.utx-btn-alt {

  min-height: 48px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  border-radius: 50px;

  text-decoration: none;

  font-family:
    "Poppins",
    sans-serif;

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

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


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

.utx-btn-main {

  color:
    #000000;

  background:
    var(--utx-gold);

  border:
    1px solid
    var(--utx-gold);

  box-shadow:
    0 8px 20px
    rgba(0,0,0,0.15);
}


.utx-btn-main:hover {

  color:
    #000000;

  background:
    #ffffff;

  border-color:
    #ffffff;

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 25px
    rgba(0,0,0,0.22);
}


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

.utx-btn-alt {

  color:
    var(--utx-white);

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

  border:
    1px solid
    rgba(255,255,255,0.40);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.utx-btn-alt:hover {

  color:
    #000000;

  background:
    #ffffff;

  border-color:
    #ffffff;

  transform:
    translateY(-3px);
}


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

.utx-btn-arrow {

  font-size: 17px;

  line-height: 1;

  transition:
    transform .3s ease;
}


.utx-btn-main:hover .utx-btn-arrow,
.utx-btn-alt:hover .utx-btn-arrow {

  transform:
    translateX(4px);
}


/* =========================================================
   SLIDER BOX
========================================================= */

.utx-slider-box {

  position: relative;

  width: 46%;

  min-width: 0;

  padding: 15px;

  border-radius: 24px;

  background:
    rgba(0,0,0,0.20);

  border:
    1px solid
    rgba(255,255,255,0.16);

  box-shadow:
    inset 0 0 35px
    rgba(0,0,0,0.16),

    0 15px 35px
    rgba(0,0,0,0.16);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* =========================================================
   GLOW
========================================================= */

.utx-slider-glow {

  position: absolute;

  width: 170px;

  height: 170px;

  top: -70px;

  right: -50px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,215,0,0.28),
      transparent 70%
    );

  pointer-events: none;
}


/* =========================================================
   SLIDER LABEL
========================================================= */

.utx-slider-label {

  position: absolute;

  top: 28px;

  left: 28px;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    7px 11px;

  border-radius: 30px;

  color:
    #ffffff;

  background:
    rgba(0,0,0,0.65);

  border:
    1px solid
    rgba(255,255,255,0.18);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-family:
    "Roboto",
    sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


/* =========================================================
   LIVE DOT
========================================================= */

.utx-live-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--utx-gold);

  box-shadow:
    0 0 8px
    var(--utx-gold);

  animation:
    utxPulse 1.8s infinite;
}


@keyframes utxPulse {

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

  50% {
    opacity: .45;
    transform: scale(.75);
  }

}


/* =========================================================
   SLIDER VIEWPORT
========================================================= */

.utx-slider-viewport {

  width: 100%;

  overflow: hidden;

  border-radius: 18px;

  position: relative;

  background:
    #050505;
}


/* =========================================================
   TRACK
========================================================= */

.utx-track {

  width: 100%;

  display: flex;

  transition:
    transform .7s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  will-change:
    transform;
}


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

.utx-item {

  flex:
    0 0 100%;

  width: 100%;

  min-width: 100%;

  position: relative;
}


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

.utx-main-img {

  position: relative;

  width: 100%;

  height:
    clamp(350px, 38vw, 510px);

  overflow: hidden;

  background:
    #111111;
}


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

.utx-main-img img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform .8s ease;
}


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

.utx-slider-box:hover
.utx-main-img img {

  transform:
    scale(1.025);
}


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

.utx-main-img::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.10) 0%,
      transparent 45%,
      rgba(0,0,0,0.28) 100%
    );

  pointer-events: none;
}


/* =========================================================
   SLIDER CONTROLS
========================================================= */

.utx-slider-controls {

  position: absolute;

  left: 28px;

  bottom: 25px;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 10px;
}


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

.utx-control {

  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.30);

  background:
    rgba(0,0,0,0.68);

  color:
    #ffffff;

  font-family:
    Arial,
    sans-serif;

  font-size: 17px;

  cursor: pointer;

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

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


.utx-control:hover {

  background:
    var(--utx-gold);

  color:
    #000000;

  transform:
    translateY(-2px);
}


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

.utx-dots {

  display: flex;

  align-items: center;

  gap: 5px;

  padding:
    0 4px;
}


.utx-dots button {

  width: 6px;

  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 50%;

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

  cursor: pointer;

  transition:
    width .3s ease,
    background .3s ease;
}


.utx-dots button.active {

  width: 20px;

  border-radius: 10px;

  background:
    var(--utx-gold);
}


/* =========================================================
   COUNTER
========================================================= */

.utx-counter {

  position: absolute;

  right: 28px;

  bottom: 30px;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 8px;

  color:
    #ffffff;

  font-family:
    "Roboto",
    sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 1px;
}


.utx-counter-line {

  width: 25px;

  height: 1px;

  background:
    rgba(255,255,255,0.6);
}


#utxCurrent {

  color:
    var(--utx-gold);

  font-size: 15px;

  font-weight: 700;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .utx-wrapper {

    width:
      calc(100% - 60px);
  }

  .utx-flex {

    gap: 70px;
  }

  .utx-main-img {

    height: 420px;
  }

}


/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media (min-width: 993px) and (max-width: 1199px) {

  .utx-wrapper {

    width:
      calc(100% - 40px);

    padding:
      55px 40px;
  }

  .utx-flex {

    gap: 40px;
  }

  .utx-heading {

    font-size:
      clamp(30px, 4vw, 40px);
  }

  .utx-main-img {

    height:
      430px;
  }

  .utx-para {

    font-size: 13px;

    line-height: 1.75;
  }

}


/* =========================================================
   TABLET
   769px - 992px
========================================================= */

@media (min-width: 769px) and (max-width: 992px) {

  .utx-wrapper {

    width:
      calc(100% - 30px);

    margin:
      50px auto;

    padding:
      45px 30px;

    border-radius:
      22px;
  }


  .utx-flex {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .85fr);

    align-items:
      center;

    gap:
      30px;
  }


  .utx-content {

    width: 100%;
  }


  .utx-slider-box {

    width: 100%;

    padding: 11px;

    border-radius: 20px;
  }


  .utx-heading {

    font-size:
      clamp(28px, 4.2vw, 36px);

    margin-bottom:
      20px;
  }


  .utx-highlight::after {

    height: 2px;

    bottom: -5px;
  }


  .utx-para {

    font-size: 13px;

    line-height: 1.7;
  }


  .utx-btns {

    margin-top: 24px;

    gap: 10px;
  }


  .utx-btn-main,
  .utx-btn-alt {

    min-height: 44px;

    padding:
      0 16px;

    font-size: 12px;
  }


  .utx-main-img {

    height:
      390px;
  }


  .utx-slider-label {

    top: 22px;

    left: 22px;
  }


  .utx-slider-controls {

    left: 22px;

    bottom: 20px;
  }


  .utx-counter {

    right: 22px;

    bottom: 25px;
  }

}


/* =========================================================
   MOBILE
   481px - 768px
========================================================= */

@media (min-width: 481px) and (max-width: 768px) {

  .utx-wrapper {

    width:
      calc(100% - 24px);

    margin:
      35px auto;

    padding:
      40px 24px;

    border-radius:
      20px;
  }


  .utx-flex {

    display: flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      35px;
  }


  .utx-content {

    width: 100%;

    text-align:
      center;
  }


  .utx-eyebrow {

    justify-content:
      center;

    font-size:
      10px;

    letter-spacing:
      1.5px;
  }


  .utx-eyebrow span {

    width:
      20px;
  }


  .utx-heading {

    max-width:
      650px;

    margin:
      0 auto 20px;

    font-size:
      clamp(27px, 6vw, 34px);

    line-height:
      1.2;
  }


  .utx-para {

    max-width:
      650px;

    margin:
      0 auto 14px;

    font-size:
      13px;

    line-height:
      1.75;
  }


  .utx-btns {

    justify-content:
      center;

    margin-top:
      25px;
  }


  .utx-slider-box {

    width:
      100%;

    padding:
      10px;

    border-radius:
      18px;
  }


  .utx-main-img {

    height:
      460px;
  }


  .utx-slider-label {

    top:
      20px;

    left:
      20px;
  }


  .utx-slider-controls {

    left:
      20px;

    bottom:
      20px;
  }


  .utx-counter {

    right:
      20px;

    bottom:
      25px;
  }

}


/* =========================================================
   SMALL PHONE
   0px - 480px
========================================================= */

@media (max-width: 480px) {

  .utx-wrapper {

    width:
      calc(100% - 20px);

    margin:
      25px auto;

    padding:
      34px 16px;

    border-radius:
      18px;
  }


  .utx-flex {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      30px;
  }


  .utx-content {

    width:
      100%;

    text-align:
      center;
  }


  .utx-eyebrow {

    justify-content:
      center;

    gap:
      7px;

    margin-bottom:
      15px;

    font-size:
      8px;

    letter-spacing:
      1.2px;
  }


  .utx-eyebrow span {

    width:
      17px;

    height:
      2px;
  }


  .utx-heading {

    margin:
      0 auto 18px;

    font-size:
      clamp(25px, 8vw, 31px);

    line-height:
      1.18;

    letter-spacing:
      -0.3px;
  }


  .utx-highlight::after {

    bottom:
      -4px;

    height:
      2px;
  }


  .utx-para {

    margin:
      0 auto 13px;

    font-size:
      12.5px;

    line-height:
      1.72;

    color:
      rgba(255,255,255,0.76);
  }


  .utx-btns {

    width:
      100%;

    margin-top:
      23px;

    flex-direction:
      column;

    gap:
      10px;
  }


  .utx-btn-main,
  .utx-btn-alt {

    width:
      100%;

    min-height:
      46px;

    padding:
      0 18px;

    font-size:
      12px;
  }


  .utx-slider-box {

    width:
      100%;

    padding:
      8px;

    border-radius:
      16px;
  }


  .utx-slider-viewport {

    border-radius:
      12px;
  }


  .utx-main-img {

    height:
      min(115vw, 430px);
  }


  .utx-slider-label {

    top:
      15px;

    left:
      15px;

    padding:
      6px 9px;

    font-size:
      8px;
  }


  .utx-live-dot {

    width:
      6px;

    height:
      6px;
  }


  .utx-slider-controls {

    left:
      15px;

    bottom:
      15px;

    gap:
      7px;
  }


  .utx-control {

    width:
      33px;

    height:
      33px;

    font-size:
      14px;
  }


  .utx-dots {

    gap:
      4px;
  }


  .utx-dots button {

    width:
      5px;

    height:
      5px;
  }


  .utx-dots button.active {

    width:
      16px;
  }


  .utx-counter {

    right:
      15px;

    bottom:
      19px;

    font-size:
      9px;
  }


  #utxCurrent {

    font-size:
      12px;
  }


  .utx-counter-line {

    width:
      18px;
  }

}


/* =========================================================
   VERY SMALL PHONE
   360px AND BELOW
========================================================= */

@media (max-width: 360px) {

  .utx-wrapper {

    width:
      calc(100% - 12px);

    padding:
      30px 13px;

    border-radius:
      16px;
  }


  .utx-heading {

    font-size:
      24px;
  }


  .utx-para {

    font-size:
      12px;
  }


  .utx-main-img {

    height:
      360px;
  }


  .utx-slider-label {

    top:
      12px;

    left:
      12px;
  }


  .utx-slider-controls {

    left:
      12px;

    bottom:
      12px;
  }


  .utx-counter {

    right:
      12px;

    bottom:
      16px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.utx-btn-main:focus-visible,
.utx-btn-alt:focus-visible,
.utx-control:focus-visible,
.utx-dots button:focus-visible {

  outline:
    2px solid
    #ffffff;

  outline-offset:
    3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .utx-track {

    transition:
      none;
  }


  .utx-main-img img {

    transition:
      none;
  }


  .utx-live-dot {

    animation:
      none;
  }


  .utx-btn-main,
  .utx-btn-alt,
  .utx-control {

    transition:
      none;
  }

}



/* contact us start */

 /* =====================================================
     ULTRA PREMIUM CONTACT SECTION
  ===================================================== */
  
  .ultraContactZ{
    --orange:#EB7E00;
    --orangeDark:#c96300;
    --orangeLight:#fff3e6;
  
    --dark:#101828;
    --text:#344054;
    --muted:#667085;
  
    --border:#e8eaee;
  
    position:relative;
    width:100%;
    overflow:hidden;
  
    padding:100px 24px;
  
    background:
      radial-gradient(
        circle at 10% 20%,
        rgba(235,126,0,.07),
        transparent 28%
      ),
      radial-gradient(
        circle at 90% 80%,
        rgba(235,126,0,.06),
        transparent 30%
      ),
      #ffffff;
  
    font-family:Arial, Helvetica, sans-serif;
  
    box-sizing:border-box;
  }
  
  
  /* =====================================================
     BACKGROUND DECORATIONS
  ===================================================== */
  
  .contactGlowZ{
    position:absolute;
  
    width:420px;
    height:420px;
  
    border-radius:50%;
  
    filter:blur(90px);
  
    pointer-events:none;
  
    opacity:.35;
  }
  
  .contactGlowOneZ{
    top:-220px;
    left:-180px;
  
    background:rgba(235,126,0,.14);
  }
  
  .contactGlowTwoZ{
    bottom:-250px;
    right:-180px;
  
    background:rgba(235,126,0,.10);
  }
  
  
  .contactGridBgZ{
    position:absolute;
    inset:0;
  
    pointer-events:none;
  
    opacity:.35;
  
    background-image:
      linear-gradient(
        rgba(16,24,40,.025) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(16,24,40,.025) 1px,
        transparent 1px
      );
  
    background-size:50px 50px;
  
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 85%,
        transparent
      );
  }
  
  
  /* =====================================================
     CONTAINER
  ===================================================== */
  
  .contactContainerZ{
    position:relative;
  
    max-width:1380px;
  
    margin:0 auto;
  }
  
  
  /* =====================================================
     HEADING
  ===================================================== */
  
  .contactHeadingZ{
    max-width:760px;
  
    margin:0 auto 70px;
  
    text-align:center;
  }
  
  
  .contactEyebrowZ{
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    gap:12px;
  
    margin-bottom:18px;
  
    color:var(--orange);
  
    font-size:12px;
  
    font-weight:700;
  
    letter-spacing:2.5px;
  }
  
  
  .eyebrowLineZ{
    width:35px;
    height:1px;
  
    background:var(--orange);
  
    opacity:.7;
  }
  
  
  .contactHeadingZ h2{
    margin:0;
  
    color:var(--dark);
  
    font-size:clamp(38px,5vw,64px);
  
    line-height:1.05;
  
    font-weight:700;
  
    letter-spacing:-2px;
  }
  
  
  .contactHeadingZ h2 span{
    color:var(--orange);
  }
  
  
  .contactHeadingZ p{
    max-width:620px;
  
    margin:22px auto 0;
  
    color:var(--muted);
  
    font-size:16px;
  
    line-height:1.8;
  }
  
  
  /* =====================================================
     MAIN GRID
  ===================================================== */
  
  .contactMainGridZ{
    display:grid;
  
    grid-template-columns:
      minmax(0,1fr)
      minmax(480px,580px);
  
    gap:80px;
  
    align-items:start;
  }
  
  
  /* =====================================================
     LEFT CONTENT
  ===================================================== */
  
  .contactInfoZ{
    padding-top:8px;
  }
  
  
  .smallLabelZ{
    display:inline-block;
  
    margin-bottom:15px;
  
    color:var(--orange);
  
    font-size:12px;
  
    font-weight:700;
  
    letter-spacing:2px;
  }
  
  
  .contactIntroZ h3{
    max-width:650px;
  
    margin:0;
  
    color:var(--dark);
  
    font-size:clamp(30px,3vw,46px);
  
    line-height:1.15;
  
    letter-spacing:-1.4px;
  }
  
  
  .contactIntroZ h3 span{
    display:block;
  
    color:var(--orange);
  }
  
  
  .contactIntroZ p{
    max-width:620px;
  
    margin:22px 0 35px;
  
    color:var(--muted);
  
    font-size:15px;
  
    line-height:1.8;
  }
  
  
  /* =====================================================
     CONTACT CARDS
  ===================================================== */
  
  .contactCardsZ{
    display:grid;
  
    grid-template-columns:1fr 1fr;
  
    gap:16px;
  }
  
  
  .contactCardZ{
    position:relative;
  
    display:flex;
  
    align-items:flex-start;
  
    gap:16px;
  
    min-width:0;
  
    padding:22px;
  
    border:1px solid rgba(16,24,40,.07);
  
    border-radius:18px;
  
    background:rgba(255,255,255,.88);
  
    box-shadow:
      0 8px 30px rgba(16,24,40,.045);
  
    overflow:hidden;
  
    cursor:default;
  
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease;
  }
  
  
  .contactCardZ::before{
    content:"";
  
    position:absolute;
  
    top:0;
    left:0;
  
    width:100%;
    height:3px;
  
    background:linear-gradient(
      90deg,
      var(--orange),
      #ffb15c
    );
  
    transform:scaleX(0);
  
    transform-origin:left;
  
    transition:transform .35s ease;
  }
  
  
  .contactCardZ::after{
    content:"";
  
    position:absolute;
  
    width:120px;
    height:120px;
  
    right:-70px;
    bottom:-70px;
  
    border-radius:50%;
  
    background:rgba(235,126,0,.07);
  
    transition:.4s ease;
  }
  
  
  .contactCardZ:hover{
    transform:translateY(-6px);
  
    border-color:rgba(235,126,0,.22);
  
    box-shadow:
      0 18px 45px rgba(16,24,40,.09);
  }
  
  
  .contactCardZ:hover::before{
    transform:scaleX(1);
  }
  
  
  .contactCardZ:hover::after{
    transform:scale(1.35);
  }
  
  
  .contactIconBoxZ{
    flex:0 0 48px;
  
    width:48px;
    height:48px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    border-radius:14px;
  
    background:var(--orangeLight);
  
    color:var(--orange);
  
    font-size:23px;
  
    transition:.35s ease;
  }
  
  
  .contactCardZ:hover .contactIconBoxZ{
    background:var(--orange);
  
    color:#fff;
  
    transform:rotate(-4deg) scale(1.05);
  }
  
  
  .contactCardContentZ{
    min-width:0;
  
    position:relative;
    z-index:2;
  }
  
  
  .contactCardLabelZ{
    display:block;
  
    margin-bottom:6px;
  
    color:#98a2b3;
  
    font-size:10px;
  
    font-weight:700;
  
    letter-spacing:1.4px;
  }
  
  
  .contactCardContentZ h4{
    margin:0 0 5px;
  
    color:var(--dark);
  
    font-size:15px;
  
    line-height:1.4;
  
    word-break:break-word;
  }
  
  
  .contactCardContentZ p{
    margin:0;
  
    color:#98a2b3;
  
    font-size:12px;
  
    line-height:1.5;
  }
  
  
  .cardArrowZ{
    position:absolute;
  
    top:20px;
    right:20px;
  
    color:#cbd0d8;
  
    font-size:17px;
  
    transition:.3s ease;
  }
  
  
  .contactCardZ:hover .cardArrowZ{
    color:var(--orange);
  
    transform:translate(2px,-2px);
  }
  
  
  /* =====================================================
     TRUST STRIP
  ===================================================== */
  
  .contactTrustZ{
    display:flex;
  
    align-items:center;
  
    gap:13px;
  
    margin-top:22px;
  
    padding:15px 18px;
  
    border-radius:15px;
  
    background:#fffaf5;
  
    border:1px solid rgba(235,126,0,.12);
  }
  
  
  .trustCheckZ{
    width:30px;
    height:30px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    flex:0 0 30px;
  
    border-radius:50%;
  
    background:var(--orange);
  
    color:#fff;
  
    font-size:14px;
  
    font-weight:bold;
  }
  
  
  .contactTrustZ strong{
    display:block;
  
    margin-bottom:3px;
  
    color:var(--dark);
  
    font-size:13px;
  }
  
  
  .contactTrustZ span{
    color:#98a2b3;
  
    font-size:11px;
  }
  
  
  /* =====================================================
     FORM OUTER
  ===================================================== */
  
  .contactFormOuterZ{
    position:relative;
  
    padding:34px;
  
    border:1px solid rgba(16,24,40,.08);
  
    border-radius:26px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.98),
        rgba(250,250,250,.94)
      );
  
    box-shadow:
      0 30px 80px rgba(16,24,40,.10),
      0 8px 25px rgba(16,24,40,.04);
  
    overflow:hidden;
  }
  
  
  .contactFormOuterZ::before{
    content:"";
  
    position:absolute;
  
    width:220px;
    height:220px;
  
    right:-120px;
    top:-120px;
  
    border-radius:50%;
  
    background:rgba(235,126,0,.06);
  
    pointer-events:none;
  }
  
  
  .contactFormOuterZ::after{
    content:"";
  
    position:absolute;
  
    left:0;
    top:0;
  
    width:4px;
    height:100%;
  
    background:linear-gradient(
      to bottom,
      var(--orange),
      #ffbd78
    );
  
    border-radius:4px 0 0 4px;
  }
  
  
  /* =====================================================
     FORM HEADER
  ===================================================== */
  
  .contactFormTopZ{
    position:relative;
    z-index:2;
  
    display:flex;
  
    align-items:flex-start;
    justify-content:space-between;
  
    gap:20px;
  }
  
  
  .formLabelZ{
    display:block;
  
    margin-bottom:8px;
  
    color:var(--orange);
  
    font-size:10px;
  
    font-weight:700;
  
    letter-spacing:1.8px;
  }
  
  
  .contactFormTopZ h3{
    margin:0;
  
    color:var(--dark);
  
    font-size:29px;
  
    line-height:1.2;
  
    letter-spacing:-.7px;
  }
  
  
  .formStatusZ{
    display:flex;
  
    align-items:center;
  
    gap:7px;
  
    padding:7px 10px;
  
    border-radius:30px;
  
    background:#f2fdf7;
  
    color:#157347;
  
    font-size:10px;
  
    font-weight:700;
  
    white-space:nowrap;
  }
  
  
  .formStatusZ span{
    width:7px;
    height:7px;
  
    border-radius:50%;
  
    background:#18a957;
  
    box-shadow:0 0 0 4px rgba(24,169,87,.1);
  
    animation:pulseOnlineZ 2s infinite;
  }
  
  
  @keyframes pulseOnlineZ{
  
    0%,100%{
      box-shadow:0 0 0 3px rgba(24,169,87,.10);
    }
  
    50%{
      box-shadow:0 0 0 7px rgba(24,169,87,.02);
    }
  
  }
  
  
  .formDescriptionZ{
    position:relative;
    z-index:2;
  
    margin:12px 0 27px;
  
    color:var(--muted);
  
    font-size:13px;
  
    line-height:1.7;
  }
  
  
  /* =====================================================
     FORM ROW
  ===================================================== */
  
  .formRowZ{
    display:grid;
  
    grid-template-columns:1fr 1fr;
  
    gap:14px;
  }
  
  
  /* =====================================================
     FIELDS
  ===================================================== */
  
  .fieldZ{
    margin-bottom:17px;
  }
  
  
  .fieldZ label{
    display:block;
  
    margin-bottom:8px;
  
    color:#344054;
  
    font-size:12px;
  
    font-weight:700;
  }
  
  
  .inputWrapZ{
    position:relative;
  
    display:flex;
  
    align-items:center;
  }
  
  
  .inputIconZ{
    position:absolute;
  
    left:15px;
  
    color:#98a2b3;
  
    font-size:16px;
  
    pointer-events:none;
  
    transition:.3s ease;
  
    z-index:2;
  }
  
  
  .inputWrapZ input,
  .inputWrapZ textarea{
  
    width:100%;
  
    box-sizing:border-box;
  
    border:1px solid #e4e7ec;
  
    outline:none;
  
    border-radius:12px;
  
    background:#fff;
  
    color:var(--dark);
  
    font-family:Arial, Helvetica, sans-serif;
  
    font-size:13px;
  
    transition:
      border-color .3s ease,
      box-shadow .3s ease,
      background .3s ease;
  }
  
  
  .inputWrapZ input{
    height:50px;
  
    padding:0 15px 0 43px;
  }
  
  
  .inputWrapZ textarea{
    min-height:125px;
  
    padding:14px 15px 14px 43px;
  
    resize:vertical;
  
    line-height:1.6;
  }
  
  
  .inputWrapZ input::placeholder,
  .inputWrapZ textarea::placeholder{
    color:#b4bac4;
  }
  
  
  .inputWrapZ input:focus,
  .inputWrapZ textarea:focus{
    border-color:var(--orange);
  
    background:#fff;
  
    box-shadow:
      0 0 0 4px rgba(235,126,0,.09);
  }
  
  
  .inputWrapZ:focus-within .inputIconZ{
    color:var(--orange);
  
    transform:scale(1.08);
  }
  
  
  .textareaWrapZ{
    align-items:flex-start;
  }
  
  
  .textareaIconZ{
    top:16px;
  }
  
  
  .messageLabelRowZ{
    display:flex;
  
    align-items:center;
    justify-content:space-between;
  
    margin-bottom:8px;
  }
  
  
  .messageLabelRowZ label{
    margin:0;
  }
  
  
  #charCountZ{
    color:#98a2b3;
  
    font-size:10px;
  }
  
  
  /* =====================================================
     SUBMIT BUTTON
  ===================================================== */
  
  .contactSubmitZ{
    position:relative;
  
    width:100%;
  
    height:54px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    gap:15px;
  
    border:0;
  
    border-radius:13px;
  
    background:
      linear-gradient(
        135deg,
        var(--orange),
        var(--orangeDark)
      );
  
    color:#fff;
  
    font-family:Arial, Helvetica, sans-serif;
  
    font-size:14px;
  
    font-weight:700;
  
    cursor:pointer;
  
    overflow:hidden;
  
    box-shadow:
      0 12px 25px rgba(235,126,0,.22);
  
    transition:
      transform .3s ease,
      box-shadow .3s ease;
  }
  
  
  .contactSubmitZ::before{
    content:"";
  
    position:absolute;
  
    top:0;
    left:-120%;
  
    width:80%;
    height:100%;
  
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
      );
  
    transform:skewX(-20deg);
  
    transition:left .7s ease;
  }
  
  
  .contactSubmitZ:hover{
    transform:translateY(-3px);
  
    box-shadow:
      0 18px 35px rgba(235,126,0,.30);
  }
  
  
  .contactSubmitZ:hover::before{
    left:140%;
  }
  
  
  .submitTextZ,
  .submitArrowZ{
    position:relative;
    z-index:2;
  }
  
  
  .submitArrowZ{
    font-size:20px;
  
    transition:.3s ease;
  }
  
  
  .contactSubmitZ:hover .submitArrowZ{
    transform:translateX(5px);
  }
  
  
  .submitLoaderZ{
    display:none;
  
    width:17px;
    height:17px;
  
    border:2px solid rgba(255,255,255,.35);
  
    border-top-color:#fff;
  
    border-radius:50%;
  
    animation:spinContactZ .7s linear infinite;
  }
  
  
  @keyframes spinContactZ{
  
    to{
      transform:rotate(360deg);
    }
  
  }
  
  
  .contactSubmitZ.loading .submitTextZ,
  .contactSubmitZ.loading .submitArrowZ{
    display:none;
  }
  
  
  .contactSubmitZ.loading .submitLoaderZ{
    display:block;
  }
  
  
  /* =====================================================
     PRIVACY
  ===================================================== */
  
  .formPrivacyZ{
    display:flex;
  
    justify-content:center;
    align-items:center;
  
    gap:6px;
  
    margin-top:15px;
  
    color:#98a2b3;
  
    font-size:10px;
  
    text-align:center;
  }
  
  
  /* =====================================================
     SUCCESS
  ===================================================== */
  
  .formSuccessZ{
    display:none;
  
    align-items:center;
  
    gap:12px;
  
    margin-top:15px;
  
    padding:13px;
  
    border-radius:12px;
  
    background:#effbf4;
  
    border:1px solid #c9efd8;
  
    animation:successAppearZ .4s ease;
  }
  
  
  .formSuccessZ.show{
    display:flex;
  }
  
  
  .successIconZ{
    width:32px;
    height:32px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    flex:0 0 32px;
  
    border-radius:50%;
  
    background:#1a9c55;
  
    color:#fff;
  
    font-weight:bold;
  }
  
  
  .formSuccessZ strong{
    color:#147a41;
  
    font-size:12px;
  }
  
  
  .formSuccessZ p{
    margin:2px 0 0;
  
    color:#5b7d68;
  
    font-size:10px;
  }
  
  
  @keyframes successAppearZ{
  
    from{
      opacity:0;
      transform:translateY(5px);
    }
  
    to{
      opacity:1;
      transform:translateY(0);
    }
  
  }
  
  
  /* =====================================================
     TABLET
  ===================================================== */
  
  @media(max-width:1100px){
  
    .ultraContactZ{
      padding:85px 25px;
    }
  
  
    .contactMainGridZ{
      grid-template-columns:
        minmax(0,1fr)
        minmax(420px,500px);
  
      gap:45px;
    }
  
  
    .contactCardsZ{
      gap:13px;
    }
  
  
    .contactCardZ{
      padding:18px;
    }
  
  
    .contactCardContentZ h4{
      font-size:13px;
    }
  
  
    .contactCardContentZ p{
      font-size:11px;
    }
  
  
    .contactFormOuterZ{
      padding:28px;
    }
  
  }
  
  
  /* =====================================================
     TABLET PORTRAIT
  ===================================================== */
  
  @media(max-width:900px){
  
    .ultraContactZ{
      padding:75px 24px;
    }
  
  
    .contactHeadingZ{
      margin-bottom:55px;
    }
  
  
    .contactMainGridZ{
      grid-template-columns:1fr;
  
      gap:45px;
    }
  
  
    .contactInfoZ{
      max-width:760px;
  
      margin:0 auto;
  
      width:100%;
    }
  
  
    .contactFormOuterZ{
      width:100%;
  
      max-width:760px;
  
      margin:0 auto;
  
      box-sizing:border-box;
    }
  
  }
  
  
  /* =====================================================
     MOBILE
  ===================================================== */
  
  @media(max-width:600px){
  
    .ultraContactZ{
      padding:60px 16px;
    }
  
  
    .contactHeadingZ{
      margin-bottom:40px;
    }
  
  
    .contactEyebrowZ{
      font-size:9px;
  
      letter-spacing:2px;
  
      gap:8px;
    }
  
  
    .eyebrowLineZ{
      width:25px;
    }
  
  
    .contactHeadingZ h2{
      font-size:40px;
  
      letter-spacing:-1.5px;
    }
  
  
    .contactHeadingZ p{
      margin-top:17px;
  
      font-size:13px;
  
      line-height:1.7;
    }
  
  
    .contactIntroZ h3{
      font-size:30px;
  
      letter-spacing:-.8px;
    }
  
  
    .contactIntroZ p{
      font-size:13px;
  
      margin:17px 0 28px;
    }
  
  
    .contactCardsZ{
      grid-template-columns:1fr;
  
      gap:12px;
    }
  
  
    .contactCardZ{
      padding:17px;
  
      border-radius:15px;
    }
  
  
    .contactIconBoxZ{
      width:43px;
      height:43px;
  
      flex-basis:43px;
  
      border-radius:12px;
  
      font-size:20px;
    }
  
  
    .contactCardContentZ h4{
      font-size:13px;
  
      padding-right:15px;
    }
  
  
    .contactCardContentZ p{
      font-size:10px;
    }
  
  
    .contactTrustZ{
      padding:13px;
  
      margin-top:15px;
    }
  
  
    .contactTrustZ span{
      display:block;
  
      line-height:1.5;
    }
  
  
    .contactFormOuterZ{
      padding:22px 18px;
  
      border-radius:20px;
    }
  
  
    .contactFormTopZ{
      display:block;
    }
  
  
    .contactFormTopZ h3{
      font-size:24px;
    }
  
  
    .formStatusZ{
      display:inline-flex;
  
      margin-top:12px;
    }
  
  
    .formDescriptionZ{
      font-size:12px;
  
      margin:11px 0 23px;
    }
  
  
    .formRowZ{
      grid-template-columns:1fr;
  
      gap:0;
    }
  
  
    .fieldZ{
      margin-bottom:14px;
    }
  
  
    .inputWrapZ input{
      height:48px;
    }
  
  
    .inputWrapZ textarea{
      min-height:115px;
    }
  
  
    .contactSubmitZ{
      height:51px;
    }
  
  
    .formPrivacyZ{
      line-height:1.5;
    }
  
  }
  
  
  /* =====================================================
     SMALL MOBILE
  ===================================================== */
  
  @media(max-width:380px){
  
    .ultraContactZ{
      padding:50px 12px;
    }
  
  
    .contactHeadingZ h2{
      font-size:34px;
    }
  
  
    .contactIntroZ h3{
      font-size:27px;
    }
  
  
    .contactFormOuterZ{
      padding:20px 15px;
    }
  
  
    .contactCardZ{
      gap:12px;
    }
  
  
    .contactCardContentZ h4{
      font-size:12px;
    }
  
  }
  
  
  /* =====================================================
     REDUCED MOTION
  ===================================================== */
  
  @media(prefers-reduced-motion:reduce){
  
    .contactCardZ,
    .contactIconBoxZ,
    .contactSubmitZ,
    .submitArrowZ{
      transition:none;
    }
  
    .contactCardZ:hover{
      transform:none;
    }
  
  }
  
  
  /* =====================================================
     END CONTACT CSS
  ===================================================== */



/* ===== BODY ===== */
.ultra-body-x7a {
 
  padding: 30px;
  font-family: 'Inter', sans-serif;
}

/* ===== BANNER ===== */
.ultra-fintech-banner-x7a {
  max-width: 1400px;
  height: 260px;
  margin: auto;
  border-radius: 16px;
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  background: linear-gradient(90deg, #000000 0%, #EB7E00 50%, #000000 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* subtle overlay */
.ultra-fintech-banner-x7a::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,255,150,0.25), transparent);
  filter: blur(90px);
}

/* ===== LEFT ===== */
.ultra-content-x7a {
  max-width: 720px;
  z-index: 2;
}

.ultra-heading-x7a {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 14px;
}

.ultra-heading-x7a span {
  color: #39ff14;
}

/* blinking cursor effect */
.ultra-cursor-x7a {
  display: inline-block;
  width: 3px;
  height: 30px;
  background: #39ff14;
  margin-left: 4px;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.ultra-desc-x7a {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 22px;
  max-width: 600px;
}

/* ===== BUTTON ===== */
.ultra-btn-x7a {
  display: inline-block;
  background: #39ff14;
  color: #003300;
  padding: 12px 26px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 0 6px 15px rgba(0,255,100,0.35);
  transition: all 0.25s ease;
}

.ultra-btn-x7a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,255,100,0.5);
}

/* ===== RIGHT IMAGE ===== */
.ultra-image-wrap-x7a {
  position: relative;
  z-index: 2;
}

.ultra-image-wrap-x7a img {
  height: 260px;
  width: auto;
  object-fit: contain;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .ultra-fintech-banner-x7a {
    height: auto;
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }

  .ultra-heading-x7a {
    font-size: 26px;
  }

  .ultra-image-wrap-x7a img {
    height: 180px;
    margin-top: 20px;
  }
}



.rc-center-hero {
  padding: 30px 20px;

}

/* Card */
.rc-center-hero-box {
  max-width: 1300px;
  margin: auto;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  color: #fff;

  background: linear-gradient(
      90deg,
      #000000 0%,
      #ff7a00 50%,
      #003d1f 100%
  );
}

/* Heading */
.rc-center-hero-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.rc-center-hero-title span {
  color: #39ff14;
}

/* Text */
.rc-center-hero-text {
  font-size: 18px;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto 30px;
  opacity: 0.9;
}

/* Button */
.rc-center-hero-btn {
  display: inline-block;
  background: #39ff14;
  color: #000;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.rc-center-hero-btn:hover {
  background: #2be60f;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .rc-center-hero-title {
      font-size: 28px;
  }

  .rc-center-hero-text {
      font-size: 16px;
  }
}

@media (max-width: 480px) {
  .rc-center-hero-box {
      padding: 40px 20px;
  }

  .rc-center-hero-title {
      font-size: 22px;
  }
}
 /*===================================================== */
  
  .premiumFooterZ{
  
    --footerBg:#08111f;
    --footerBg2:#0d1929;
  
    --footerText:#e7edf5;
    --footerMuted:#8795a8;
  
    --accent:#f2a33a;
    --accentLight:#ffd18c;
  
    --border:rgba(255,255,255,.09);
  
    position:relative;
  
    width:100%;
  
    margin-top:80px;
  
    padding:0 24px;
  
    background:
      radial-gradient(
        circle at 15% 10%,
        rgba(242,163,58,.10),
        transparent 28%
      ),
      radial-gradient(
        circle at 90% 85%,
        rgba(242,163,58,.07),
        transparent 28%
      ),
      linear-gradient(
        145deg,
        #07101d,
        #0b1727 50%,
        #050c15
      );
  
    color:var(--footerText);
  
    font-family:
      Arial,
      Helvetica,
      sans-serif;
  
    overflow:hidden;
  
    box-sizing:border-box;
  
  }
  
  
  /* =====================================================
     BACKGROUND GLOW
  ===================================================== */
  
  .footerGlowZ{
  
    position:absolute;
  
    width:350px;
    height:350px;
  
    border-radius:50%;
  
    filter:blur(100px);
  
    pointer-events:none;
  
  }
  
  
  .footerGlowLeftZ{
  
    left:-220px;
    top:150px;
  
    background:
      rgba(242,163,58,.10);
  
  }
  
  
  .footerGlowRightZ{
  
    right:-220px;
    bottom:50px;
  
    background:
      rgba(242,163,58,.08);
  
  }
  
  
  /* =====================================================
     BACKGROUND PATTERN
  ===================================================== */
  
  .footerPatternZ{
  
    position:absolute;
  
    inset:0;
  
    pointer-events:none;
  
    opacity:.28;
  
    background-image:
  
      linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
      ),
  
      linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
      );
  
    background-size:55px 55px;
  
  }
  
  
  /* =====================================================
     CONTAINER
  ===================================================== */
  
  .premiumFooterContainerZ{
  
    position:relative;
  
    z-index:2;
  
    max-width:1400px;
  
    margin:auto;
  
  }
  
  
  /* =====================================================
     CTA
  ===================================================== */
  
  .footerCtaZ{
  
    display:flex;
  
    align-items:center;
  
    justify-content:space-between;
  
    gap:40px;
  
    padding:65px 0;
  
    border-bottom:
      1px solid var(--border);
  
  }
  
  
  .footerMiniLabelZ{
  
    display:block;
  
    margin-bottom:14px;
  
    color:var(--accent);
  
    font-size:10px;
  
    font-weight:700;
  
    letter-spacing:2.5px;
  
  }
  
  
  .footerCtaContentZ h2{
  
    margin:0;
  
    max-width:700px;
  
    color:#fff;
  
    font-size:
      clamp(30px,4vw,50px);
  
    line-height:1.12;
  
    letter-spacing:-1.5px;
  
  }
  
  
  .footerCtaContentZ h2 span{
  
    display:block;
  
    color:var(--accent);
  
  }
  
  
  .footerCtaContentZ p{
  
    max-width:570px;
  
    margin:17px 0 0;
  
    color:var(--footerMuted);
  
    font-size:14px;
  
    line-height:1.7;
  
  }
  
  
  /* CTA BUTTON */
  
  .footerCtaButtonZ{
  
    flex-shrink:0;
  
    display:flex;
  
    align-items:center;
  
    justify-content:center;
  
    gap:16px;
  
    min-width:175px;
  
    padding:16px 20px;
  
    border:
      1px solid rgba(242,163,58,.35);
  
    border-radius:12px;
  
    background:
      linear-gradient(
        135deg,
        var(--accent),
        #d9821e
      );
  
    color:#101010;
  
    text-decoration:none;
  
    font-size:13px;
  
    font-weight:700;
  
    box-shadow:
      0 15px 35px
      rgba(242,163,58,.14);
  
    transition:
      transform .3s ease,
      box-shadow .3s ease;
  
  }
  
  
  .footerCtaButtonZ:hover{
  
    transform:translateY(-4px);
  
    box-shadow:
      0 20px 40px
      rgba(242,163,58,.25);
  
  }
  
  
  .footerCtaArrowZ{
  
    font-size:19px;
  
    transition:.3s ease;
  
  }
  
  
  .footerCtaButtonZ:hover
  .footerCtaArrowZ{
  
    transform:
      translate(4px,-4px);
  
  }
  
  
  /* =====================================================
     MAIN GRID
  ===================================================== */
  
  .premiumFooterGridZ{
  
    display:grid;
  
    grid-template-columns:
      1.45fr
      1fr
      1.25fr
      1.2fr;
  
    gap:55px;
  
    padding:65px 0;
  
  }
  
  
  /* =====================================================
     BRAND
  ===================================================== */
  
  .footerLogoZ{
  
    display:inline-flex;
  
    align-items:center;
  
    gap:12px;
  
    color:#fff;
  
    text-decoration:none;
  
  }
  
  
  .logoMarkZ{
  
    width:48px;
    height:48px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    border-radius:13px;
  
    background:
      linear-gradient(
        135deg,
        var(--accent),
        #d77d18
      );
  
    color:#101010;
  
    font-size:17px;
  
    font-weight:800;
  
    box-shadow:
      0 10px 25px
      rgba(242,163,58,.15);
  
  }
  
  
  .logoTextZ{
  
    display:flex;
  
    flex-direction:column;
  
    line-height:1;
  
  }
  
  
  .logoTextZ strong{
  
    font-size:18px;
  
    letter-spacing:.5px;
  
  }
  
  
  .logoTextZ small{
  
    margin-top:5px;
  
    color:var(--footerMuted);
  
    font-size:9px;
  
    letter-spacing:1.5px;
  
    text-transform:uppercase;
  
  }
  
  
  .footerBrandDescriptionZ{
  
    max-width:340px;
  
    margin:24px 0;
  
    color:var(--footerMuted);
  
    font-size:13px;
  
    line-height:1.8;
  
  }
  
  
  /* =====================================================
     TRUST
  ===================================================== */
  
  .footerTrustZ{
  
    display:flex;
  
    align-items:center;
  
    gap:11px;
  
    margin-bottom:25px;
  
  }
  
  
  .trustIconZ{
  
    width:30px;
    height:30px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    border-radius:50%;
  
    background:
      rgba(242,163,58,.12);
  
    color:var(--accent);
  
    font-size:12px;
  
    font-weight:bold;
  
  }
  
  
  .footerTrustZ strong{
  
    display:block;
  
    color:#dbe3ed;
  
    font-size:11px;
  
  }
  
  
  .footerTrustZ span{
  
    display:block;
  
    margin-top:3px;
  
    color:#718096;
  
    font-size:9px;
  
  }
  
  
  /* =====================================================
     SOCIAL
  ===================================================== */
  
  .footerSocialZ{
  
    display:flex;
  
    gap:9px;
  
  }
  
  
  .footerSocialZ a{
  
    width:36px;
    height:36px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    border:
      1px solid rgba(255,255,255,.10);
  
    border-radius:10px;
  
    background:
      rgba(255,255,255,.035);
  
    color:#b8c3d0;
  
    text-decoration:none;
  
    font-size:13px;
  
    font-weight:700;
  
    transition:
      .3s ease;
  
  }
  
  
  .footerSocialZ a:hover{
  
    color:#101010;
  
    background:var(--accent);
  
    border-color:var(--accent);
  
    transform:
      translateY(-4px);
  
    box-shadow:
      0 8px 20px
      rgba(242,163,58,.18);
  
  }
  
  
  /* =====================================================
     FOOTER COLUMNS
  ===================================================== */
  
  .footerColumnZ h3{
  
    margin:0;
  
    color:#fff;
  
    font-size:14px;
  
    font-weight:700;
  
    letter-spacing:.2px;
  
  }
  
  
  .footerTitleLineZ{
  
    width:28px;
    height:2px;
  
    margin:
      12px 0 20px;
  
    border-radius:5px;
  
    background:var(--accent);
  
  }
  
  
  .footerColumnZ ul{
  
    list-style:none;
  
    margin:0;
    padding:0;
  
  }
  
  
  .footerColumnZ li{
  
    margin-bottom:12px;
  
  }
  
  
  .footerColumnZ li a{
  
    display:flex;
  
    align-items:center;
  
    justify-content:space-between;
  
    gap:10px;
  
    color:#8795a8;
  
    text-decoration:none;
  
    font-size:12px;
  
    line-height:1.4;
  
    transition:
      color .3s ease,
      transform .3s ease;
  
  }
  
  
  .footerColumnZ li a b{
  
    opacity:0;
  
    color:var(--accent);
  
    font-size:14px;
  
    transform:
      translateX(-5px);
  
    transition:.3s ease;
  
  }
  
  
  .footerColumnZ li a:hover{
  
    color:#fff;
  
    transform:translateX(4px);
  
  }
  
  
  .footerColumnZ li a:hover b{
  
    opacity:1;
  
    transform:translateX(0);
  
  }
  
  
  /* =====================================================
     CONTACT BAR
  ===================================================== */
  
  .footerContactBarZ{
  
    display:grid;
  
    grid-template-columns:
      1.3fr
      1fr
      1.4fr;
  
    gap:0;
  
    border:
      1px solid var(--border);
  
    border-radius:18px;
  
    background:
      rgba(255,255,255,.035);
  
    backdrop-filter:
      blur(15px);
  
    overflow:hidden;
  
  }
  
  
  .footerContactItemZ{
  
    min-width:0;
  
    display:flex;
  
    align-items:center;
  
    gap:14px;
  
    padding:21px;
  
    color:inherit;
  
    text-decoration:none;
  
  }
  
  
  .footerContactItemZ + .footerContactItemZ{
  
    border-left:
      1px solid var(--border);
  
  }
  
  
  .footerContactIconZ{
  
    width:40px;
    height:40px;
  
    flex:0 0 40px;
  
    display:flex;
  
    align-items:center;
    justify-content:center;
  
    border-radius:11px;
  
    background:
      rgba(242,163,58,.10);
  
    color:var(--accent);
  
    font-size:17px;
  
  }
  
  
  .footerContactItemZ span{
  
    display:block;
  
    margin-bottom:5px;
  
    color:#69788d;
  
    font-size:9px;
  
    font-weight:700;
  
    letter-spacing:1.5px;
  
  }
  
  
  .footerContactItemZ strong{
  
    display:block;
  
    color:#dce4ee;
  
    font-size:11px;
  
    line-height:1.5;
  
  }
  
  
  .footerContactLinkZ{
  
    transition:
      background .3s ease;
  
  }
  
  
  .footerContactLinkZ:hover{
  
    background:
      rgba(242,163,58,.05);
  
  }
  
  
  .footerContactLinkZ:hover
  .footerContactIconZ{
  
    background:var(--accent);
  
    color:#111;
  
  }
  
  
  /* =====================================================
     BOTTOM
  ===================================================== */
  
  .premiumFooterBottomZ{
  
    display:flex;
  
    align-items:center;
  
    justify-content:space-between;
  
    gap:20px;
  
    margin-top:35px;
  
    padding:
      22px 0 25px;
  
    border-top:
      1px solid var(--border);
  
  }
  
  
  .premiumFooterBottomZ p{
  
    margin:0;
  
    color:#657387;
  
    font-size:10px;
  
  }
  
  
  .footerBottomLinksZ{
  
    display:flex;
  
    align-items:center;
  
    gap:10px;
  
  }
  
  
  .footerBottomLinksZ a{
  
    color:#657387;
  
    text-decoration:none;
  
    font-size:10px;
  
    transition:.3s ease;
  
  }
  
  
  .footerBottomLinksZ a:hover{
  
    color:var(--accent);
  
  }
  
  
  .footerBottomLinksZ span{
  
    color:#394758;
  
    font-size:9px;
  
  }
  
  
  /* =====================================================
     LARGE TABLET
  ===================================================== */
  
  @media(max-width:1100px){
  
    .premiumFooterGridZ{
  
      grid-template-columns:
        1.3fr 1fr 1fr;
  
      gap:45px;
  
    }
  
  
    .footerBrandZ{
  
      grid-column:1 / -1;
  
    }
  
  
    .footerBrandDescriptionZ{
  
      max-width:600px;
  
    }
  
  
    .footerContactBarZ{
  
      grid-template-columns:
        1fr 1fr;
  
    }
  
  
    .footerContactItemZ:first-child{
  
      grid-column:1 / -1;
  
    }
  
  
    .footerContactItemZ:first-child
    + .footerContactItemZ{
  
      border-left:0;
  
      border-top:
        1px solid var(--border);
  
    }
  
  
    .footerContactItemZ:last-child{
  
      border-top:
        1px solid var(--border);
  
    }
  
  }
  
  
  /* =====================================================
     TABLET
  ===================================================== */
  
  @media(max-width:800px){
  
    .premiumFooterZ{
  
      padding:0 20px;
  
    }
  
  
    .footerCtaZ{
  
      display:block;
  
      padding:50px 0;
  
    }
  
  
    .footerCtaButtonZ{
  
      width:max-content;
  
      margin-top:25px;
  
    }
  
  
    .premiumFooterGridZ{
  
      grid-template-columns:
        1fr 1fr;
  
      gap:40px 30px;
  
      padding:50px 0;
  
    }
  
  
    .footerBrandZ{
  
      grid-column:1 / -1;
  
    }
  
  
    .footerContactBarZ{
  
      grid-template-columns:1fr;
  
    }
  
  
    .footerContactItemZ:first-child{
  
      grid-column:auto;
  
    }
  
  
    .footerContactItemZ + .footerContactItemZ{
  
      border-left:0;
  
      border-top:
        1px solid var(--border);
  
    }
  
  
    .premiumFooterBottomZ{
  
      display:block;
  
      text-align:center;
  
    }
  
  
    .footerBottomLinksZ{
  
      justify-content:center;
  
      flex-wrap:wrap;
  
      margin-top:12px;
  
    }
  
  }
  
  
  /* =====================================================
     MOBILE
  ===================================================== */
  
  @media(max-width:600px){
  
    .premiumFooterZ{
  
      margin-top:55px;
  
      padding:0 16px;
  
    }
  
  
    .footerCtaZ{
  
      padding:42px 0;
  
    }
  
  
    .footerCtaContentZ h2{
  
      font-size:31px;
  
      letter-spacing:-.8px;
  
    }
  
  
    .footerCtaContentZ p{
  
      font-size:12px;
  
      line-height:1.7;
  
    }
  
  
    .footerCtaButtonZ{
  
      width:100%;
  
      box-sizing:border-box;
  
      margin-top:23px;
  
    }
  
  
    .premiumFooterGridZ{
  
      grid-template-columns:1fr;
  
      gap:35px;
  
      padding:42px 0;
  
    }
  
  
    .footerBrandZ{
  
      grid-column:auto;
  
    }
  
  
    .footerBrandDescriptionZ{
  
      font-size:12px;
  
    }
  
  
    .footerColumnZ li{
  
      margin-bottom:11px;
  
    }
  
  
    .footerColumnZ li a{
  
      font-size:12px;
  
    }
  
  
    .footerContactBarZ{
  
      border-radius:15px;
  
    }
  
  
    .footerContactItemZ{
  
      padding:17px;
  
    }
  
  
    .footerContactIconZ{
  
      width:36px;
      height:36px;
  
      flex-basis:36px;
  
    }
  
  
    .footerContactItemZ strong{
  
      font-size:10px;
  
    }
  
  
    .premiumFooterBottomZ{
  
      margin-top:28px;
  
      padding:
        20px 0 22px;
  
    }
  
  
    .footerBottomLinksZ{
  
      gap:7px;
  
    }
  
  }
  
  
  /* =====================================================
     SMALL MOBILE
  ===================================================== */
  
  @media(max-width:380px){
  
    .premiumFooterZ{
  
      padding:0 12px;
  
    }
  
  
    .footerCtaContentZ h2{
  
      font-size:27px;
  
    }
  
  
    .footerCtaContentZ p{
  
      font-size:11px;
  
    }
  
  
    .logoMarkZ{
  
      width:44px;
      height:44px;
  
    }
  
  
    .footerContactItemZ{
  
      gap:10px;
  
    }
  
  }
  
  
  /* =====================================================
     REDUCED MOTION
  ===================================================== */
  
  @media(prefers-reduced-motion:reduce){
  
    .footerCtaButtonZ,
    .footerSocialZ a,
    .footerColumnZ li a,
    .footerContactLinkZ{
  
      transition:none;
  
    }
  
  }
  







  /* team section */


       /* =========================================================
           ROOT VARIABLES
        ========================================================= */

        :root {
            --black: #000000;
            --orange: #EB7E00;
            --white: #ffffff;
            --dark-text: #222222;
            --light-gray: #eeeeee;

            --gray-text: #686868;
            --orange-dark: #c96700;
        }


        /* =========================================================
           RESET
        ========================================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            background: var(--white);
            color: var(--dark-text);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }


        /* =========================================================
           TEAM HERO
        ========================================================= */

        .team-hero {
            position: relative;

            width: 100%;
            min-height: 650px;

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

            background: var(--white);

            overflow: hidden;

            isolation: isolate;
        }


        /* =========================================================
           BACKGROUND DECORATIVE CIRCLES
        ========================================================= */

        .circle {
            position: absolute;

            border: 1px solid rgba(235, 126, 0, 0.18);

            border-radius: 50%;

            pointer-events: none;

            z-index: -1;
        }


        /* Top Left Circle */

        .circle-top-left {
            width: 560px;
            height: 560px;

            top: -410px;
            left: -80px;
        }


        /* Right Circle */

        .circle-right {
            width: 380px;
            height: 380px;

            right: -65px;
            bottom: 20px;
        }


        /* Small Decorative Circle */

        .circle-small {
            width: 180px;
            height: 180px;

            left: 9%;
            bottom: -130px;

            border-color: rgba(235, 126, 0, 0.10);
        }


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

        .team-container {
            width: min(1450px, 92%);

            margin: auto;

            text-align: center;

            position: relative;

            padding: 65px 20px 80px;
        }


        /* =========================================================
           MAIN HEADING
        ========================================================= */

        .team-title {
            font-size: clamp(48px, 6vw, 92px);

            line-height: 0.98;

            font-weight: 900;

            letter-spacing: -4px;

            margin-bottom: 28px;

            color: var(--black);
        }


        .team-title .orange {
            color: var(--orange);
        }


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

        .title-line {
            position: relative;

            width: 112px;
            height: 5px;

            margin: 0 auto 32px;

            border-radius: 20px;

            background: var(--orange);

            overflow: hidden;
        }


        .title-line::before {
            content: "";

            position: absolute;

            width: 52px;
            height: 100%;

            left: 0;

            background: var(--black);

            border-radius: inherit;
        }


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

        .team-description {
            max-width: 760px;

            margin: 0 auto;

            color: var(--gray-text);

            font-size: 20px;

            line-height: 1.75;

            font-weight: 400;
        }


        /* =========================================================
           STATS
        ========================================================= */

        .stats {
            display: flex;

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

            margin: 42px auto 0;

            max-width: 900px;
        }


        .stat {
            min-width: 245px;

            padding: 0 45px;

            position: relative;
        }


        .stat:not(:last-child)::after {
            content: "";

            position: absolute;

            top: 4px;
            right: 0;

            width: 1px;
            height: 55px;

            background: #dcdcdc;
        }


        .stat-number {
            font-size: 40px;

            line-height: 1;

            font-weight: 800;

            color: #39FF14;

            margin-bottom: 8px;
        }


        .stat-number span {
            color: var(--orange);
        }


        .stat-label {
            font-size: 14px;

        font-family: Arial, Helvetica, sans-serif;

            letter-spacing: 1.4px;

            color: #ffff;

            
        }


        /* =========================================================
           SCROLL INDICATOR
        ========================================================= */

        .scroll-area {
            margin-top: 40px;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 9px;

            cursor: pointer;
        }


        .mouse {
            width: 27px;
            height: 44px;

            border: 2px solid #bdbdbd;

            border-radius: 20px;

            display: flex;

            justify-content: center;

            padding-top: 7px;
        }


        .mouse-wheel {
            width: 4px;
            height: 8px;

            border-radius: 10px;

            background: var(--orange);

            animation: scrollWheel 1.8s infinite ease-in-out;
        }


        .scroll-text {
            font-size: 12px;

            font-weight: 700;

            letter-spacing: 1.5px;

            color: #999999;

            text-transform: uppercase;
        }


        @keyframes scrollWheel {

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

            50% {
                transform: translateY(9px);
                opacity: 0.35;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }

        }


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

        .floating-actions {
            position: fixed;

            left: 18px;
            bottom: 25px;

            display: flex;

            flex-direction: column;

            gap: 14px;

            z-index: 100;
        }


        .floating-btn {
            min-width: 160px;

            height: 58px;

            padding: 0 28px;

            border-radius: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 17px;

            font-weight: 700;

            color: var(--white);

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.15);

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


        .floating-btn:hover {
            transform: translateY(-4px);

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


        .join-btn {
            background: var(--black);
        }


        .life-btn {
            background: var(--orange);
        }


        /* =========================================================
           CONTACT BUTTONS
        ========================================================= */

        .contact-actions {
            position: fixed;

            right: 25px;
            bottom: 50px;

            display: flex;

            flex-direction: column;

            gap: 12px;

            z-index: 100;
        }


        .contact-btn {
            width: 62px;
            height: 62px;

            border-radius: 50%;

            display: flex;

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

            color: var(--white);

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.18);

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


        .contact-btn:hover {
            transform: scale(1.08);

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


        /* Phone */

        .phone-btn {
            background: var(--black);
        }


        /* WhatsApp style */

        .whatsapp-btn {
            background: var(--orange);
        }


        /* Icons */

        .contact-btn svg {
            width: 28px;
            height: 28px;

            fill: none;

            stroke: currentColor;

            stroke-width: 2;

            stroke-linecap: round;
            stroke-linejoin: round;
        }


        /* =========================================================
           OPTIONAL NEXT SECTION
        ========================================================= */

 .next-section {
    min-height: 350px;

    padding: 60px 30px;

    background: #fafafa;

    display: flex;

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

    text-align: center;
}

        .next-section h2 {
            font-size: clamp(35px, 5vw, 60px);

            color: var(--black);

            font-weight: 800;
        }


        .next-section span {
            color: var(--orange);
        }


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

        @media (max-width: 1000px) {

            .team-hero {
                min-height: 620px;
            }

            .team-container {
                padding-top: 55px;
            }

            .team-title {
                letter-spacing: -2.5px;
            }

            .team-description {
                font-size: 18px;
                max-width: 650px;
            }

            .stats {
                max-width: 760px;
            }

            .stat {
                min-width: 210px;
                padding: 0 30px;
            }

            .stat-number {
                font-size: 34px;
            }

            .stat-label {
                font-size: 12px;
            }

            .circle-top-left {
                width: 480px;
                height: 480px;

                top: -360px;
                left: -100px;
            }

            .circle-right {
                width: 320px;
                height: 320px;

                right: -120px;
            }

        }


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

        @media (max-width: 700px) {

            .team-hero {
                min-height: auto;
            }

            .team-container {
                width: 94%;

                padding:
                    75px 12px
                    80px;
            }


            /* Heading */

            .team-title {
                font-size: clamp(43px, 13vw, 64px);

                line-height: 1.02;

                letter-spacing: -2px;

                margin-bottom: 22px;
            }


            /* Underline */

            .title-line {
                width: 85px;

                height: 4px;

                margin-bottom: 25px;
            }


            /* Description */

            .team-description {
                font-size: 16px;

                line-height: 1.65;

                max-width: 480px;
            }


            /* Stats */

            .stats {
                flex-direction: column;

                gap: 25px;

                margin-top: 35px;
            }


            .stat {
                padding: 0;

                min-width: 0;
            }


            .stat:not(:last-child)::after {
                display: none;
            }


            .stat-number {
                font-size: 34px;

                margin-bottom: 6px;
            }


            .stat-label {
                font-size: 11px;

                letter-spacing: 1.1px;
            }


            /* Scroll */

            .scroll-area {
                margin-top: 35px;
            }


            /* Decorative circles */

            .circle-top-left {
                width: 330px;
                height: 330px;

                top: -250px;
                left: -130px;
            }


            .circle-right {
                width: 240px;
                height: 240px;

                right: -130px;
                bottom: 30px;
            }


            .circle-small {
                display: none;
            }


            /* Floating buttons */

            .floating-actions {
                left: 12px;

                bottom: 15px;

                gap: 9px;
            }


            .floating-btn {
                min-width: auto;

                height: 46px;

                padding: 0 19px;

                font-size: 13px;
            }


            /* Contact */

            .contact-actions {
                right: 12px;

                bottom: 20px;

                gap: 9px;
            }


            .contact-btn {
                width: 50px;
                height: 50px;
            }


            .contact-btn svg {
                width: 23px;
                height: 23px;
            }

        }


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

        @media (max-width: 420px) {

            .team-container {
                padding-top: 65px;
            }


            .team-title {
                font-size: 41px;

                letter-spacing: -1.5px;
            }


            .team-description {
                font-size: 15px;
            }


            .stat-number {
                font-size: 31px;
            }


            .scroll-area {
                margin-top: 30px;
            }


            .floating-actions {
                display: none;
            }

        }


        /* =========================================================
           ACCESSIBILITY
        ========================================================= */

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

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

        }


        /* leader section */

        /* =========================================================
   GEOKON TEAM MEMBERS
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --muted-text: #6c6c6c;

}


/* =========================================================
   SECTION
========================================================= */

.team-members-section {

    position: relative;

    width: 100%;

    padding:
        65px 0
        90px;

    background:
        var(--white);

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.team-members-container {

    width:
        min(1180px, 90%);

    margin:
        0 auto;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.team-section-heading {

    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 30px;

}


/* Heading text */

.team-heading-left {

    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

}


/* Blue / Black */

.heading-blue {

    color:
        var(--black);

}


/* Orange */

.heading-orange {

    color:
        var(--orange);

}


/* Both */

.team-heading-left span {

    font-size: 20px;

    line-height: 1;

    font-weight: 800;

}


/* =========================================================
   HEADING LINE
========================================================= */

.heading-line {

    flex: 1;

    height: 1px;

    margin-left: 10px;

    background:
        linear-gradient(
            90deg,
            var(--black),
            rgba(0,0,0,0.08)
        );

}


/* Dot */

.heading-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    margin-left: 6px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 4px
        rgba(235,126,0,0.10);

}


/* =========================================================
   LEADERS GRID
========================================================= */

.leaders-grid {

    width: min(850px, 100%);

    margin:
        0 auto 55px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 75px;

    align-items: start;

}


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

.leader-card,
.member-card {

    position: relative;

    border-radius: 9px;

    background:
        var(--white);

    box-shadow:
        0 14px 35px
        rgba(0,0,0,0.10);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;

}


/* Leader slightly bigger */

.leader-card {

    min-height: 510px;

}


/* Core cards */

.member-card {

    min-height: 510px;

}


/* Hover */

.leader-card:hover,
.member-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 22px 45px
        rgba(0,0,0,0.16);

}


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

.member-image-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: 510px;

    overflow: hidden;

    border-radius:
        9px 9px 7px 7px;

    background:
        linear-gradient(
            145deg,
            #161616,
            #333333
        );

}


/* Core */

.member-card
.member-image-wrapper {

    min-height: 510px;

}


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

.member-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;

    display: block;

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

}


/* Hover zoom */

.leader-card:hover
.member-image,

.member-card:hover
.member-image {

    transform:
        scale(1.055);

}


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

.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02) 30%,
            rgba(0,0,0,0.18) 100%
        );

    pointer-events: none;

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.image-circle {

    position: absolute;

    width: 170px;

    height: 170px;

    right: -65px;

    top: -70px;

    border:
        1px solid
        rgba(235,126,0,0.30);

    border-radius: 50%;

    opacity: 0.7;

    pointer-events: none;

}


.image-circle::before {

    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px solid
        rgba(235,126,0,0.18);

    border-radius: 50%;

}


/* =========================================================
   MEMBER INFORMATION
========================================================= */

.member-info {

    position: absolute;

    left: 7px;
    right: 7px;

    bottom: -1px;

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
        10px 11px;

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

    border-radius:
        8px 8px 8px 8px;

    border:
        1px solid
        rgba(0,0,0,0.05);

    border-bottom:
        3px solid
        var(--orange);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,0.12);

    z-index: 5;

}


/* =========================================================
   MEMBER DETAILS
========================================================= */

.member-details {

    min-width: 0;

    text-align: left;

}


/* Name */

.member-details h3 {

    margin: 0;

    color:
        var(--dark-text);

    font-size: 15px;

    line-height: 1.2;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* Designation */

.member-details p {

    margin:
        5px 0 0;

    color:
        var(--orange);

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        0.7px;

    text-transform:
        uppercase;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================================
   LEADER TEXT
========================================================= */

.leader-card
.member-details h3 {

    font-size: 15px;

}


.leader-card
.member-details p {

    font-size: 8px;

}


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

.linkedin-button {

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(235,126,0,0.35);

    border-radius: 5px;

    color:
        var(--orange);

    background:
        rgba(235,126,0,0.05);

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

}


.linkedin-button:hover {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        translateY(-2px);

}


.linkedin-button svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   CORE TEAM
========================================================= */

.core-heading {

    margin-top: 5px;

    margin-bottom: 28px;

}


/* =========================================================
   CORE GRID
========================================================= */

.core-team-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    column-gap: 18px;

    row-gap: 24px;

}


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

.member-card
.member-image-wrapper {

    height: 510px;

}


/* =========================================================
   RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .team-members-container {

        width: 92%;

    }


    .leaders-grid {

        width: min(760px, 100%);

        gap: 45px;

    }


    .core-team-grid {

        gap: 15px;

    }


    .member-details h3 {

        font-size: 13px;

    }

}


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

@media (max-width: 800px) {

    .team-members-section {

        padding:
            50px 0
            70px;

    }


    .leaders-grid {

        width: 100%;

        gap: 25px;

    }


    .leader-card {

        min-height: 290px;

    }


    .leader-card
    .member-image-wrapper {

        min-height: 290px;

    }


    .core-team-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;

    }


    .member-card
    .member-image-wrapper {

        min-height: 510px;

    }


    .member-card {

        min-height: 510px;

    }

}


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

@media (max-width: 600px) {

    .team-members-section {

        padding:
            40px 0
            55px;

    }


    .team-members-container {

        width: 91%;

    }


    /* Heading */

    .team-section-heading {

        margin-bottom: 22px;

    }


    .team-heading-left span {

        font-size: 18px;

    }


    .heading-line {

        margin-left: 9px;

    }


    .heading-dot {

        width: 6px;

        height: 6px;

    }


    /* Leaders */

    .leaders-grid {

        grid-template-columns: 1fr;

        width: min(360px, 100%);

        gap: 25px;

        margin-bottom: 42px;

    }


    .leader-card {

        min-height: 350px;

    }


    .leader-card
    .member-image-wrapper {

        min-height: 350px;

    }


    /* Core */

    .core-heading {

        margin-top: 0;

        margin-bottom: 22px;

    }


    .core-team-grid {

        grid-template-columns: 1fr;

        width: min(360px, 100%);

        margin: 0 auto;

        gap: 25px;

    }


    .member-card {

        min-height: 350px;

    }


    .member-card
    .member-image-wrapper {

        min-height: 350px;

    }


    /* Information */

    .member-info {

        left: 6px;
        right: 6px;

        min-height: 61px;

    }


    .member-details h3 {

        font-size: 14px;

    }


    .member-details p {

        font-size: 8px;

    }


}


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

@media (max-width: 400px) {

    .team-members-container {

        width: 90%;

    }


    .team-heading-left span {

        font-size: 16px;

    }


    .heading-line {

        margin-left: 7px;

    }


    .leaders-grid,
    .core-team-grid {

        width: 100%;

    }


    .leader-card,
    .member-card {

        min-height: 320px;

    }


    .leader-card
    .member-image-wrapper,
    .member-card
    .member-image-wrapper {

        min-height: 320px;

    }


    .member-details h3 {

        font-size: 13px;

    }


    .member-details p {

        font-size: 7px;

        letter-spacing: 0.4px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .member-image,
    .leader-card,
    .member-card,
    .linkedin-button {

        transition: none;

    }

}






/* about us page */


/* =========================================================
   GEOKON CAREER CTA
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --muted-white: rgba(255, 255, 255, 0.68);

}


/* =========================================================
   SECTION
========================================================= */

.career-section {

    position: relative;

    width: 100%;

    min-height: 570px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(235, 126, 0, 0.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 100%,
            rgba(235, 126, 0, 0.08),
            transparent 25%
        ),

        #080808;

    isolation: isolate;

}


/* =========================================================
   ENGINEERING GRID
========================================================= */

.career-grid {

    position: absolute;

    inset: 0;

    z-index: -5;

    opacity: 0.22;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 95%
        );

}


/* =========================================================
   GLOW
========================================================= */

.career-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    z-index: -4;

}


.career-glow-one {

    width: 350px;

    height: 350px;

    background: var(--orange);

    right: 4%;

    top: 8%;

    opacity: 0.12;

    animation:
        careerGlowOne 8s
        ease-in-out infinite alternate;

}


.career-glow-two {

    width: 250px;

    height: 250px;

    background: var(--orange);

    left: -80px;

    bottom: -80px;

    opacity: 0.08;

    animation:
        careerGlowTwo 10s
        ease-in-out infinite alternate;

}


@keyframes careerGlowOne {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-50px, 40px);
    }

}


@keyframes careerGlowTwo {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(60px, -40px);
    }

}


/* =========================================================
   GEOMETRIC SHAPES
========================================================= */

.career-shape {

    position: absolute;

    z-index: -2;

    pointer-events: none;

}


.shape-one {

    width: 120px;

    height: 120px;

    right: 7%;

    top: -55px;

    border: 1px solid
        rgba(235,126,0,0.28);

    border-radius: 25px;

    transform: rotate(28deg);

}


.shape-two {

    width: 70px;

    height: 70px;

    left: 25%;

    bottom: 5%;

    border: 1px solid
        rgba(255,255,255,0.08);

    transform:
        rotate(45deg);

}


.shape-three {

    width: 10px;

    height: 10px;

    right: 35%;

    top: 18%;

    background:
        var(--orange);

    border-radius: 50%;

    box-shadow:
        0 0 25px
        rgba(235,126,0,0.8);

}


/* =========================================================
   DECORATIVE LINES
========================================================= */

.career-line {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(235,126,0,0.5),
            transparent
        );

    z-index: -2;

}


.line-one {

    width: 280px;

    right: -60px;

    top: 35%;

    transform:
        rotate(-35deg);

}


.line-two {

    width: 180px;

    left: -40px;

    bottom: 25%;

    transform:
        rotate(28deg);

}


/* =========================================================
   CONTAINER
========================================================= */

.career-container {

    position: relative;

    width:
        min(1280px, 91%);

    margin: auto;

    padding:
        75px 20px
        80px;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 80px;

    z-index: 5;

}


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

.career-content {

    max-width: 650px;

}


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

.career-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    color:
        var(--orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.12);

}


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

.career-title {

    margin: 0;

    font-size:
        clamp(48px, 5.3vw, 76px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;

    color:
        var(--white);

}


.career-title span {

    display: block;

    color:
        var(--orange);

}


/* =========================================================
   ACCENT
========================================================= */

.career-accent {

    width: 110px;

    height: 4px;

    margin:
        28px 0
        24px;

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

    border-radius: 20px;

    overflow: hidden;

}


.career-accent span {

    display: block;

    width: 70%;

    height: 100%;

    background:
        var(--orange);

    border-radius: inherit;

    animation:
        accentPulse 3s
        ease-in-out infinite alternate;

}


@keyframes accentPulse {

    from {
        width: 35%;
    }

    to {
        width: 100%;
    }

}


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

.career-description {

    max-width: 620px;

    margin: 0;

    color:
        var(--muted-white);

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.career-highlights {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 27px;

}


.career-highlight {

    display: flex;

    align-items: center;

    gap: 7px;

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

    font-size: 12px;

    font-weight: 600;

}


.highlight-icon {

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--orange);

    border:
        1px solid
        rgba(235,126,0,0.35);

    font-size: 11px;

}


/* =========================================================
   MAIN CTA
========================================================= */

.career-main-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 34px;

    padding:
        15px 19px
        15px 24px;

    border:
        1px solid
        var(--orange);

    border-radius: 50px;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 13px;

    font-weight: 800;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.career-main-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(255,255,255,0.2),
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform 0.6s ease;

}


.career-main-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 35px
        rgba(235,126,0,0.3);

}


.career-main-btn:hover::before {

    transform:
        translateX(120%);

}


.career-btn-arrow {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--black);

    font-size: 17px;

    transition:
        transform 0.3s ease;

}


.career-main-btn:hover
.career-btn-arrow {

    transform:
        translateX(4px);

}


/* =========================================================
   RIGHT CARD WRAPPER
========================================================= */

.career-card-wrapper {

    position: relative;

    width: 100%;

    max-width: 490px;

    margin-left: auto;

}


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

.career-card-ring {

    position: absolute;

    width: 430px;

    height: 430px;

    right: -90px;

    top: -65px;

    border:
        1px solid
        rgba(235,126,0,0.20);

    border-radius: 50%;

    pointer-events: none;

    animation:
        ringRotate 18s
        linear infinite;

}


.career-card-ring::before {

    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px dashed
        rgba(255,255,255,0.08);

    border-radius: 50%;

}


@keyframes ringRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


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

.career-card {

    position: relative;

    padding:
        30px;

    min-height: 365px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.045)
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.45);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease;

}


.career-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

    background:
        rgba(235,126,0,0.12);

}


.career-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(235,126,0,0.5);

}


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

.career-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.career-card-label {

    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.card-label-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 12px
        rgba(235,126,0,0.8);

}


.career-card-number {

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

    font-size: 14px;

    font-weight: 800;

}


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

.career-icon-box {

    margin-top: 32px;

}


.career-icon-circle {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    background:
        var(--orange);

    color:
        var(--white);

    box-shadow:
        0 12px 35px
        rgba(235,126,0,0.28);

    animation:
        iconFloat 3.5s
        ease-in-out infinite;

}


@keyframes iconFloat {

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

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

}


.career-icon-circle svg {

    width: 32px;

    height: 32px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.career-card h3 {

    margin:
        25px 0
        12px;

    max-width: 380px;

    font-size: 34px;

    line-height: 1.08;

    letter-spacing: -1px;

    color:
        var(--white);

}


.career-card h3 span {

    color:
        var(--orange);

}


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

.career-card p {

    margin: 0;

    max-width: 390px;

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

    font-size: 14px;

    line-height: 1.7;

}


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

.career-card-divider {

    width: 100%;

    height: 1px;

    margin:
        25px 0
        18px;

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

}


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

.career-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.career-card-bottom > span {

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

    font-size: 10px;

    font-weight: 600;

}


.career-card-btn {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(235,126,0,0.5);

    border-radius: 50%;

    color:
        var(--orange);

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

}


.career-card-btn:hover {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        rotate(-8deg)
        scale(1.08);

}


.career-card-btn svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   FLOATING BADGE
========================================================= */

.career-floating-badge {

    position: absolute;

    left: -55px;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(235,126,0,0.28);

    border-radius: 12px;

    background:
        rgba(10,10,10,0.88);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.35);

    z-index: 10;

}


.badge-pulse {

    width: 9px;

    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.12);

}


.career-floating-badge strong {

    display: block;

    color:
        var(--white);

    font-size: 10px;

}


.career-floating-badge small {

    display: block;

    margin-top: 3px;

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

    font-size: 9px;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.career-bottom-line {

    position: absolute;

    left: 50%;

    bottom: 17px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    width: min(500px, 70%);

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-align: center;

}


.career-bottom-line span {

    flex: 1;

    height: 1px;

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

}


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

@media (max-width: 1050px) {

    .career-container {

        grid-template-columns:
            1fr 0.9fr;

        gap: 50px;

    }


    .career-title {

        font-size:
            clamp(45px, 5.5vw, 65px);

    }


    .career-card {

        min-height: 350px;

    }


    .career-floating-badge {

        left: -25px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 800px) {

    .career-section {

        min-height: auto;

    }


    .career-container {

        grid-template-columns: 1fr;

        gap: 65px;

        padding:
            70px 20px
            85px;

    }


    .career-content {

        max-width: 700px;

    }


    .career-card-wrapper {

        max-width: 520px;

        margin:
            0 auto;

    }


    .career-card-ring {

        right: -70px;

    }


    .career-floating-badge {

        left: -20px;

    }


    .career-bottom-line {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .career-section {

        min-height: auto;

    }


    .career-container {

        width: 92%;

        padding:
            55px 0
            70px;

        gap: 50px;

    }


    /* Eyebrow */

    .career-eyebrow {

        font-size: 9px;

        letter-spacing: 1.8px;

    }


    /* Heading */

    .career-title {

        font-size:
            clamp(40px, 12vw, 56px);

        line-height: 1.02;

        letter-spacing: -2px;

    }


    /* Description */

    .career-description {

        font-size: 14px;

        line-height: 1.75;

    }


    /* Highlights */

    .career-highlights {

        gap: 12px;

    }


    .career-highlight {

        font-size: 10px;

    }


    .highlight-icon {

        width: 18px;

        height: 18px;

    }


    /* CTA */

    .career-main-btn {

        margin-top: 28px;

        padding:
            13px 15px
            13px 20px;

        font-size: 11px;

    }


    .career-btn-arrow {

        width: 27px;

        height: 27px;

    }


    /* Card */

    .career-card-wrapper {

        width: 100%;

    }


    .career-card {

        min-height: 330px;

        padding: 23px;

        border-radius: 18px;

    }


    .career-card-ring {

        width: 300px;

        height: 300px;

        right: -140px;

        top: -45px;

    }


    .career-icon-circle {

        width: 58px;

        height: 58px;

        border-radius: 16px;

    }


    .career-icon-circle svg {

        width: 28px;

        height: 28px;

    }


    .career-card h3 {

        font-size: 29px;

    }


    .career-card p {

        font-size: 12.5px;

    }


    /* Badge */

    .career-floating-badge {

        left: 12px;

        bottom: -18px;

        padding:
            10px 13px;

    }


    /* Shapes */

    .shape-one {

        width: 80px;

        height: 80px;

        right: -25px;

    }


    .shape-two {

        display: none;

    }


    .shape-three {

        right: 12%;

    }

}


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

@media (max-width: 400px) {

    .career-container {

        width: 91%;

        padding-top: 48px;

    }


    .career-title {

        font-size: 39px;

    }


    .career-description {

        font-size: 13.5px;

    }


    .career-highlights {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    .career-highlight:last-child {

        grid-column:
            1 / -1;

    }


    .career-card {

        padding: 20px;

    }


    .career-card h3 {

        font-size: 26px;

    }


    .career-card-bottom > span {

        max-width: 180px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .career-glow,
    .career-card-ring,
    .career-icon-circle,
    .career-accent span {

        animation: none;

    }


    .career-card,
    .career-main-btn,
    .career-card-btn {

        transition: none;

    }

}




/* =========================================================
   GEOKON - WHO WE ARE
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --gray-text: #666666;

}


/* =========================================================
   SECTION
========================================================= */

.who-section {

    position: relative;

    width: 100%;

    padding:
        85px 0
        100px;

    background:
        var(--white);

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND CIRCLES
========================================================= */

.who-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}


.who-bg-circle-1 {

    width: 450px;

    height: 450px;

    right: -270px;

    top: 80px;

    border:
        1px solid
        rgba(235,126,0,0.12);

}


.who-bg-circle-1::before {

    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px dashed
        rgba(0,0,0,0.06);

    border-radius: 50%;

}


.who-bg-circle-2 {

    width: 250px;

    height: 250px;

    left: -170px;

    bottom: -120px;

    border:
        1px solid
        rgba(235,126,0,0.10);

}


/* =========================================================
   CONTAINER
========================================================= */

.who-container {

    width:
        min(1280px, 91%);

    margin:
        0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.who-heading {

    position: relative;

    margin-bottom: 60px;

}


/* Top information */

.who-heading-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 1180px;

    margin-bottom: 12px;

}


.who-heading-small {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    color:
        var(--orange);

}


.who-heading-number {

    font-size: 11px;

    font-weight: 800;

    color:
        #b5b5b5;

    letter-spacing: 1px;

}


/* Heading */

.who-heading h2 {

    margin: 0;

    font-size:
        clamp(52px, 6vw, 82px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -4px;

    color:
        var(--black);

}


.who-heading h2 span {

    color:
        var(--orange);

}


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

.who-title-line {

    width: 115px;

    height: 5px;

    margin-top: 22px;

    background:
        var(--light-gray);

    border-radius: 20px;

    overflow: hidden;

}


.who-title-line span {

    display: block;

    width: 55%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    border-radius: inherit;

    animation:
        whoLineAnimation 3s
        ease-in-out infinite alternate;

}


@keyframes whoLineAnimation {

    from {
        width: 35%;
    }

    to {
        width: 100%;
    }

}


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

.who-content {

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    align-items: center;

    gap: 80px;

}


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

.who-text {

    max-width: 620px;

}


/* Small label */

.who-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.who-label span {

    width: 25px;

    height: 2px;

    background:
        var(--orange);

}


/* Paragraph */

.who-text > p {

    margin:
        0 0 23px;

    font-size: 17px;

    line-height: 1.85;

    color:
        var(--gray-text);

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.who-highlights {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 27px;

}


.who-highlight {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        10px 0;

}


.highlight-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--orange);

    background:
        rgba(235,126,0,0.08);

    border:
        1px solid
        rgba(235,126,0,0.18);

    border-radius: 11px;

}


.highlight-icon svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.who-highlight strong {

    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    color:
        var(--dark-text);

}


.who-highlight span {

    display: block;

    font-size: 11px;

    color:
        #888888;

}


/* =========================================================
   CTA
========================================================= */

.who-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    padding:
        13px 16px
        13px 22px;

    color:
        var(--white);

    background:
        var(--black);

    border:
        1px solid
        var(--black);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 800;

    overflow: hidden;

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

}


.who-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--orange);

    transform:
        translateX(-105%);

    transition:
        transform 0.4s ease;

}


.who-button > span {

    position: relative;

    z-index: 2;

}


.who-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(235,126,0,0.25);

}


.who-button:hover::before {

    transform:
        translateX(0);

}


.who-button-arrow {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--orange);

    transition:
        transform 0.3s ease;

}


.who-button:hover
.who-button-arrow {

    background:
        var(--black);

    transform:
        translateX(4px);

}


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

.who-image-area {

    position: relative;

    width: 100%;

    min-height: 430px;

    padding:
        0 18px
        18px 0;

}


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

.who-image-frame {

    position: absolute;

    width: 100%;

    height: 100%;

    right: 0;

    top: 0;

    border:
        2px solid
        var(--orange);

    border-radius: 4px;

    transform:
        translate(13px, 13px);

    opacity: 0.7;

}


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

.who-image-wrapper {

    position: relative;

    width: 100%;

    height: 430px;

    overflow: hidden;

    border-radius: 4px;

    background:
        var(--black);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.17);

    z-index: 2;

}


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

.who-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

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

}


.who-image-wrapper:hover
.who-image {

    transform:
        scale(1.06);

}


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

.who-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,0.02),
            rgba(0,0,0,0.30)
        );

    pointer-events: none;

}


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

.who-image-badge {

    position: absolute;

    left: 18px;

    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(255,255,255,0.25);

    border-radius: 10px;

    background:
        rgba(0,0,0,0.75);

    backdrop-filter:
        blur(8px);

    z-index: 5;

}


.badge-dot {

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.12);

}


.who-image-badge strong {

    display: block;

    color:
        var(--white);

    font-size: 9px;

    letter-spacing: 1.2px;

}


.who-image-badge small {

    display: block;

    margin-top: 3px;

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

    font-size: 8px;

}


/* =========================================================
   EXPERIENCE BADGE
========================================================= */

.who-experience {

    position: absolute;

    right: -18px;

    bottom: 28px;

    width: 105px;

    height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        5px solid
        var(--white);

    border-radius: 50%;

    background:
        var(--orange);

    color:
        var(--white);

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

    z-index: 8;

}


.who-experience strong {

    font-size: 27px;

    line-height: 1;

    font-weight: 900;

}


.who-experience span {

    margin-top: 5px;

    font-size: 8px;

    line-height: 1.3;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;

}


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

.who-corner {

    position: absolute;

    width: 45px;

    height: 45px;

    right: -3px;

    top: -3px;

    border-top:
        3px solid
        var(--black);

    border-right:
        3px solid
        var(--black);

    z-index: 10;

}


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

@media (max-width: 1050px) {

    .who-content {

        gap: 50px;

    }


    .who-heading {

        margin-bottom: 45px;

    }


    .who-text > p {

        font-size: 16px;

    }


    .who-image-wrapper {

        height: 390px;

    }


    .who-image-area {

        min-height: 390px;

    }

}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 800px) {

    .who-section {

        padding:
            65px 0
            75px;

    }


    .who-heading {

        margin-bottom: 45px;

    }


    .who-content {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .who-text {

        max-width: 750px;

    }


    .who-image-area {

        width: min(700px, 100%);

        margin:
            0 auto;

    }

}


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

@media (max-width: 600px) {

    .who-section {

        padding:
            50px 0
            65px;

    }


    .who-container {

        width: 91%;

    }


    /* Heading */

    .who-heading {

        margin-bottom: 35px;

    }


    .who-heading-top {

        margin-bottom: 10px;

    }


    .who-heading-small {

        font-size: 9px;

        letter-spacing: 2px;

    }


    .who-heading-number {

        font-size: 9px;

    }


    .who-heading h2 {

        font-size:
            clamp(42px, 13vw, 58px);

        letter-spacing: -2.5px;

    }


    .who-title-line {

        width: 85px;

        height: 4px;

        margin-top: 18px;

    }


    /* Content */

    .who-content {

        gap: 45px;

    }


    /* Text */

    .who-label {

        font-size: 9px;

        margin-bottom: 18px;

    }


    .who-text > p {

        font-size: 14px;

        line-height: 1.75;

        margin-bottom: 18px;

    }


    /* Highlights */

    .who-highlights {

        gap: 8px;

        margin-top: 23px;

    }


    .who-highlight {

        gap: 10px;

        padding: 8px 0;

    }


    .highlight-icon {

        width: 38px;

        height: 38px;

    }


    .who-highlight strong {

        font-size: 11px;

    }


    .who-highlight span {

        font-size: 9px;

    }


    /* Button */

    .who-button {

        margin-top: 25px;

        padding:
            12px 14px
            12px 19px;

        font-size: 10px;

    }


    .who-button-arrow {

        width: 25px;

        height: 25px;

    }


    /* Image */

    .who-image-area {

        min-height: 310px;

        padding:
            0 10px
            10px 0;

    }


    .who-image-wrapper {

        height: 310px;

    }


    .who-image-frame {

        transform:
            translate(9px, 9px);

    }


    /* Image badge */

    .who-image-badge {

        left: 12px;

        bottom: 12px;

        padding:
            9px 11px;

    }


    .who-image-badge strong {

        font-size: 8px;

    }


    .who-image-badge small {

        font-size: 7px;

    }


    /* Experience */

    .who-experience {

        width: 82px;

        height: 82px;

        right: -8px;

        bottom: 18px;

        border-width: 4px;

    }


    .who-experience strong {

        font-size: 21px;

    }


    .who-experience span {

        font-size: 6.5px;

    }


    /* Corner */

    .who-corner {

        width: 32px;

        height: 32px;

        border-width: 2px;

    }

}


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

@media (max-width: 400px) {

    .who-container {

        width: 90%;

    }


    .who-heading h2 {

        font-size: 40px;

    }


    .who-text > p {

        font-size: 13.5px;

    }


    .who-highlight span {

        font-size: 8.5px;

    }


    .who-image-area {

        min-height: 270px;

    }


    .who-image-wrapper {

        height: 270px;

    }


    .who-experience {

        width: 72px;

        height: 72px;

        right: -5px;

    }


    .who-experience strong {

        font-size: 18px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .who-title-line span {

        animation: none;

    }


    .who-image {

        transition: none;

    }


    .who-button {

        transition: none;

    }

}








/* =========================================================
   CORE VALUES SECTION
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.core-values-section {

    position: relative;

    width: 100%;

    padding: 90px 0 100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 45%,
            rgba(235, 126, 0, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 80%,
            rgba(235, 126, 0, 0.07),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );

    isolation: isolate;

}


/* =========================================================
   CONTAINER
========================================================= */

.cv-container {

    position: relative;

    width: min(1280px, 92%);

    margin: 0 auto;

    z-index: 5;

}


/* =========================================================
   GLOW
========================================================= */

.cv-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

}


.cv-glow-left {

    width: 350px;

    height: 350px;

    left: -180px;

    bottom: -150px;

    background: var(--orange);

    opacity: 0.08;

}


.cv-glow-right {

    width: 420px;

    height: 420px;

    right: -180px;

    top: 160px;

    background: var(--orange);

    opacity: 0.13;

    animation:
        cvGlowMove 7s
        ease-in-out infinite
        alternate;

}


@keyframes cvGlowMove {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-40px, 30px);
    }

}


/* =========================================================
   CIRCLES
========================================================= */

.cv-circle {

    position: absolute;

    border: 1px solid
        rgba(235, 126, 0, 0.35);

    border-radius: 50%;

    pointer-events: none;

}


.cv-circle-left {

    width: 260px;

    height: 260px;

    left: -205px;

    top: 220px;

}


.cv-circle-right {

    width: 250px;

    height: 250px;

    right: -190px;

    bottom: 80px;

}


.cv-circle::after {

    content: "";

    position: absolute;

    inset: 25px;

    border: 1px dashed
        rgba(235, 126, 0, 0.15);

    border-radius: 50%;

}


/* =========================================================
   DOT PATTERNS
========================================================= */

.cv-dots {

    position: absolute;

    width: 90px;

    height: 70px;

    opacity: 0.8;

    background-image:
        radial-gradient(
            var(--orange) 1.4px,
            transparent 1.4px
        );

    background-size: 18px 18px;

    pointer-events: none;

}


.cv-dots-left {

    left: 40px;

    top: 35px;

}


.cv-dots-right {

    right: 45px;

    top: 80px;

}


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

.cv-header {

    text-align: center;

    margin-bottom: 65px;

}


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

.cv-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 16px;

    color: var(--orange);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 5px;

}


.cv-eyebrow span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 15px
        rgba(235, 126, 0, 0.8);

}


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

.cv-title {

    margin: 0;

    color: var(--white);

    font-size:
        clamp(42px, 5.3vw, 72px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -3px;

}


.cv-title span {

    color: var(--orange);

}


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

.cv-title-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin: 20px auto 18px;

}


.cv-title-line i {

    display: block;

    height: 4px;

    border-radius: 20px;

    background: var(--orange);

}


.cv-title-line i:nth-child(1) {

    width: 75px;

}


.cv-title-line i:nth-child(2) {

    width: 8px;

}


.cv-title-line i:nth-child(3) {

    width: 25px;

}


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

.cv-intro {

    max-width: 650px;

    margin: 0 auto;

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

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   GRID
========================================================= */

.cv-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    align-items: stretch;

}


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

.cv-card {

    position: relative;

    min-height: 355px;

    padding: 105px 32px 65px;

    overflow: hidden;

    border:
        1px solid
        rgba(235,126,0,0.15);

    border-bottom:
        3px solid
        var(--orange);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f8f8
        );

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.35);

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

}


.cv-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(235,126,0,0.6);

    box-shadow:
        0 30px 60px
        rgba(0,0,0,0.45),
        0 0 30px
        rgba(235,126,0,0.10);

}


/* =========================================================
   CARD TOP ORANGE LINE
========================================================= */

.cv-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: var(--orange);

    transition:
        width 0.5s ease;

}


.cv-card:hover::before {

    width: 100%;

}


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

.cv-number {

    position: absolute;

    right: 27px;

    top: 23px;

    color:
        rgba(0,0,0,0.055);

    font-size: 42px;

    line-height: 1;

    font-weight: 900;

}


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

.cv-card-dots {

    position: absolute;

    left: 18px;

    top: 18px;

    width: 55px;

    height: 45px;

    opacity: 0.55;

    background-image:
        radial-gradient(
            var(--orange) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

}


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

.cv-icon-wrap {

    position: absolute;

    left: 30px;

    top: 28px;

    width: 82px;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(235,126,0,0.08);

    border:
        1px solid
        rgba(235,126,0,0.25);

    box-shadow:
        0 0 0 7px
        rgba(235,126,0,0.04),
        0 10px 25px
        rgba(235,126,0,0.18);

    transition:
        transform 0.45s ease;

}


.cv-card:hover .cv-icon-wrap {

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

}


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

.cv-icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ff9b28,
            var(--orange)
        );

    color: var(--white);

    box-shadow:
        0 10px 25px
        rgba(235,126,0,0.35);

}


.cv-icon svg {

    width: 37px;

    height: 37px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.cv-card-content {

    position: relative;

    z-index: 2;

}


.cv-card h3 {

    margin: 0 0 13px;

    color:
        var(--dark-text);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;

}


/* =========================================================
   SMALL LINE
========================================================= */

.cv-card-line {

    width: 45px;

    height: 3px;

    margin-bottom: 15px;

    border-radius: 10px;

    background:
        var(--orange);

    transition:
        width 0.4s ease;

}


.cv-card:hover .cv-card-line {

    width: 85px;

}


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

.cv-card p {

    margin: 0;

    color:
        #666666;

    font-size: 14px;

    line-height: 1.7;

}


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

.cv-card-bottom {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    background:
        linear-gradient(
            90deg,
            rgba(235,126,0,0.05),
            rgba(235,126,0,0.13)
        );

}


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

.cv-card-bottom > span {

    color:
        rgba(0,0,0,0.25);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


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

.cv-arrow {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    background:
        var(--white);

    cursor: pointer;

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

}


.cv-arrow:hover {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        translateX(5px);

}


.cv-arrow svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   INDICATORS
========================================================= */

.cv-indicators {

    display: none;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 28px;

}


.cv-indicators span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

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

    transition:
        all 0.3s ease;

}


.cv-indicators span.active {

    width: 25px;

    border-radius: 20px;

    background:
        var(--orange);

}


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

@media (max-width: 1100px) {

    .core-values-section {

        padding:
            80px 0
            90px;

    }


    .cv-grid {

        gap: 18px;

    }


    .cv-card {

        padding:
            100px 25px
            65px;

    }


    .cv-card h3 {

        font-size: 18px;

    }


    .cv-card p {

        font-size: 13px;

    }

}


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

@media (max-width: 850px) {

    .cv-header {

        margin-bottom: 50px;

    }


    .cv-title {

        font-size:
            clamp(38px, 6vw, 54px);

    }


    .cv-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;

    }


    .cv-card {

        min-height: 350px;

    }


    .cv-card:last-child {

        grid-column:
            1 / -1;

        max-width: 500px;

        width: 100%;

        margin: 0 auto;

    }

}


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

@media (max-width: 600px) {

    .core-values-section {

        padding:
            60px 0
            70px;

    }


    .cv-container {

        width: 91%;

    }


    /* Header */

    .cv-header {

        margin-bottom: 40px;

    }


    .cv-eyebrow {

        font-size: 9px;

        letter-spacing: 3px;

        gap: 8px;

    }


    .cv-eyebrow span {

        width: 5px;

        height: 5px;

    }


    .cv-title {

        font-size:
            clamp(34px, 10vw, 48px);

        line-height: 1.08;

        letter-spacing: -1.8px;

    }


    .cv-title br {

        display: none;

    }


    .cv-title-line {

        margin-top: 17px;

    }


    .cv-title-line i:nth-child(1) {

        width: 55px;

    }


    .cv-title-line i:nth-child(3) {

        width: 18px;

    }


    .cv-intro {

        font-size: 13px;

        line-height: 1.65;

    }


    .desktop-break {

        display: none;

    }


    /* Grid */

    .cv-grid {

        display: flex;

        flex-direction: column;

        gap: 22px;

    }


    .cv-card,
    .cv-card:last-child {

        width: 100%;

        max-width: none;

        min-height: 335px;

        grid-column: auto;

        margin: 0;

        padding:
            105px 24px
            65px;

    }


    /* Icon */

    .cv-icon-wrap {

        left: 22px;

        top: 25px;

        width: 76px;

        height: 76px;

    }


    .cv-icon {

        width: 58px;

        height: 58px;

    }


    .cv-icon svg {

        width: 34px;

        height: 34px;

    }


    /* Number */

    .cv-number {

        right: 20px;

        top: 20px;

        font-size: 36px;

    }


    /* Dots */

    .cv-card-dots {

        left: 14px;

        top: 14px;

    }


    /* Content */

    .cv-card h3 {

        font-size: 18px;

    }


    .cv-card p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Indicator */

    .cv-indicators {

        display: flex;

    }


    /* Hide outer decorations */

    .cv-circle-left {

        left: -220px;

    }


    .cv-circle-right {

        right: -220px;

    }


    .cv-dots-left {

        left: 5px;

        top: 20px;

    }


    .cv-dots-right {

        right: 5px;

        top: 45px;

    }

}


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

@media (max-width: 400px) {

    .core-values-section {

        padding:
            50px 0
            60px;

    }


    .cv-container {

        width: 90%;

    }


    .cv-eyebrow {

        font-size: 8px;

        letter-spacing: 2.5px;

    }


    .cv-title {

        font-size: 34px;

    }


    .cv-intro {

        font-size: 12px;

    }


    .cv-card,
    .cv-card:last-child {

        min-height: 320px;

        padding:
            100px 20px
            62px;

    }


    .cv-card h3 {

        font-size: 17px;

    }


    .cv-card p {

        font-size: 12.5px;

    }


    .cv-icon-wrap {

        width: 70px;

        height: 70px;

    }


    .cv-icon {

        width: 54px;

        height: 54px;

    }


    .cv-icon svg {

        width: 31px;

        height: 31px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .cv-glow-right {

        animation: none;

    }


    .cv-card,
    .cv-icon-wrap,
    .cv-card-line,
    .cv-arrow {

        transition: none;

    }

}













/* =========================================================
   GEOKON TEAM INTRO SECTION
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --gray-text: #666666;

}


/* =========================================================
   SECTION
========================================================= */

.team-intro-section {

    position: relative;

    width: 100%;

    padding:
        90px 0
        100px;

    overflow: hidden;

    background:
        var(--white);

    isolation: isolate;

}


/* =========================================================
   CONTAINER
========================================================= */

.team-intro-container {

    width:
        min(1280px, 92%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 75px;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.team-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}


.team-bg-circle-1 {

    width: 520px;

    height: 520px;

    right: -370px;

    top: 80px;

    border:
        1px solid
        rgba(235,126,0,0.13);

}


.team-bg-circle-1::before {

    content: "";

    position: absolute;

    inset: 45px;

    border:
        1px dashed
        rgba(235,126,0,0.10);

    border-radius: 50%;

}


.team-bg-circle-2 {

    width: 280px;

    height: 280px;

    left: -220px;

    bottom: -120px;

    border:
        1px solid
        rgba(0,0,0,0.06);

}


.team-bg-dot-pattern {

    position: absolute;

    width: 100px;

    height: 90px;

    left: 35px;

    top: 45px;

    opacity: 0.45;

    background-image:
        radial-gradient(
            var(--orange) 1.3px,
            transparent 1.3px
        );

    background-size:
        18px 18px;

    pointer-events: none;

}


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

.team-intro-content {

    max-width: 590px;

}


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

.team-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.team-eyebrow-line {

    width: 27px;

    height: 2px;

    background:
        var(--orange);

}


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

.team-intro-title {

    margin: 0;

    color:
        var(--black);

    font-size:
        clamp(48px, 5.2vw, 72px);

    line-height: 1.02;

    letter-spacing: -3.5px;

    font-weight: 900;

}


.team-intro-title span {

    color:
        var(--orange);

}


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

.team-title-accent {

    width: 105px;

    height: 4px;

    margin:
        23px 0
        25px;

    border-radius: 20px;

    background:
        var(--light-gray);

    overflow: hidden;

}


.team-title-accent span {

    display: block;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    animation:
        teamAccent 3s
        ease-in-out infinite
        alternate;

}


@keyframes teamAccent {

    from {
        width: 30%;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   LEAD PARAGRAPH
========================================================= */

.team-intro-lead {

    margin:
        0 0 18px;

    max-width: 590px;

    color:
        var(--dark-text);

    font-size: 18px;

    line-height: 1.65;

    font-weight: 600;

}


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

.team-intro-description {

    margin: 0;

    max-width: 590px;

    color:
        var(--gray-text);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   STATS
========================================================= */

.team-mini-stats {

    display: flex;

    align-items: center;

    gap: 0;

    margin-top: 28px;

    padding:
        15px 0;

    border-top:
        1px solid
        var(--light-gray);

    border-bottom:
        1px solid
        var(--light-gray);

}


.team-stat {

    min-width: 105px;

    padding:
        0 20px;

    border-right:
        1px solid
        #dddddd;

}


.team-stat:first-child {

    padding-left: 0;

}


.team-stat:last-child {

    border-right: 0;

}


.team-stat strong {

    display: block;

    color:
        var(--orange);

    font-size: 23px;

    line-height: 1;

    font-weight: 900;

}


.team-stat span {

    display: block;

    margin-top: 5px;

    color:
        #888888;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


/* =========================================================
   BUTTONS
========================================================= */

.team-intro-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


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

.team-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        13px 16px
        13px 21px;

    border:
        1px solid
        var(--orange);

    border-radius: 5px;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

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

}


.team-primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 25px
        rgba(235,126,0,0.25);

}


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

.team-secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        13px 16px
        13px 21px;

    border:
        1px solid
        var(--black);

    border-radius: 5px;

    color:
        var(--white);

    background:
        var(--black);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

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

}


.team-secondary-btn:hover {

    transform:
        translateY(-4px);

    background:
        var(--orange);

    border-color:
        var(--orange);

    box-shadow:
        0 12px 25px
        rgba(235,126,0,0.22);

}


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

.team-btn-arrow {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 14px;

    transition:
        transform 0.3s ease;

}


.team-primary-btn:hover
.team-btn-arrow,
.team-secondary-btn:hover
.team-btn-arrow {

    transform:
        translateX(3px);

}


/* =========================================================
   RIGHT COLLAGE WRAPPER
========================================================= */

.team-collage-wrapper {

    position: relative;

    padding:
        20px;

    border:
        1px solid
        rgba(0,0,0,0.08);

    border-radius: 8px;

    background:
        #fafafa;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.10);

}


/* =========================================================
   ORANGE FRAME
========================================================= */

.team-collage-frame {

    position: absolute;

    inset: 7px;

    border:
        1px solid
        rgba(235,126,0,0.28);

    border-radius: 6px;

    pointer-events: none;

    z-index: 10;

}


/* =========================================================
   COLLAGE TOP
========================================================= */

.team-collage-top {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

    padding:
        0 4px;

}


.team-collage-top span {

    display: block;

    color:
        var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

}


.team-collage-top strong {

    display: block;

    margin-top: 4px;

    color:
        var(--dark-text);

    font-size: 13px;

    font-weight: 800;

}


.team-count {

    text-align: right;

}


.team-count strong {

    display: block;

    margin: 0;

    color:
        var(--black);

    font-size: 22px;

}


.team-count span {

    margin: 3px 0 0;

    color:
        #999999;

    font-size: 7px;

    letter-spacing: 1px;

}


/* =========================================================
   TEAM GRID
========================================================= */

.team-collage {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 4px;

    z-index: 2;

}


/* =========================================================
   MEMBER
========================================================= */

.team-member {

    position: relative;

    aspect-ratio: 1 / 1.04;

    overflow: hidden;

    background:
        #dddddd;

    cursor: pointer;

}


.team-member img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s
        cubic-bezier(.2,.7,.2,1),
        filter 0.4s ease;

}


.team-member:hover img {

    transform:
        scale(1.09);

    filter:
        saturate(1.1)
        contrast(1.03);

}


/* =========================================================
   MEMBER OVERLAY
========================================================= */

.team-member-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    padding: 8px;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0,0,0,0.65)
        );

    transition:
        opacity 0.35s ease;

}


.team-member:hover
.team-member-overlay {

    opacity: 1;

}


.team-member-overlay span {

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

}


/* =========================================================
   COLLAGE BOTTOM
========================================================= */

.team-collage-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 13px;

    color:
        #999999;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.team-status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 4px
        rgba(235,126,0,0.10);

}


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

@media (max-width: 1100px) {

    .team-intro-container {

        gap: 50px;

    }


    .team-intro-lead {

        font-size: 16px;

    }


    .team-intro-description {

        font-size: 13px;

    }


    .team-collage-wrapper {

        padding: 16px;

    }

}


/* =========================================================
   SMALL LAPTOP / TABLET
========================================================= */

@media (max-width: 850px) {

    .team-intro-section {

        padding:
            70px 0
            80px;

    }


    .team-intro-container {

        grid-template-columns:
            1fr;

        gap: 60px;

    }


    .team-intro-content {

        max-width: 700px;

    }


    .team-collage-wrapper {

        width:
            min(720px, 100%);

        margin:
            0 auto;

    }

}


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

@media (max-width: 600px) {

    .team-intro-section {

        padding:
            55px 0
            65px;

    }


    .team-intro-container {

        width: 91%;

        gap: 45px;

    }


    /* Eyebrow */

    .team-eyebrow {

        font-size: 8px;

        letter-spacing: 1.8px;

    }


    .team-eyebrow-line {

        width: 20px;

    }


    /* Heading */

    .team-intro-title {

        font-size:
            clamp(42px, 13vw, 58px);

        letter-spacing: -2.5px;

    }


    .team-title-accent {

        width: 85px;

        height: 4px;

        margin:
            18px 0
            20px;

    }


    /* Text */

    .team-intro-lead {

        font-size: 14px;

        line-height: 1.7;

    }


    .team-intro-description {

        font-size: 12.5px;

        line-height: 1.75;

    }


    /* Stats */

    .team-mini-stats {

        margin-top: 22px;

        padding:
            13px 0;

    }


    .team-stat {

        min-width: 0;

        flex: 1;

        padding:
            0 10px;

    }


    .team-stat strong {

        font-size: 19px;

    }


    .team-stat span {

        font-size: 7px;

        line-height: 1.3;

    }


    /* Buttons */

    .team-intro-buttons {

        gap: 9px;

        margin-top: 25px;

    }


    .team-primary-btn,
    .team-secondary-btn {

        padding:
            11px 13px
            11px 16px;

        font-size: 9px;

        gap: 9px;

    }


    .team-btn-arrow {

        width: 22px;

        height: 22px;

        font-size: 11px;

    }


    /* Collage */

    .team-collage-wrapper {

        padding: 13px;

        border-radius: 7px;

    }


    .team-collage-frame {

        inset: 5px;

    }


    .team-collage-top {

        margin-bottom: 10px;

    }


    .team-collage-top strong {

        font-size: 11px;

    }


    .team-collage-top span {

        font-size: 6px;

        letter-spacing: 1.5px;

    }


    .team-count strong {

        font-size: 18px;

    }


    .team-count span {

        font-size: 6px;

    }


    /* Grid */

    .team-collage {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 3px;

    }


    .team-member {

        aspect-ratio:
            1 / 1.12;

    }


    .team-member-overlay {

        display: none;

    }


    .team-collage-bottom {

        margin-top: 9px;

        font-size: 5.5px;

        letter-spacing: 1.2px;

    }

}


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

@media (max-width: 400px) {

    .team-intro-container {

        width: 90%;

    }


    .team-intro-title {

        font-size: 40px;

    }


    .team-intro-lead {

        font-size: 13.5px;

    }


    .team-intro-description {

        font-size: 12px;

    }


    .team-stat strong {

        font-size: 17px;

    }


    .team-stat span {

        font-size: 6px;

    }


    .team-primary-btn,
    .team-secondary-btn {

        font-size: 8px;

        padding:
            10px 12px;

    }


    .team-collage-wrapper {

        padding: 10px;

    }


    .team-collage {

        gap: 2px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .team-title-accent span {

        animation: none;

    }


    .team-member img {

        transition: none;

    }


    .team-primary-btn,
    .team-secondary-btn {

        transition: none;

    }

}




/* company registration */


/* =========================================================
   GEOKON / COMPANY REGISTRATION SECTION
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.geo-reg-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    padding:
        75px 0
        85px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 82% 45%,
            rgba(235,126,0,0.15),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(235,126,0,0.08),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #070707 0%,
            #111111 50%,
            #050505 100%
        );

    color:
        var(--white);

    isolation: isolate;

}


/* =========================================================
   CONTAINER
========================================================= */

.geo-reg-container {

    position: relative;

    width:
        min(1380px, 92%);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        0.88fr 1.12fr;

    align-items: center;

    gap: 75px;

    z-index: 5;

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.geo-reg-grid {

    position: absolute;

    inset: 0;

    z-index: -5;

    opacity: 0.17;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.07) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 90%
        );

}


/* =========================================================
   GLOW
========================================================= */

.geo-reg-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(90px);

    pointer-events: none;

    z-index: -4;

}


.geo-reg-glow-one {

    width: 420px;

    height: 420px;

    right: -120px;

    top: 70px;

    background:
        var(--orange);

    opacity: 0.13;

    animation:
        geoRegGlowOne 8s
        ease-in-out infinite
        alternate;

}


.geo-reg-glow-two {

    width: 280px;

    height: 280px;

    left: -100px;

    bottom: -130px;

    background:
        var(--orange);

    opacity: 0.08;

}


@keyframes geoRegGlowOne {

    from {

        transform:
            translate(0, 0);

    }

    to {

        transform:
            translate(-45px, 30px);

    }

}


/* =========================================================
   CIRCLES
========================================================= */

.geo-reg-circle {

    position: absolute;

    border:
        1px solid
        rgba(235,126,0,0.25);

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

}


.geo-reg-circle-one {

    width: 330px;

    height: 330px;

    right: -230px;

    top: 100px;

}


.geo-reg-circle-two {

    width: 180px;

    height: 180px;

    left: -125px;

    bottom: 40px;

}


.geo-reg-circle::after {

    content: "";

    position: absolute;

    inset: 28px;

    border:
        1px dashed
        rgba(235,126,0,0.14);

    border-radius: 50%;

}


/* =========================================================
   LEFT COLUMN
========================================================= */

.geo-reg-left {

    max-width: 580px;

}


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

.geo-reg-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

}


.geo-reg-eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.12),

        0 0 18px
        rgba(235,126,0,0.6);

}


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

.geo-reg-title {

    margin: 0;

    max-width: 650px;

    color:
        var(--white);

    font-size:
        clamp(48px, 5.6vw, 78px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -4px;

}


.geo-reg-title span {

    display: block;

    color:
        var(--orange);

}


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

.geo-reg-title-line {

    width: 105px;

    height: 4px;

    margin:
        25px 0
        28px;

    border-radius: 30px;

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

    overflow: hidden;

}


.geo-reg-title-line span {

    display: block;

    width: 75%;

    height: 100%;

    background:
        var(--orange);

    animation:
        geoRegTitleLine 3s
        ease-in-out infinite
        alternate;

}


@keyframes geoRegTitleLine {

    from {
        width: 30%;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   PRICE
========================================================= */

.geo-reg-price {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 10px;

}


.geo-reg-price-label {

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

    font-size: 14px;

}


.geo-reg-price strong {

    color:
        var(--orange);

    font-size:
        clamp(28px, 3vw, 40px);

    line-height: 1;

    font-weight: 900;

}


.geo-reg-price-note {

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

    font-size: 11px;

}


/* =========================================================
   RATING
========================================================= */

.geo-reg-rating-box {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 50px;

}


/* Google-like G */

.geo-reg-google-logo {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.geo-reg-google-g {

    font-family:
        Arial,
        sans-serif;

    font-size: 55px;

    line-height: 1;

    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #4285f4 0%,
            #34a853 35%,
            #fbbc05 60%,
            #ea4335 85%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* Rating content */

.geo-reg-rating-content > span {

    display: block;

    margin-bottom: 6px;

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

    font-size: 13px;

}


.geo-reg-rating-row {

    display: flex;

    align-items: center;

    gap: 10px;

}


.geo-reg-rating-row strong {

    color:
        var(--white);

    font-size: 23px;

    line-height: 1;

}


.geo-reg-stars {

    display: flex;

    gap: 2px;

    color:
        #ffc107;

    font-size: 20px;

}


/* =========================================================
   STATS
========================================================= */

.geo-reg-stats {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    margin-top: 28px;

}


.geo-reg-stat-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 82px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.95),
            rgba(245,245,245,0.90)
        );

    color:
        var(--dark-text);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,0.22);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;

}


.geo-reg-stat-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(235,126,0,0.5);

}


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

.geo-reg-stat-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color:
        var(--orange);

    background:
        rgba(235,126,0,0.10);

}


.geo-reg-stat-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.geo-reg-stat-card strong {

    display: block;

    color:
        var(--orange);

    font-size: 26px;

    line-height: 1;

    font-weight: 900;

}


.geo-reg-stat-card span {

    display: block;

    margin-top: 6px;

    color:
        #555555;

    font-size: 11px;

}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.geo-reg-right {

    width: 100%;

}


/* =========================================================
   INCLUDED BOX
========================================================= */

.geo-reg-included {

    position: relative;

    padding:
        23px 27px
        25px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.035)
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    overflow: hidden;

}


.geo-reg-included::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    right: -75px;

    top: -75px;

    border-radius: 50%;

    background:
        rgba(235,126,0,0.13);

}


/* =========================================================
   INCLUDED HEADING
========================================================= */

.geo-reg-included-heading {

    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        var(--orange);

    font-size: 21px;

    font-weight: 900;

}


.geo-reg-live-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.10),

        0 0 14px
        rgba(235,126,0,0.7);

}


/* =========================================================
   INCLUDED GRID
========================================================= */

.geo-reg-included-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px 35px;

}


.geo-reg-included ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.geo-reg-included li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    min-height: 30px;

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

    font-size: 12.5px;

    line-height: 1.45;

}


.geo-reg-included li span {

    flex-shrink: 0;

    color:
        var(--orange);

    font-size: 17px;

    line-height: 1;

    font-weight: 900;

}


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

.geo-reg-form-card {

    margin-top: 24px;

    padding:
        28px;

    border-radius: 22px;

    background:
        var(--white);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.30);

}


/* =========================================================
   FORM HEADING
========================================================= */

.geo-reg-form-tag {

    display: block;

    margin-bottom: 7px;

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

}


.geo-reg-form-heading h3 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(27px, 3vw, 34px);

    line-height: 1.1;

    font-weight: 900;

}


.geo-reg-form-heading h3 span {

    color:
        var(--orange);

}


.geo-reg-form-heading p {

    margin:
        8px 0 20px;

    color:
        #777777;

    font-size: 12px;

}


/* =========================================================
   FORM
========================================================= */

.geo-reg-form {

    width: 100%;

}


/* =========================================================
   INPUT GRID
========================================================= */

.geo-reg-input-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


/* =========================================================
   INPUT GROUP
========================================================= */

.geo-reg-input-group {

    position: relative;

}


.geo-reg-input-group label {

    position: absolute;

    left: 14px;

    top: -7px;

    padding:
        0 5px;

    color:
        var(--orange);

    background:
        var(--white);

    font-size: 8px;

    font-weight: 800;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;

}


.geo-reg-input-group input {

    width: 100%;

    height: 58px;

    padding:
        0 17px;

    border:
        1px solid
        #d5d9de;

    border-radius: 13px;

    outline: none;

    color:
        var(--dark-text);

    background:
        #fafafa;

    font-family:
        inherit;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.geo-reg-input-group input::placeholder {

    color:
        #90959c;

}


.geo-reg-input-group input:focus {

    border-color:
        var(--orange);

    background:
        var(--white);

    box-shadow:
        0 0 0 4px
        rgba(235,126,0,0.08);

}


.geo-reg-input-group input:focus
~ label {

    opacity: 1;

}


/* =========================================================
   INPUT ERROR
========================================================= */

.geo-reg-input-group.has-error input {

    border-color:
        #d93025;

}


.geo-reg-error {

    display: block;

    min-height: 15px;

    padding:
        4px 5px 0;

    color:
        #d93025;

    font-size: 9px;

}


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

.geo-reg-submit {

    position: relative;

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 3px;

    padding:
        12px 20px;

    border:
        0;

    border-radius: 13px;

    color:
        var(--white);

    background:
        linear-gradient(
            100deg,
            var(--orange),
            #ff9c26
        );

    box-shadow:
        0 12px 25px
        rgba(235,126,0,0.24);

    cursor: pointer;

    font-family:
        inherit;

    font-size: 15px;

    font-weight: 900;

    overflow: hidden;

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

}


.geo-reg-submit::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,255,255,0.22),
            transparent 75%
        );

    transform:
        translateX(-120%);

    transition:
        transform 0.65s ease;

}


.geo-reg-submit:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(235,126,0,0.30);

}


.geo-reg-submit:hover::before {

    transform:
        translateX(120%);

}


.geo-reg-submit > span {

    position: relative;

    z-index: 2;

}


.geo-reg-submit-arrow {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--orange);

    background:
        var(--white);

    transition:
        transform 0.3s ease;

}


.geo-reg-submit:hover
.geo-reg-submit-arrow {

    transform:
        translateX(5px);

}


/* =========================================================
   SUCCESS
========================================================= */

.geo-reg-success {

    display: none;

    margin-top: 13px;

    padding: 11px 14px;

    border-radius: 9px;

    color:
        #247a35;

    background:
        #edf9ef;

    font-size: 11px;

    font-weight: 700;

}


.geo-reg-success.show {

    display: block;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.geo-reg-bottom-line {

    position: absolute;

    left: 50%;

    bottom: 20px;

    width:
        min(500px, 70%);

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 7px;

    letter-spacing: 2px;

}


.geo-reg-bottom-line span {

    flex: 1;

    height: 1px;

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

}


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

@media (max-width: 1100px) {

    .geo-reg-container {

        gap: 45px;

    }


    .geo-reg-title {

        font-size:
            clamp(45px, 5.8vw, 65px);

    }


    .geo-reg-included {

        padding:
            21px;

    }


    .geo-reg-included-grid {

        gap:
            8px 20px;

    }


    .geo-reg-included li {

        font-size: 11.5px;

    }

}


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

@media (max-width: 850px) {

    .geo-reg-section {

        padding:
            70px 0
            80px;

    }


    .geo-reg-container {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .geo-reg-left {

        max-width: 700px;

    }


    .geo-reg-right {

        width:
            min(700px, 100%);

        margin:
            0 auto;

    }


    .geo-reg-bottom-line {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .geo-reg-section {

        padding:
            55px 0
            65px;

    }


    .geo-reg-container {

        width: 91%;

        gap: 45px;

    }


    /* Eyebrow */

    .geo-reg-eyebrow {

        font-size: 8px;

        letter-spacing: 2px;

    }


    .geo-reg-eyebrow-dot {

        width: 6px;

        height: 6px;

    }


    /* Heading */

    .geo-reg-title {

        font-size:
            clamp(40px, 12vw, 55px);

        letter-spacing: -2.5px;

    }


    .geo-reg-title-line {

        width: 85px;

        margin:
            20px 0
            23px;

    }


    /* Price */

    .geo-reg-price {

        gap: 7px;

    }


    .geo-reg-price-label {

        font-size: 12px;

    }


    .geo-reg-price strong {

        font-size: 28px;

    }


    .geo-reg-price-note {

        width: 100%;

        font-size: 9px;

        margin-left: 0;

    }


    /* Rating */

    .geo-reg-rating-box {

        margin-top: 35px;

        gap: 10px;

    }


    .geo-reg-google-logo {

        width: 48px;

        height: 48px;

    }


    .geo-reg-google-g {

        font-size: 43px;

    }


    .geo-reg-rating-content > span {

        font-size: 10px;

    }


    .geo-reg-rating-row strong {

        font-size: 19px;

    }


    .geo-reg-stars {

        font-size: 16px;

    }


    /* Stats */

    .geo-reg-stats {

        gap: 10px;

        margin-top: 23px;

    }


    .geo-reg-stat-card {

        min-height: 73px;

        gap: 9px;

        padding:
            9px 10px;

        border-radius: 13px;

    }


    .geo-reg-stat-icon {

        width: 35px;

        height: 35px;

        border-radius: 8px;

    }


    .geo-reg-stat-icon svg {

        width: 19px;

        height: 19px;

    }


    .geo-reg-stat-card strong {

        font-size: 20px;

    }


    .geo-reg-stat-card span {

        font-size: 8px;

        line-height: 1.3;

    }


    /* Included */

    .geo-reg-included {

        padding:
            19px 17px;

        border-radius: 17px;

    }


    .geo-reg-included-heading {

        font-size: 18px;

        margin-bottom: 15px;

    }


    .geo-reg-included-grid {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .geo-reg-included li {

        min-height: auto;

        padding:
            5px 0;

        font-size: 11px;

    }


    .geo-reg-included li span {

        font-size: 15px;

    }


    /* Form */

    .geo-reg-form-card {

        margin-top: 16px;

        padding:
            21px 17px;

        border-radius: 18px;

    }


    .geo-reg-form-heading h3 {

        font-size: 26px;

    }


    .geo-reg-form-heading p {

        font-size: 10px;

        line-height: 1.5;

        margin-bottom: 17px;

    }


    .geo-reg-input-grid {

        grid-template-columns:
            1fr;

        gap: 3px;

    }


    .geo-reg-input-group input {

        height: 52px;

        border-radius: 11px;

        font-size: 12px;

    }


    .geo-reg-submit {

        min-height: 53px;

        border-radius: 11px;

        font-size: 13px;

    }


    .geo-reg-submit-arrow {

        width: 24px;

        height: 24px;

    }

}


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

@media (max-width: 400px) {

    .geo-reg-container {

        width: 90%;

    }


    .geo-reg-title {

        font-size: 38px;

    }


    .geo-reg-price strong {

        font-size: 25px;

    }


    .geo-reg-stats {

        grid-template-columns:
            1fr;

    }


    .geo-reg-stat-card {

        min-height: 68px;

    }


    .geo-reg-included li {

        font-size: 10px;

    }


    .geo-reg-form-card {

        padding:
            19px 14px;

    }


    .geo-reg-form-heading h3 {

        font-size: 23px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .geo-reg-glow-one,
    .geo-reg-title-line span {

        animation: none;

    }


    .geo-reg-submit,
    .geo-reg-stat-card {

        transition: none;

    }

}




/* =========================================================
   GEO BLOG ARTICLE SECTION
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.geo-blog-section {

    position: relative;

    width: 100%;

    padding:
        65px 0
        90px;

    background:
        var(--white);

    color:
        var(--dark-text);

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   READING PROGRESS
========================================================= */

.geo-blog-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    z-index: 9999;

    background:
        rgba(0,0,0,0.06);

}


.geo-blog-progress span {

    display: block;

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    transition:
        width 0.08s linear;

}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.geo-blog-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

}


.geo-blog-orb-one {

    width: 420px;

    height: 420px;

    top: 120px;

    right: -270px;

    border:
        1px solid
        rgba(235,126,0,0.13);

}


.geo-blog-orb-one::before {

    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px dashed
        rgba(235,126,0,0.12);

    border-radius: 50%;

}


.geo-blog-orb-two {

    width: 260px;

    height: 260px;

    bottom: 100px;

    left: -190px;

    background:
        rgba(235,126,0,0.035);

}


/* =========================================================
   DOT PATTERN
========================================================= */

.geo-blog-dot-pattern {

    position: absolute;

    top: 90px;

    right: 40px;

    width: 90px;

    height: 90px;

    opacity: .55;

    background-image:

        radial-gradient(
            var(--orange) 1.2px,
            transparent 1.2px
        );

    background-size:
        16px 16px;

    z-index: -1;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.geo-blog-container {

    width:
        min(1400px, 92%);

    margin:
        0 auto;

}


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

.geo-blog-header {

    margin-bottom: 45px;

}


/* =========================================================
   CATEGORY
========================================================= */

.geo-blog-category {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.geo-blog-category-line {

    width: 30px;

    height: 3px;

    border-radius: 20px;

    background:
        var(--orange);

}


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

.geo-blog-title {

    max-width: 1250px;

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(38px, 4.5vw, 66px);

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -2.8px;

}


.geo-blog-title span {

    background:
        linear-gradient(
            90deg,
            #12618b,
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   HEADING LINE
========================================================= */

.geo-blog-heading-line {

    width: 120px;

    height: 4px;

    margin:
        20px 0
        20px;

    border-radius: 20px;

    background:
        var(--light-gray);

    overflow: hidden;

}


.geo-blog-heading-line span {

    display: block;

    width: 75%;

    height: 100%;

    background:
        var(--orange);

    animation:
        geoBlogLineAnimation
        3s
        ease-in-out
        infinite
        alternate;

}


@keyframes geoBlogLineAnimation {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   META
========================================================= */

.geo-blog-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    color:
        #666666;

    font-size: 13px;

}


.geo-blog-author,
.geo-blog-updated {

    display: flex;

    align-items: center;

    gap: 7px;

}


.geo-blog-meta-label {

    color:
        #333333;

    font-weight: 700;

}


.geo-blog-author strong {

    color:
        var(--orange);

    font-weight: 700;

}


.geo-blog-updated strong {

    color:
        #444444;

    font-weight: 600;

}


.geo-blog-meta-divider {

    width: 1px;

    height: 17px;

    background:
        #cccccc;

}


.geo-blog-reading-time {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: 5px;

    padding:
        6px 11px;

    border:
        1px solid
        #e4e4e4;

    border-radius: 20px;

    color:
        #777777;

    font-size: 10px;

}


.geo-blog-clock-icon {

    color:
        var(--orange);

    font-size: 13px;

}


/* =========================================================
   ARTICLE LAYOUT
========================================================= */

.geo-blog-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap: 70px;

    align-items: start;

}


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

.geo-blog-content {

    max-width: 900px;

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.geo-blog-content p {

    margin:
        0 0 22px;

    color:
        #303030;

    font-size:
        clamp(16px, 1.3vw, 19px);

    line-height: 1.82;

}


.geo-blog-content .geo-blog-intro {

    color:
        #181818;

    font-size:
        clamp(19px, 1.5vw, 21px);

    line-height: 1.78;

    font-weight: 500;

}


/* =========================================================
   H2
========================================================= */

.geo-blog-content h2 {

    position: relative;

    margin:
        42px 0
        18px;

    padding-left: 18px;

    color:
        var(--dark-text);

    font-size:
        clamp(25px, 2.4vw, 35px);

    line-height: 1.2;

    font-weight: 900;

}


.geo-blog-content h2::before {

    content: "";

    position: absolute;

    left: 0;

    top: 5px;

    width: 5px;

    height: calc(100% - 10px);

    border-radius: 5px;

    background:
        var(--orange);

}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.geo-blog-highlight {

    position: relative;

    display: flex;

    gap: 17px;

    margin:
        35px 0;

    padding:
        23px 25px;

    border:
        1px solid
        rgba(235,126,0,0.20);

    border-left:
        4px solid
        var(--orange);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #fffaf5,
            #ffffff
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.06);

}


.geo-blog-highlight-icon {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 20px;

    font-weight: 900;

}


.geo-blog-highlight strong {

    display: block;

    margin-bottom: 6px;

    color:
        var(--dark-text);

    font-size: 16px;

}


.geo-blog-highlight p {

    margin: 0;

    color:
        #666666;

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   BUSINESS TYPES
========================================================= */

.geo-blog-business-types {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 25px;

}


.geo-blog-type {

    position: relative;

    min-height: 110px;

    padding:
        18px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 10px;

    background:
        var(--white);

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.geo-blog-type::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 70px;

    right: -30px;

    bottom: -30px;

    border-radius: 50%;

    background:
        rgba(235,126,0,0.08);

}


.geo-blog-type:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(235,126,0,0.45);

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

}


.geo-blog-type span {

    display: block;

    margin-bottom: 18px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.geo-blog-type strong {

    display: block;

    max-width: 170px;

    color:
        var(--dark-text);

    font-size: 13px;

    line-height: 1.4;

}


/* =========================================================
   SIDEBAR
========================================================= */

.geo-blog-sidebar {

    position: sticky;

    top: 35px;

}


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

.geo-blog-video-card {

    overflow: hidden;

    border:
        1px solid
        rgba(0,0,0,0.10);

    border-radius: 16px;

    background:
        var(--white);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.14);

}


/* =========================================================
   VIDEO
========================================================= */

.geo-blog-video {

    position: relative;

    height: 475px;

    overflow: hidden;

    background:
        #111111;

}


.geo-blog-video img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease;

}


.geo-blog-video-card:hover
.geo-blog-video img {

    transform:
        scale(1.04);

}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.geo-blog-video-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.22),
            rgba(0,0,0,0.02) 35%,
            rgba(0,0,0,0.70)
        );

}


/* =========================================================
   VIDEO LABEL
========================================================= */

.geo-blog-video-label {

    position: absolute;

    top: 18px;

    left: 18px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 11px;

    border-radius: 30px;

    color:
        var(--white);

    background:
        rgba(0,0,0,0.58);

    backdrop-filter:
        blur(8px);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.geo-blog-video-label span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 10px
        var(--orange);

}


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

.geo-blog-play {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 72px;

    height: 72px;

    transform:
        translate(-50%, -50%);

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid
        rgba(255,255,255,0.9);

    border-radius: 50%;

    background:
        rgba(235,126,0,0.95);

    cursor: pointer;

    box-shadow:
        0 0 0 0
        rgba(235,126,0,0.5);

    animation:
        geoBlogPulse
        2s
        infinite;

    transition:
        transform .3s ease,
        background .3s ease;

}


.geo-blog-play:hover {

    transform:
        translate(-50%, -50%)
        scale(1.12);

    background:
        var(--black);

}


.geo-blog-play span {

    width: 0;

    height: 0;

    margin-left: 5px;

    border-top:
        11px solid
        transparent;

    border-bottom:
        11px solid
        transparent;

    border-left:
        17px solid
        var(--white);

}


@keyframes geoBlogPulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(235,126,0,0.55);

    }

    70% {

        box-shadow:
            0 0 0 17px
            rgba(235,126,0,0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(235,126,0,0);

    }

}


/* =========================================================
   DURATION
========================================================= */

.geo-blog-duration {

    position: absolute;

    right: 15px;

    top: 17px;

    padding:
        6px 8px;

    border-radius: 5px;

    color:
        var(--white);

    background:
        rgba(0,0,0,0.60);

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   VIDEO CAPTION
========================================================= */

.geo-blog-video-caption {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 22px;

    color:
        var(--white);

}


.geo-blog-video-caption strong {

    display: block;

    max-width: 280px;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    line-height: 1.12;

}


.geo-blog-video-caption span {

    display: block;

    margin-top: 7px;

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

    font-size: 10px;

}


/* =========================================================
   VIDEO FOOTER
========================================================= */

.geo-blog-video-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        15px 17px;

}


.geo-blog-video-footer span {

    display: block;

    margin-bottom: 3px;

    color:
        var(--orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.geo-blog-video-footer strong {

    color:
        var(--dark-text);

    font-size: 12px;

}


.geo-blog-video-arrow {

    width: 33px;

    height: 33px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--black);

    transition:
        transform .3s ease,
        background .3s ease;

}


.geo-blog-video-card:hover
.geo-blog-video-arrow {

    transform:
        translateX(4px);

    background:
        var(--orange);

}


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

.geo-blog-quick-card {

    margin-top: 18px;

    padding:
        20px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 13px;

    background:
        #fafafa;

}


.geo-blog-quick-heading {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color:
        var(--dark-text);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.geo-blog-quick-heading span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--orange);

}


.geo-blog-quick-item {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        #e7e7e7;

    color:
        #555555;

    font-size: 11px;

}


.geo-blog-quick-item:last-child {

    border-bottom: 0;

}


.geo-blog-quick-item span {

    color:
        var(--orange);

    font-weight: 900;

}


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

@media (max-width: 1050px) {

    .geo-blog-layout {

        grid-template-columns:
            minmax(0, 1fr)
            310px;

        gap: 40px;

    }


    .geo-blog-video {

        height: 420px;

    }


    .geo-blog-title {

        font-size:
            clamp(37px, 5vw, 58px);

    }

}


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

@media (max-width: 800px) {

    .geo-blog-section {

        padding:
            55px 0
            70px;

    }


    .geo-blog-layout {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .geo-blog-content {

        max-width: 100%;

    }


    .geo-blog-sidebar {

        position: relative;

        top: auto;

        width:
            min(500px, 100%);

        margin:
            0 auto;

    }


    .geo-blog-video {

        height: 500px;

    }


    .geo-blog-business-types {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


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

@media (max-width: 600px) {

    .geo-blog-section {

        padding:
            45px 0
            60px;

    }


    .geo-blog-container {

        width: 91%;

    }


    /* Category */

    .geo-blog-category {

        font-size: 8px;

        letter-spacing: 1.8px;

    }


    .geo-blog-category-line {

        width: 22px;

        height: 2px;

    }


    /* Title */

    .geo-blog-title {

        font-size:
            clamp(32px, 9.5vw, 46px);

        line-height: 1.08;

        letter-spacing: -1.7px;

    }


    .geo-blog-heading-line {

        width: 85px;

        height: 3px;

        margin:
            17px 0;

    }


    /* Meta */

    .geo-blog-meta {

        gap: 8px;

        font-size: 10px;

    }


    .geo-blog-meta-divider {

        height: 14px;

    }


    .geo-blog-reading-time {

        margin-left: 0;

        padding:
            5px 8px;

        font-size: 8px;

    }


    /* Article */

    .geo-blog-content p {

        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 18px;

    }


    .geo-blog-content .geo-blog-intro {

        font-size: 16px;

        line-height: 1.72;

    }


    .geo-blog-content h2 {

        font-size: 25px;

        margin:
            34px 0
            17px;

    }


    /* Highlight */

    .geo-blog-highlight {

        gap: 11px;

        padding:
            17px;

        margin:
            25px 0;

    }


    .geo-blog-highlight-icon {

        width: 31px;

        height: 31px;

        font-size: 16px;

    }


    .geo-blog-highlight strong {

        font-size: 13px;

    }


    .geo-blog-highlight p {

        font-size: 10px;

    }


    /* Business cards */

    .geo-blog-business-types {

        grid-template-columns:
            1fr;

        gap: 8px;

    }


    .geo-blog-type {

        min-height: 80px;

        padding: 14px;

    }


    .geo-blog-type span {

        margin-bottom: 10px;

    }


    .geo-blog-type strong {

        font-size: 12px;

    }


    /* Sidebar */

    .geo-blog-sidebar {

        width: 100%;

    }


    .geo-blog-video {

        height:
            min(125vw, 520px);

    }


    .geo-blog-video-caption strong {

        font-size: 23px;

    }


    .geo-blog-play {

        width: 64px;

        height: 64px;

    }


    .geo-blog-play span {

        border-top-width: 9px;

        border-bottom-width: 9px;

        border-left-width: 14px;

    }


    .geo-blog-quick-card {

        padding: 16px;

    }

}


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

@media (max-width: 380px) {

    .geo-blog-title {

        font-size: 31px;

    }


    .geo-blog-meta {

        font-size: 9px;

    }


    .geo-blog-content p {

        font-size: 13px;

    }


    .geo-blog-content .geo-blog-intro {

        font-size: 15px;

    }


    .geo-blog-video {

        height: 430px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .geo-blog-heading-line span,
    .geo-blog-play {

        animation: none;

    }


    .geo-blog-video img,
    .geo-blog-type {

        transition: none;

    }

}






/* =========================================================
   GEO PROCESS SECTION
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.geo-process-section {

    position: relative;

    width: 100%;

    background:
        #ffffff;

    color:
        var(--dark-text);

    overflow: hidden;

}


/* =========================================================
   READING PROGRESS
========================================================= */

.geo-process-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        rgba(0,0,0,0.06);

    z-index: 9999;

}


.geo-process-progress span {

    display: block;

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.geo-process-toc {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(0,0,0,0.96);

    border-bottom:
        3px solid
        var(--orange);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.13);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.geo-process-toc-inner {

    width:
        min(1450px, 94%);

    min-height: 68px;

    margin:
        0 auto;

    display: flex;

    align-items: center;

}


.geo-process-toc-label {

    position: relative;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    height: 40px;

    padding-right: 25px;

    color:
        var(--white);

    font-size: 14px;

    font-weight: 900;

    white-space: nowrap;

}


.geo-process-toc-label::after {

    content: "›";

    color:
        var(--orange);

    font-size: 26px;

    line-height: 1;

}


.geo-process-toc-icon {

    display: none;

}


/* =========================================================
   TOC LIST
========================================================= */

.geo-process-toc-list {

    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

}


.geo-process-toc-link {

    position: relative;

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0 22px;

    border-left:
        1px solid
        rgba(255,255,255,0.18);

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

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        color .25s ease,
        background .25s ease;

}


.geo-process-toc-link:hover {

    color:
        var(--white);

    background:
        rgba(235,126,0,0.08);

}


.geo-process-toc-link.active {

    color:
        var(--orange);

}


.geo-process-toc-link.active::after {

    content: "";

    position: absolute;

    left: 18px;

    right: 18px;

    bottom: -15px;

    height: 3px;

    border-radius: 20px;

    background:
        var(--orange);

}


/* =========================================================
   CONTAINER
========================================================= */

.geo-process-container {

  
    margin:
        0 auto;

    padding:
        55px 0
        100px;

}


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

.geo-process-header {

    max-width: 1250px;

    margin:
        0 auto 45px;

    text-align: center;

}


.geo-process-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.geo-process-kicker::before,
.geo-process-kicker::after {

    content: "";

    width: 24px;

    height: 2px;

    background:
        var(--orange);

}


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

.geo-process-title {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(38px, 4.2vw, 58px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;

}


.geo-process-title span {

    background:
        linear-gradient(
            90deg,
            #222222 0%,
            var(--orange) 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


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

.geo-process-title-line {

    width: 90px;

    height: 4px;

    margin:
        17px auto
        22px;

    border-radius: 30px;

    background:
        var(--light-gray);

    overflow: hidden;

}


.geo-process-title-line span {

    display: block;

    width: 65%;

    height: 100%;

    background:
        var(--orange);

    animation:
        geoProcessLine
        3s
        ease-in-out
        infinite
        alternate;

}


@keyframes geoProcessLine {

    from {
        width: 30%;
    }

    to {
        width: 100%;
    }

}


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

.geo-process-intro {

    max-width: 1200px;

    margin:
        0 auto;

    color:
        #3f3f3f;

    font-size:
        clamp(16px, 1.3vw, 19px);

    line-height: 1.8;

    text-align: left;

}


/* =========================================================
   PROCESS STEPS
========================================================= */

.geo-process-steps {

    position: relative;

    max-width: 1200px;

    margin:
        0 auto;

}


/* vertical line */

.geo-process-steps::before {

    content: "";

    position: absolute;

    left: 24px;

    top: 35px;

    bottom: 35px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            var(--orange),
            rgba(235,126,0,0.10)
        );

}


/* =========================================================
   STEP
========================================================= */

.geo-process-step {

    position: relative;

    display: grid;

    grid-template-columns:
        50px
        62px
        minmax(0,1fr);

    gap: 17px;

    align-items: start;

    margin-bottom: 15px;

    padding:
        12px 15px
        12px 0;

    border-radius: 15px;

    background:
        #ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.geo-process-step:hover {

    transform:
        translateX(7px);

    background:
        #fffaf5;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.07);

}


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

.geo-process-step-number {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 45px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


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

.geo-process-step-icon {

    position: relative;

    z-index: 2;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    background:
        var(--white);

    box-shadow:
        0 0 0 7px
        rgba(235,126,0,0.07);

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

}


.geo-process-step:hover
.geo-process-step-icon {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        scale(1.08);

}


.geo-process-step-icon svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.geo-process-step-content {

    padding-top: 2px;

}


.geo-process-step-content h3 {

    margin:
        0 0 8px;

    color:
        var(--dark-text);

    font-size:
        clamp(17px, 1.45vw, 21px);

    line-height: 1.35;

    font-weight: 900;

}


.geo-process-step-content h3::after {

    content: "";

    display: block;

    width: 35px;

    height: 2px;

    margin-top: 7px;

    background:
        var(--orange);

}


.geo-process-step-content p {

    margin: 0;

    color:
        #3d3d3d;

    font-size:
        clamp(14px, 1.15vw, 17px);

    line-height: 1.75;

}


.geo-process-step-content a {

    color:
        var(--orange);

    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px dotted
        var(--orange);

}


/* =========================================================
   DEMO NEXT SECTIONS
========================================================= */

.geo-process-demo-sections {

    max-width: 1200px;

    margin:
        70px auto
        0;

}


.geo-process-demo-sections section {

    position: relative;

    margin-bottom: 35px;

    padding:
        30px;

    border:
        1px solid
        var(--light-gray);

    border-left:
        4px solid
        var(--orange);

    border-radius: 15px;

    background:
        #fafafa;

    scroll-margin-top:
        90px;

}


.geo-process-demo-sections section > span {

    display: inline-flex;

    width: 32px;

    height: 32px;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

}


.geo-process-demo-sections h2 {

    margin:
        0 0 10px;

    color:
        var(--dark-text);

    font-size:
        clamp(24px, 2.4vw, 34px);

}


.geo-process-demo-sections p {

    max-width: 850px;

    margin: 0;

    color:
        #666666;

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.geo-process-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 900;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--black);

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

    cursor: pointer;

    font-size: 20px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;

}


.geo-process-top.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.geo-process-top:hover {

    background:
        var(--orange);

}


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

@media (max-width: 1100px) {

    .geo-process-toc-inner {

        width: 96%;

    }


    .geo-process-toc-link {

        padding:
            0 15px;

        font-size: 11px;

    }


    .geo-process-toc-label {

        padding-right: 15px;

        font-size: 12px;

    }


    .geo-process-step {

        grid-template-columns:
            40px
            55px
            minmax(0,1fr);

        gap: 12px;

    }


    .geo-process-steps::before {

        left: 19px;

    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 850px) {

    .geo-process-toc {

        overflow: hidden;

    }


    .geo-process-toc-inner {

        display: block;

        width: 100%;

    }


    .geo-process-toc-label {

        height: 44px;

        padding:
            0 20px;

        border-bottom:
            1px solid
            rgba(255,255,255,0.1);

    }


    .geo-process-toc-list {

        width: 100%;

        overflow-x: auto;

        scrollbar-width: thin;

        scrollbar-color:
            var(--orange)
            rgba(255,255,255,0.1);

    }


    .geo-process-toc-list::-webkit-scrollbar {

        height: 3px;

    }


    .geo-process-toc-list::-webkit-scrollbar-track {

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

    }


    .geo-process-toc-list::-webkit-scrollbar-thumb {

        background:
            var(--orange);

    }


    .geo-process-toc-link {

        min-height: 46px;

        flex-shrink: 0;

        padding:
            0 18px;

        font-size: 11px;

    }


    .geo-process-toc-link.active::after {

        bottom: 0;

        left: 12px;

        right: 12px;

    }


    .geo-process-container {

        padding-top:
            45px;

    }

}


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

@media (max-width: 600px) {

    .geo-process-container {

        width: 91%;

        padding:
            38px 0
            70px;

    }


    /* TOC */

    .geo-process-toc-label {

        font-size: 11px;

        height: 42px;

    }


    .geo-process-toc-link {

        padding:
            0 14px;

        font-size: 10px;

    }


    /* Header */

    .geo-process-kicker {

        font-size: 7px;

        letter-spacing: 1.6px;

    }


    .geo-process-kicker::before,
    .geo-process-kicker::after {

        width: 15px;

    }


    .geo-process-title {

        font-size:
            clamp(29px, 8.5vw, 42px);

        letter-spacing: -1.4px;

        line-height: 1.1;

    }


    .geo-process-title-line {

        width: 75px;

        height: 3px;

        margin:
            14px auto
            18px;

    }


    .geo-process-intro {

        font-size: 14px;

        line-height: 1.75;

    }


    /* Steps */

    .geo-process-steps {

        margin-top: 35px;

    }


    .geo-process-steps::before {

        left: 20px;

        top: 25px;

        bottom: 25px;

    }


    .geo-process-step {

        grid-template-columns:
            42px
            minmax(0,1fr);

        gap: 13px;

        margin-bottom: 15px;

        padding:
            10px 0;

    }


    .geo-process-step-number {

        position: absolute;

        top: 0;

        left: 0;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        color:
            var(--orange);

        background:
            var(--white);

        border:
            1px solid
            rgba(235,126,0,0.2);

        font-size: 8px;

    }


    .geo-process-step-icon {

        grid-column: 1;

        grid-row: 1;

        width: 40px;

        height: 40px;

        margin-top: 42px;

        box-shadow:
            0 0 0 5px
            rgba(235,126,0,0.07);

    }


    .geo-process-step-content {

        grid-column: 2;

        grid-row: 1;

        padding:
            3px 0 0;

    }


    .geo-process-step-content h3 {

        font-size: 15px;

        line-height: 1.4;

    }


    .geo-process-step-content h3::after {

        width: 28px;

        margin-top: 5px;

    }


    .geo-process-step-content p {

        font-size: 13px;

        line-height: 1.72;

    }


    /* Demo sections */

    .geo-process-demo-sections {

        margin-top:
            55px;

    }


    .geo-process-demo-sections section {

        margin-bottom: 20px;

        padding:
            20px;

        border-radius: 12px;

    }


    .geo-process-demo-sections h2 {

        font-size: 22px;

    }


    .geo-process-demo-sections p {

        font-size: 13px;

    }


    /* Back top */

    .geo-process-top {

        right: 15px;

        bottom: 15px;

        width: 42px;

        height: 42px;

    }

}


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

@media (max-width: 380px) {

    .geo-process-container {

        width: 90%;

    }


    .geo-process-title {

        font-size: 29px;

    }


    .geo-process-intro {

        font-size: 13px;

    }


    .geo-process-step-content h3 {

        font-size: 14px;

    }


    .geo-process-step-content p {

        font-size: 12px;

    }


    .geo-process-toc-link {

        padding:
            0 12px;

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .geo-process-title-line span {

        animation: none;

    }


    .geo-process-step,
    .geo-process-step-icon,
    .geo-process-top {

        transition: none;

    }

}


/* =========================================================
   ROOT COLORS
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-documents-section {

    position: relative;

    width: 100%;

    padding: 80px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffdfb 100%
        );

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.rc-documents-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    filter: blur(2px);

}


.rc-documents-glow-1 {

    width: 420px;

    height: 420px;

    right: -220px;

    top: 100px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.10),
            transparent 68%
        );

}


.rc-documents-glow-2 {

    width: 320px;

    height: 320px;

    left: -180px;

    bottom: 50px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0.06),
            transparent 70%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.rc-documents-container {

    width:
        min(1380px, 92%);

    margin:
        0 auto;

}


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

.rc-documents-header {

    text-align: center;

    margin-bottom: 55px;

}


.rc-documents-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.rc-documents-eyebrow::before,
.rc-documents-eyebrow::after {

    content: "";

    width: 24px;

    height: 2px;

    background:
        var(--orange);

}


.rc-documents-header h2 {

    max-width: 1250px;

    margin: 0 auto;

    color:
        var(--dark-text);

    font-size:
        clamp(34px, 4vw, 56px);

    line-height: 1.12;

    font-weight: 900;

    letter-spacing: -2px;

}


.rc-documents-header h2 span {

    background:
        linear-gradient(
            90deg,
            #222222,
            var(--orange)
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


.rc-documents-heading-line {

    width: 100px;

    height: 4px;

    margin: 18px auto 20px;

    border-radius: 20px;

    background:
        var(--light-gray);

    overflow: hidden;

}


.rc-documents-heading-line span {

    display: block;

    width: 65%;

    height: 100%;

    background:
        var(--orange);

    animation:
        rcDocumentLine
        2.5s
        ease-in-out
        infinite
        alternate;

}


@keyframes rcDocumentLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


.rc-documents-header p {

    max-width: 750px;

    margin: 0 auto;

    color:
        #555555;

    font-size:
        clamp(14px, 1.2vw, 17px);

    line-height: 1.7;

}


/* =========================================================
   MAIN GRID
========================================================= */

.rc-documents-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, .85fr);

    gap: 65px;

    align-items: center;

}


/* =========================================================
   DOCUMENT GROUP
========================================================= */

.rc-document-group {

    margin-bottom: 42px;

}


.rc-document-group:last-child {

    margin-bottom: 0;

}


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

.rc-document-group-title {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 19px;

}


.rc-document-group-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color:
        var(--white);

    background:
        var(--black);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,0.16);

    transition:
        transform .3s ease,
        background .3s ease;

}


.rc-document-group:hover
.rc-document-group-icon {

    transform:
        rotate(-5deg)
        scale(1.05);

    background:
        var(--orange);

}


.rc-document-group-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.rc-document-group-title h3 {

    margin: 4px 0 7px;

    color:
        var(--dark-text);

    font-size:
        clamp(17px, 1.45vw, 21px);

    line-height: 1.35;

    font-weight: 900;

}


.rc-document-title-line {

    width: 45px;

    height: 3px;

    border-radius: 20px;

    background:
        var(--orange);

}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.rc-document-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding-left: 64px;

}


/* =========================================================
   DOCUMENT ITEM
========================================================= */

.rc-document-item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 54px;

    padding:
        7px 17px 7px 9px;

    border:
        1px solid
        rgba(0,0,0,0.07);

    border-radius: 10px;

    background:
        var(--white);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,0.035);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.rc-document-item:hover {

    transform:
        translateX(6px);

    border-color:
        rgba(235,126,0,0.35);

    background:
        #fffaf5;

    box-shadow:
        0 9px 25px
        rgba(0,0,0,0.07);

}


/* =========================================================
   CHECK
========================================================= */

.rc-document-check {

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    background:
        #ffffff;

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

}


.rc-document-item:hover
.rc-document-check {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        scale(1.08);

}


.rc-document-check svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.rc-document-item p {

    margin: 0;

    color:
        #3e3e3e;

    font-size:
        clamp(13px, 1.1vw, 16px);

    line-height: 1.5;

}


/* =========================================================
   VISUAL AREA
========================================================= */

.rc-documents-visual {

    position: relative;

    min-height: 550px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.rc-documents-visual-card {

    position: relative;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #fafafa,
            #ffffff
        );

    border:
        1px solid
        rgba(0,0,0,0.06);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.09);

    overflow: hidden;

}


/* =========================================================
   VISUAL ORANGE LINE
========================================================= */

.rc-documents-visual-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange),
            var(--black)
        );

}


/* =========================================================
   CIRCLES
========================================================= */

.rc-visual-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(235,126,0,0.15);

}


.rc-visual-circle-1 {

    width: 380px;

    height: 380px;

    right: -130px;

    top: -100px;

}


.rc-visual-circle-2 {

    width: 250px;

    height: 250px;

    left: -100px;

    bottom: -80px;

}


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

.rc-documents-image {

    position: relative;

    z-index: 2;

    width: 88%;

    max-width: 590px;

    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 30px
            rgba(0,0,0,0.12)
        );

    transition:
        transform .6s ease;

}


.rc-documents-visual-card:hover
.rc-documents-image {

    transform:
        translateY(-8px)
        scale(1.015);

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.rc-floating-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(255,255,255,0.8);

    border-radius: 13px;

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

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.13);

    backdrop-filter:
        blur(10px);

    animation:
        rcFloating
        4s
        ease-in-out
        infinite;

}


@keyframes rcFloating {

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

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

}


.rc-floating-card-top {

    top: 55px;

    left: 20px;

}


.rc-floating-card-bottom {

    right: 20px;

    bottom: 55px;

    animation-delay:
        -2s;

}


.rc-floating-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color:
        var(--white);

    background:
        var(--black);

}


.rc-floating-icon svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.rc-floating-card strong {

    display: block;

    color:
        var(--dark-text);

    font-size: 12px;

}


.rc-floating-card span {

    display: block;

    margin-top: 3px;

    color:
        #777777;

    font-size: 9px;

}


/* =========================================================
   PROGRESS CIRCLE
========================================================= */

.rc-floating-progress {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        3px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    font-size: 8px;

    font-weight: 900;

}


/* =========================================================
   VISUAL CAPTION
========================================================= */

.rc-documents-visual-caption {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 18px;

    padding:
        15px 18px;

    border:
        1px solid
        var(--light-gray);

    border-radius: 12px;

    background:
        #ffffff;

}


.rc-caption-dot {

    width: 9px;

    height: 9px;

    flex-shrink: 0;

    margin-top: 5px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.10);

}


.rc-documents-visual-caption strong {

    display: block;

    color:
        var(--dark-text);

    font-size: 13px;

}


.rc-documents-visual-caption span {

    display: block;

    margin-top: 3px;

    color:
        #777777;

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================================
   BENEFITS
========================================================= */

.rc-document-benefits {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 55px;

    padding:
        23px 15px;

    border:
        1px solid
        rgba(0,0,0,0.07);

    border-radius: 18px;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,0.06);

}


.rc-document-benefit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        5px 20px;

    border-right:
        1px solid
        #e5e5e5;

}


.rc-document-benefit:last-child {

    border-right: 0;

}


.rc-benefit-icon {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--orange);

    background:
        #fff6ed;

}


.rc-benefit-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.rc-document-benefit strong {

    display: block;

    color:
        var(--dark-text);

    font-size: 12px;

}


.rc-document-benefit span {

    display: block;

    margin-top: 3px;

    color:
        #777777;

    font-size: 9px;

    line-height: 1.4;

}


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

@media (max-width: 1100px) {

    .rc-documents-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .8fr);

        gap: 40px;

    }


    .rc-document-list {

        padding-left: 50px;

    }


    .rc-documents-visual-card {

        min-height: 450px;

    }


    .rc-document-benefit {

        padding:
            5px 12px;

    }

}


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

@media (max-width: 850px) {

    .rc-documents-section {

        padding:
            60px 0
            70px;

    }


    .rc-documents-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .rc-documents-content {

        order: 1;

    }


    .rc-documents-visual {

        order: 2;

        min-height: auto;

    }


    .rc-documents-visual-card {

        min-height: 500px;

        width:
            min(600px, 100%);

        margin:
            0 auto;

    }


    .rc-document-benefits {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;

    }


    .rc-document-benefit {

        justify-content: flex-start;

        border-right: 0;

        padding:
            10px 15px;

    }

}


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

@media (max-width: 600px) {

    .rc-documents-section {

        padding:
            48px 0
            60px;

    }


    .rc-documents-container {

        width:
            91%;

    }


    /* Header */

    .rc-documents-eyebrow {

        font-size: 7px;

        letter-spacing: 1.7px;

    }


    .rc-documents-eyebrow::before,
    .rc-documents-eyebrow::after {

        width: 15px;

    }


    .rc-documents-header {

        margin-bottom:
            38px;

    }


    .rc-documents-header h2 {

        font-size:
            clamp(28px, 8.2vw, 40px);

        letter-spacing:
            -1.3px;

    }


    .rc-documents-header p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Group */

    .rc-document-group {

        margin-bottom:
            32px;

    }


    .rc-document-group-title {

        gap: 11px;

    }


    .rc-document-group-icon {

        width: 40px;

        height: 40px;

        border-radius: 11px;

    }


    .rc-document-group-icon svg {

        width: 20px;

        height: 20px;

    }


    .rc-document-group-title h3 {

        margin-top: 1px;

        font-size: 15px;

    }


    .rc-document-list {

        padding-left: 0;

        gap: 7px;

    }


    /* Items */

    .rc-document-item {

        min-height: 49px;

        gap: 10px;

        padding:
            6px 10px 6px 7px;

    }


    .rc-document-check {

        width: 29px;

        height: 29px;

    }


    .rc-document-check svg {

        width: 15px;

        height: 15px;

    }


    .rc-document-item p {

        font-size: 12px;

        line-height: 1.5;

    }


    /* Visual */

    .rc-documents-visual-card {

        min-height:
            370px;

        border-radius:
            22px;

    }


    .rc-documents-image {

        width:
            96%;

    }


    .rc-floating-card {

        padding:
            8px 10px;

        gap: 7px;

        border-radius: 10px;

    }


    .rc-floating-card-top {

        top: 25px;

        left: 10px;

    }


    .rc-floating-card-bottom {

        right: 10px;

        bottom: 25px;

    }


    .rc-floating-icon {

        width: 30px;

        height: 30px;

    }


    .rc-floating-icon svg {

        width: 16px;

        height: 16px;

    }


    .rc-floating-card strong {

        font-size: 9px;

    }


    .rc-floating-card span {

        font-size: 7px;

    }


    .rc-floating-progress {

        width: 32px;

        height: 32px;

        font-size: 7px;

    }


    .rc-documents-visual-caption {

        padding:
            12px;

    }


    .rc-documents-visual-caption strong {

        font-size: 11px;

    }


    .rc-documents-visual-caption span {

        font-size: 9px;

    }


    /* Benefits */

    .rc-document-benefits {

        grid-template-columns:
            1fr;

        margin-top:
            38px;

        padding:
            12px;

        gap: 0;

    }


    .rc-document-benefit {

        padding:
            12px 7px;

        border-bottom:
            1px solid
            #e8e8e8;

    }


    .rc-document-benefit:last-child {

        border-bottom: 0;

    }


    .rc-benefit-icon {

        width: 39px;

        height: 39px;

    }


    .rc-benefit-icon svg {

        width: 19px;

        height: 19px;

    }


    .rc-document-benefit strong {

        font-size: 11px;

    }


    .rc-document-benefit span {

        font-size: 8px;

    }

}


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

@media (max-width: 380px) {

    .rc-documents-container {

        width:
            90%;

    }


    .rc-documents-header h2 {

        font-size:
            28px;

    }


    .rc-document-group-title h3 {

        font-size:
            14px;

    }


    .rc-document-item p {

        font-size:
            11px;

    }


    .rc-documents-visual-card {

        min-height:
            320px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .rc-documents-heading-line span,
    .rc-floating-card {

        animation: none;

    }


    .rc-document-item,
    .rc-document-group-icon,
    .rc-documents-image {

        transition: none;

    }

}


/* =========================================================
   COMPANY COST SECTION
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   SECTION
========================================================= */

.rc-cost-section {

    position: relative;

    width: 100%;

    padding: 85px 0 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.rc-cost-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}


.rc-cost-orb-one {

    width: 500px;

    height: 500px;

    right: -280px;

    top: 80px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.12),
            transparent 68%
        );

}


.rc-cost-orb-two {

    width: 400px;

    height: 400px;

    left: -250px;

    bottom: 0;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0.06),
            transparent 70%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.rc-cost-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;

}


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

.rc-cost-header {

    max-width: 1050px;

    margin:
        0 auto 48px;

    text-align: center;

}


.rc-cost-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.rc-cost-eyebrow::before,
.rc-cost-eyebrow::after {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--orange);

}


.rc-cost-header h2 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(34px, 4vw, 55px);

    line-height: 1.12;

    font-weight: 900;

    letter-spacing: -2px;

}


.rc-cost-header h2 span {

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


.rc-cost-title-line {

    width: 90px;

    height: 4px;

    margin:
        17px auto 20px;

    border-radius: 50px;

    background:
        var(--light-gray);

    overflow: hidden;

}


.rc-cost-title-line span {

    display: block;

    width: 60%;

    height: 100%;

    background:
        var(--orange);

    animation:
        rcCostLine
        2.5s
        ease-in-out
        infinite
        alternate;

}


@keyframes rcCostLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


.rc-cost-header p {

    max-width: 900px;

    margin:
        0 auto;

    color:
        #555555;

    font-size:
        clamp(14px, 1.15vw, 17px);

    line-height: 1.75;

}


/* =========================================================
   HIGHLIGHT CARDS
========================================================= */

.rc-cost-highlights {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    max-width: 900px;

    margin:
        0 auto 40px;

}


.rc-cost-highlight {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        15px 18px;

    border:
        1px solid
        rgba(0,0,0,0.07);

    border-radius: 14px;

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

    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.05);

    backdrop-filter:
        blur(10px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.rc-cost-highlight:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(235,126,0,0.3);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,0.09);

}


.rc-cost-highlight-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color:
        var(--white);

    background:
        var(--black);

    font-size: 18px;

    font-weight: 900;

}


.rc-cost-highlight:nth-child(2)
.rc-cost-highlight-icon {

    background:
        var(--orange);

}


.rc-cost-highlight strong {

    display: block;

    color:
        #666666;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.rc-cost-highlight span {

    display: block;

    margin-top: 3px;

    color:
        var(--dark-text);

    font-size: 15px;

    font-weight: 900;

}


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

.rc-cost-table-wrapper {

    position: relative;

    border:
        1px solid
        rgba(0,0,0,0.08);

    border-radius: 22px;

    background:
        var(--white);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.08);

    overflow: hidden;

}


/* =========================================================
   TABLE TOP
========================================================= */

.rc-cost-table-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        23px 28px;

    border-bottom:
        1px solid
        var(--light-gray);

    background:
        linear-gradient(
            90deg,
            #fffaf5,
            #ffffff
        );

}


.rc-cost-table-label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.7px;

}


.rc-cost-table-top h3 {

    margin: 0;

    color:
        var(--dark-text);

    font-size: 21px;

    font-weight: 900;

}


.rc-cost-table-note {

    padding:
        8px 13px;

    border-radius: 30px;

    color:
        var(--orange);

    background:
        #fff2e6;

    font-size: 10px;

    font-weight: 800;

}


/* =========================================================
   TABLE
========================================================= */

.rc-cost-table-scroll {

    width: 100%;

    overflow-x: auto;

}


.rc-cost-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 850px;

}


/* =========================================================
   TABLE HEAD
========================================================= */

.rc-cost-table thead {

    background:
        var(--black);

}


.rc-cost-table th {

    height: 56px;

    padding:
        0 20px;

    color:
        var(--white);

    text-align: left;

    font-size: 13px;

    font-weight: 800;

    border-right:
        1px solid
        rgba(255,255,255,0.13);

}


.rc-cost-table th:first-child {

    text-align: center;

}


.rc-cost-table th:nth-child(3) {

    text-align: center;

}


.rc-cost-table th:last-child {

    border-right: 0;

}


/* Orange top accent */

.rc-cost-table thead::after {

    content: "";

    display: block;

    height: 3px;

    background:
        var(--orange);

}


/* =========================================================
   TABLE BODY
========================================================= */

.rc-cost-table tbody tr {

    position: relative;

    border-bottom:
        1px solid
        #e6e6e6;

    transition:
        background .25s ease,
        transform .25s ease;

}


.rc-cost-table tbody tr:last-child {

    border-bottom: 0;

}


.rc-cost-table tbody tr:hover {

    background:
        #fffaf5;

}


.rc-cost-table td {

    padding:
        15px 20px;

    color:
        #333333;

    font-size:
        14px;

    line-height: 1.5;

    border-right:
        1px solid
        #e6e6e6;

}


.rc-cost-table td:last-child {

    border-right: 0;

}


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

.rc-cost-number {

    width: 60px;

    color:
        #999999 !important;

    text-align: center;

    font-size: 10px !important;

    font-weight: 900;

}


/* =========================================================
   COMPANY
========================================================= */

.rc-cost-company {

    display: flex;

    align-items: center;

    gap: 9px;

    font-weight: 700;

}


.rc-cost-company-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 4px
        rgba(235,126,0,0.10);

}


/* =========================================================
   PRICE
========================================================= */

.rc-cost-price {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 105px;

    padding:
        7px 12px;

    border-radius: 7px;

    color:
        var(--orange);

    background:
        #fff5eb;

    font-size: 13px;

    font-weight: 900;

}


/* =========================================================
   POPULAR ROW
========================================================= */

.rc-cost-popular {

    background:
        linear-gradient(
            90deg,
            #fff9f3,
            #ffffff
        );

}


.rc-cost-popular td:first-child {

    border-left:
        4px solid
        var(--orange);

}


.rc-cost-popular-badge {

    display: inline-flex;

    align-items: center;

    padding:
        3px 7px;

    margin-left: 5px;

    border-radius: 30px;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 7px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .5px;

}


/* =========================================================
   FOOTER NOTE
========================================================= */

.rc-cost-table-footer {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding:
        17px 25px;

    border-top:
        1px solid
        var(--light-gray);

    background:
        #fafafa;

}


.rc-cost-footer-icon {

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 12px;

    font-weight: 900;

}


.rc-cost-table-footer p {

    margin: 0;

    color:
        #666666;

    font-size: 11px;

    line-height: 1.6;

}


.rc-cost-table-footer strong {

    color:
        var(--dark-text);

}


/* =========================================================
   CTA
========================================================= */

.rc-cost-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 30px;

    padding:
        28px 32px;

    border-radius: 20px;

    color:
        var(--white);

    background:
        linear-gradient(
            110deg,
            var(--black),
            #171717
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.15);

    overflow: hidden;

}


.rc-cost-cta-content {

    position: relative;

}


.rc-cost-cta-content > span {

    display: block;

    margin-bottom: 6px;

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

}


.rc-cost-cta-content h3 {

    margin: 0 0 5px;

    font-size:
        clamp(19px, 2vw, 27px);

    line-height: 1.25;

}


.rc-cost-cta-content p {

    max-width: 650px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.6;

}


.rc-cost-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    padding:
        13px 20px;

    border-radius: 9px;

    color:
        var(--white);

    background:
        var(--orange);

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 10px 25px
        rgba(235,126,0,0.25);

    transition:
        transform .3s ease,
        background .3s ease;

}


.rc-cost-cta-button:hover {

    transform:
        translateY(-3px);

    background:
        #ff941d;

}


.rc-cost-cta-button span {

    font-size: 18px;

    transition:
        transform .3s ease;

}


.rc-cost-cta-button:hover span {

    transform:
        translateX(4px);

}


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

@media (max-width: 900px) {

    .rc-cost-section {

        padding:
            65px 0
            75px;

    }


    .rc-cost-highlights {

        max-width: 100%;

    }


    .rc-cost-grid {

        grid-template-columns: 1fr;

    }


    .rc-cost-table-top {

        padding:
            20px;

    }


    .rc-cost-cta {

        padding:
            25px;

    }

}


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

@media (max-width: 650px) {

    .rc-cost-section {

        padding:
            50px 0
            60px;

    }


    .rc-cost-container {

        width:
            91%;

    }


    /* Header */

    .rc-cost-header {

        margin-bottom:
            32px;

    }


    .rc-cost-eyebrow {

        font-size: 7px;

        letter-spacing: 1.7px;

    }


    .rc-cost-eyebrow::before,
    .rc-cost-eyebrow::after {

        width: 15px;

    }


    .rc-cost-header h2 {

        font-size:
            clamp(28px, 8vw, 38px);

        letter-spacing:
            -1.3px;

    }


    .rc-cost-header p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Highlights */

    .rc-cost-highlights {

        grid-template-columns:
            1fr;

        gap: 9px;

        margin-bottom:
            25px;

    }


    .rc-cost-highlight {

        padding:
            12px 14px;

    }


    .rc-cost-highlight-icon {

        width: 38px;

        height: 38px;

        border-radius: 10px;

        font-size: 15px;

    }


    .rc-cost-highlight strong {

        font-size: 9px;

    }


    .rc-cost-highlight span {

        font-size: 13px;

    }


    /* Table */

    .rc-cost-table-wrapper {

        border-radius:
            15px;

    }


    .rc-cost-table-top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 10px;

        padding:
            17px;

    }


    .rc-cost-table-top h3 {

        font-size: 18px;

    }


    .rc-cost-table-note {

        font-size: 8px;

    }


    .rc-cost-table th {

        height: 48px;

        padding:
            0 14px;

        font-size: 11px;

    }


    .rc-cost-table td {

        padding:
            12px 14px;

        font-size: 12px;

    }


    .rc-cost-number {

        width: 45px;

    }


    .rc-cost-price {

        min-width: 90px;

        padding:
            6px 8px;

        font-size: 11px;

    }


    .rc-cost-table-footer {

        padding:
            13px 15px;

    }


    .rc-cost-table-footer p {

        font-size: 9px;

    }


    /* CTA */

    .rc-cost-cta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;

        margin-top:
            20px;

        padding:
            22px 20px;

        border-radius:
            15px;

    }


    .rc-cost-cta-content h3 {

        font-size: 19px;

    }


    .rc-cost-cta-content p {

        font-size: 10px;

    }


    .rc-cost-cta-button {

        width: 100%;

        justify-content:
            center;

        padding:
            12px;

        font-size: 11px;

    }

}


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

@media (max-width: 380px) {

    .rc-cost-header h2 {

        font-size:
            28px;

    }


    .rc-cost-header p {

        font-size:
            12px;

    }


    .rc-cost-table {

        min-width:
            780px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .rc-cost-title-line span {

        animation:
            none;

    }


    .rc-cost-highlight,
    .rc-cost-table tbody tr,
    .rc-cost-cta-button {

        transition:
            none;

    }

}




/* =========================================================
   ROOT COLORS
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-about-registration {

    position: relative;

    width: 100%;

    padding: 85px 0 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.rc-about-registration-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-about-bg-one {

    width: 520px;

    height: 520px;

    top: -250px;

    right: -200px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.13),
            transparent 68%
        );
}


.rc-about-bg-two {

    width: 450px;

    height: 450px;

    bottom: -250px;

    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0.07),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-about-registration-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.rc-about-registration-heading {

    text-align: center;

    margin-bottom: 65px;
}


.rc-about-registration-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.rc-about-registration-eyebrow::before,
.rc-about-registration-eyebrow::after {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--orange);
}


.rc-about-registration-heading h2 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(35px, 4vw, 56px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;
}


.rc-about-registration-heading h2 span {

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   HEADING LINE
========================================================= */

.rc-about-registration-line {

    width: 95px;

    height: 4px;

    margin:
        17px auto 0;

    background:
        var(--light-gray);

    border-radius: 20px;

    overflow: hidden;
}


.rc-about-registration-line span {

    display: block;

    width: 60%;

    height: 100%;

    background:
        var(--orange);

    animation:
        rcRegistrationLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcRegistrationLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   MAIN GRID
========================================================= */

.rc-about-registration-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(480px, .82fr);

    gap: 75px;

    align-items: center;
}


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

.rc-about-registration-content {

    padding:
        10px 0;
}


/* =========================================================
   LABEL
========================================================= */

.rc-about-registration-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.rc-about-registration-label-icon {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 12px;

}


/* =========================================================
   LEFT HEADING
========================================================= */

.rc-about-registration-content h3 {

    max-width: 650px;

    margin:
        0 0 25px;

    color:
        var(--dark-text);

    font-size:
        clamp(29px, 3vw, 43px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.3px;
}


.rc-about-registration-content h3 strong {

    color:
        var(--orange);

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.rc-about-registration-content > p {

    max-width: 700px;

    margin:
        0 0 20px;

    color:
        #4a4a4a;

    font-size:
        clamp(14px, 1.15vw, 17px);

    line-height: 1.85;
}


.rc-about-registration-content > p strong {

    color:
        var(--dark-text);

    font-weight: 900;
}


/* =========================================================
   INFORMATION POINTS
========================================================= */

.rc-about-registration-points {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 32px;

    max-width: 750px;
}


.rc-about-registration-point {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding:
        16px;

    border:
        1px solid
        rgba(0,0,0,0.08);

    border-radius: 13px;

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

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.04);

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


.rc-about-registration-point:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(235,126,0,0.35);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.08);
}


.rc-registration-point-icon {

    width: 33px;

    height: 33px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color:
        var(--white);

    background:
        var(--black);

    font-size: 8px;

    font-weight: 900;
}


.rc-about-registration-point:nth-child(2)
.rc-registration-point-icon {

    background:
        var(--orange);
}


.rc-about-registration-point strong {

    color:
        var(--dark-text);

    font-size: 11px;

    line-height: 1.3;
}


.rc-about-registration-point span {

    color:
        #777777;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   CERTIFICATE AREA
========================================================= */

.rc-certificate-area {

    position: relative;

    width: 100%;
}


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

.rc-certificate-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 13px;

}


.rc-certificate-header-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    color:
        var(--white);

    background:
        var(--orange);

    box-shadow:
        0 8px 20px
        rgba(235,126,0,0.25);
}


.rc-certificate-header span {

    display: block;

    color:
        #888888;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.rc-certificate-header h3 {

    margin: 3px 0 0;

    color:
        var(--dark-text);

    font-size: 18px;

    font-weight: 900;
}


/* =========================================================
   CERTIFICATE VIEWER
========================================================= */

.rc-certificate-viewer {

    position: relative;

    border-radius: 18px;

    background:
        #f7f7f7;

    border:
        1px solid
        rgba(0,0,0,0.08);

    box-shadow:
        0 25px 65px
        rgba(0,0,0,0.13);

    overflow: hidden;
}


/* =========================================================
   BROWSER BAR
========================================================= */

.rc-certificate-browser {

    height: 39px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        0 15px;

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

    background:
        var(--black);
}


.rc-browser-dots {

    display: flex;

    gap: 5px;
}


.rc-browser-dots span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        #777777;
}


.rc-browser-dots span:first-child {

    background:
        var(--orange);
}


.rc-browser-title {

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   TABS
========================================================= */

.rc-certificate-tabs {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    background:
        #171717;
}


.rc-certificate-tab {

    position: relative;

    min-height: 45px;

    padding:
        0 5px;

    border: 0;

    border-right:
        1px solid
        rgba(255,255,255,0.08);

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

    background:
        transparent;

    cursor: pointer;

    font-size: 9px;

    font-weight: 800;

    transition:
        color .25s ease,
        background .25s ease;
}


.rc-certificate-tab:hover {

    color:
        var(--white);

    background:
        rgba(235,126,0,0.1);
}


.rc-certificate-tab.active {

    color:
        var(--white);

    background:
        rgba(235,126,0,0.18);
}


.rc-certificate-tab.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background:
        var(--orange);
}


/* =========================================================
   DOCUMENT AREA
========================================================= */

.rc-certificate-document {

    min-height: 470px;

    padding:
        28px;

    display: flex;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #eef1f3,
            #f9fafb
        );
}


/* =========================================================
   PAPER
========================================================= */

.rc-certificate-paper {

    position: relative;

    width: 100%;

    max-width: 470px;

    min-height: 410px;

    padding:
        27px 35px;

    background:
        #ffffff;

    border-radius: 9px;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.13);

    overflow: hidden;

    text-align: center;
}


.rc-certificate-paper::before {

    content: "";

    position: absolute;

    inset: 9px;

    border:
        1px solid
        rgba(0,0,0,0.12);

    pointer-events: none;
}


/* =========================================================
   EMBLEM
========================================================= */

.rc-certificate-emblem {

    position: relative;

    margin:
        0 auto 3px;

    color:
        #333333;

    font-size: 35px;

    line-height: 1;
}


.rc-certificate-government {

    color:
        #333333;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .8px;
}


.rc-certificate-ministry {

    margin-top: 3px;

    color:
        #555555;

    font-size: 7px;

    font-weight: 800;
}


.rc-certificate-small-line {

    width: 60px;

    height: 1px;

    margin:
        9px auto;

    background:
        #999999;
}


.rc-certificate-paper h4 {

    margin:
        0;

    color:
        #222222;

    font-family:
        Georgia,
        serif;

    font-size: 18px;

}


.rc-certificate-subtitle {

    margin:
        4px 0 20px;

    color:
        #777777;

    font-family:
        Georgia,
        serif;

    font-size: 8px;
}


/* =========================================================
   CERTIFICATE TEXT
========================================================= */

.rc-certificate-text {

    text-align: left;

}


.rc-certificate-text > p {

    margin:
        0 0 15px;

    color:
        #555555;

    font-family:
        Georgia,
        serif;

    font-size: 9px;

    line-height: 1.6;
}


.rc-certificate-field {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        8px 0;

    border-bottom:
        1px solid
        #eeeeee;
}


.rc-certificate-field span {

    color:
        #777777;

    font-size: 7px;

}


.rc-certificate-field strong {

    color:
        #333333;

    font-size: 7px;

    text-align: right;
}


/* =========================================================
   SEAL
========================================================= */

.rc-certificate-seal {

    position: absolute;

    right: 30px;

    bottom: 52px;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    font-size: 7px;

    font-weight: 900;

    transform:
        rotate(-12deg);

    opacity: .75;
}


/* =========================================================
   SIGNATURE
========================================================= */

.rc-certificate-signature {

    position: absolute;

    left: 35px;

    right: 35px;

    bottom: 28px;

    text-align: right;
}


.rc-certificate-signature div {

    width: 100px;

    height: 1px;

    margin-left: auto;

    margin-bottom: 3px;

    background:
        #777777;
}


.rc-certificate-signature span {

    color:
        #777777;

    font-size: 7px;

}


/* =========================================================
   CERTIFICATE FOOTER
========================================================= */

.rc-certificate-footer {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 13px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(0,0,0,0.07);

    border-radius: 11px;

    background:
        #ffffff;
}


.rc-certificate-status-dot {

    width: 9px;

    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(235,126,0,0.10);
}


.rc-certificate-footer strong {

    display: block;

    color:
        var(--dark-text);

    font-size: 10px;
}


.rc-certificate-footer span:not(.rc-certificate-status-dot) {

    display: block;

    margin-top: 2px;

    color:
        #888888;

    font-size: 8px;
}


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

@media (max-width: 1050px) {

    .rc-about-registration-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .rc-about-registration-content {

        max-width: 850px;

        margin:
            0 auto;

    }


    .rc-certificate-area {

        width:
            min(650px, 100%);

        margin:
            0 auto;

    }

}


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

@media (max-width: 600px) {

    .rc-about-registration {

        padding:
            55px 0
            65px;

    }


    .rc-about-registration-container {

        width:
            91%;

    }


    /* Heading */

    .rc-about-registration-heading {

        margin-bottom:
            40px;

    }


    .rc-about-registration-eyebrow {

        font-size: 7px;

        letter-spacing: 1.6px;

    }


    .rc-about-registration-eyebrow::before,
    .rc-about-registration-eyebrow::after {

        width: 14px;

    }


    .rc-about-registration-heading h2 {

        font-size:
            clamp(29px, 8vw, 40px);

        letter-spacing:
            -1.3px;

    }


    /* Content */

    .rc-about-registration-label {

        font-size: 8px;

        margin-bottom:
            15px;

    }


    .rc-about-registration-content h3 {

        font-size:
            28px;

        margin-bottom:
            20px;

    }


    .rc-about-registration-content > p {

        font-size:
            13px;

        line-height:
            1.75;

    }


    /* Points */

    .rc-about-registration-points {

        grid-template-columns:
            1fr;

        gap: 8px;

        margin-top:
            25px;

    }


    .rc-about-registration-point {

        flex-direction:
            row;

        align-items:
            center;

        padding:
            12px;

    }


    .rc-registration-point-icon {

        width: 32px;

        height: 32px;

    }


    /* Certificate */

    .rc-certificate-header h3 {

        font-size:
            15px;

    }


    .rc-certificate-document {

        min-height:
            350px;

        padding:
            18px 10px;

    }


    .rc-certificate-paper {

        min-height:
            330px;

        padding:
            20px 22px;

    }


    .rc-certificate-browser {

        height:
            35px;

    }


    .rc-browser-title {

        font-size:
            7px;

    }


    .rc-certificate-tab {

        min-height:
            40px;

        font-size:
            7px;

    }


    .rc-certificate-emblem {

        font-size:
            28px;

    }


    .rc-certificate-government {

        font-size:
            7px;

    }


    .rc-certificate-ministry {

        font-size:
            6px;

    }


    .rc-certificate-paper h4 {

        font-size:
            14px;

    }


    .rc-certificate-field {

        gap:
            8px;

    }


    .rc-certificate-seal {

        width:
            43px;

        height:
            43px;

        right:
            18px;

        bottom:
            45px;

    }

}


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

@media (max-width: 380px) {

    .rc-about-registration-heading h2 {

        font-size:
            28px;

    }


    .rc-certificate-tab {

        font-size:
            6px;

    }


    .rc-certificate-document {

        padding:
            14px 6px;

    }


    .rc-certificate-paper {

        padding:
            18px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .rc-about-registration-line span {

        animation:
            none;

    }


    .rc-about-registration-point,
    .rc-certificate-tab {

        transition:
            none;

    }

}




/* =========================================================
   RC COMPANY TYPES SECTION
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   SECTION
========================================================= */

.rc-types-section {

    position: relative;

    width: 100%;

    padding: 90px 0 95px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.rc-types-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-types-decoration-1 {

    width: 500px;

    height: 500px;

    top: -280px;

    right: -230px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.13),
            transparent 70%
        );
}


.rc-types-decoration-2 {

    width: 420px;

    height: 420px;

    bottom: -250px;

    left: -230px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0.07),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-types-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


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

.rc-types-header {

    max-width: 1000px;

    margin:
        0 auto 50px;

    text-align: center;
}


.rc-types-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.rc-types-eyebrow::before,
.rc-types-eyebrow::after {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--orange);
}


.rc-types-header h2 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;
}


.rc-types-header h2 span {

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


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

.rc-types-title-line {

    width: 90px;

    height: 4px;

    margin:
        17px auto 19px;

    border-radius: 20px;

    background:
        var(--light-gray);

    overflow: hidden;
}


.rc-types-title-line span {

    display: block;

    width: 65%;

    height: 100%;

    background:
        var(--orange);

    animation:
        rcTypesLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcTypesLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


.rc-types-header p {

    max-width: 950px;

    margin:
        0 auto;

    color:
        #555555;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.75;
}


/* =========================================================
   GRID
========================================================= */

.rc-types-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


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

.rc-type-card {

    position: relative;

    min-height: 275px;

    padding:
        25px 25px 24px;

    border:
        1px solid
        rgba(0,0,0,0.09);

    border-radius: 17px;

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

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.06);

    overflow: hidden;

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


/* Orange bottom line */

.rc-type-card::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .4s ease;
}


.rc-type-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(235,126,0,0.28);

    box-shadow:
        0 22px 50px
        rgba(0,0,0,0.11);
}


.rc-type-card:hover::after {

    transform:
        scaleX(1);
}


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

.rc-type-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;
}


.rc-type-number {

    color:
        #d7d7d7;

    font-size: 35px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    transition:
        color .3s ease;
}


.rc-type-card:hover
.rc-type-number {

    color:
        rgba(235,126,0,0.22);
}


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

.rc-type-icon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color:
        var(--white);

    background:
        var(--black);

    font-size: 19px;

    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.15);

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


.rc-type-card:hover
.rc-type-icon {

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

    background:
        var(--orange);

}


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

.rc-type-card h3 {

    margin:
        0 0 10px;

    color:
        #17202a;

    font-size:
        clamp(18px, 1.5vw, 21px);

    line-height: 1.3;

    font-weight: 850;
}


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

.rc-type-line {

    width: 38px;

    height: 3px;

    margin-bottom: 15px;

    border-radius: 20px;

    background:
        var(--orange);

    transition:
        width .35s ease;
}


.rc-type-card:hover
.rc-type-line {

    width:
        65px;
}


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

.rc-type-card p {

    margin:
        0;

    color:
        #555555;

    font-size:
        13px;

    line-height:
        1.8;

}


.rc-type-card p strong {

    color:
        var(--dark-text);

}


.rc-type-card p a {

    color:
        #1469d8;

    text-decoration:
        none;

    transition:
        color .25s ease;
}


.rc-type-card p a:hover {

    color:
        var(--orange);

}


/* =========================================================
   READ MORE
========================================================= */

.rc-type-read-more {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color:
        var(--dark-text);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        900;

    transition:
        color .25s ease;
}


.rc-type-read-more span {

    color:
        var(--orange);

    font-size:
        17px;

    line-height: 1;

    transition:
        transform .25s ease;
}


.rc-type-read-more:hover {

    color:
        var(--orange);
}


.rc-type-read-more:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.rc-types-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 28px;

    padding:
        20px 24px;

    border:
        1px solid
        rgba(0,0,0,0.08);

    border-radius: 15px;

    background:
        var(--black);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,0.12);
}


.rc-types-bottom-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 18px;

    font-weight: 900;
}


.rc-types-bottom-content {

    flex: 1;
}


.rc-types-bottom-content strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--white);

    font-size: 14px;
}


.rc-types-bottom-content span {

    display: block;

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

    font-size: 10px;
}


.rc-types-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 17px;

    border-radius: 8px;

    color:
        var(--white);

    background:
        var(--orange);

    text-decoration:
        none;

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;

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


.rc-types-button:hover {

    transform:
        translateY(-2px);

    background:
        #ff941d;
}


.rc-types-button span {

    font-size: 16px;

    transition:
        transform .25s ease;
}


.rc-types-button:hover span {

    transform:
        translateX(4px);
}


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

@media (max-width: 950px) {

    .rc-types-section {

        padding:
            70px 0 75px;

    }


    .rc-types-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .rc-types-card {

        min-height:
            auto;

    }

}


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

@media (max-width: 650px) {

    .rc-types-section {

        padding:
            55px 0 65px;

    }


    .rc-types-container {

        width:
            91%;

    }


    /* Header */

    .rc-types-header {

        margin-bottom:
            35px;

    }


    .rc-types-eyebrow {

        font-size:
            7px;

        letter-spacing:
            1.7px;

    }


    .rc-types-eyebrow::before,
    .rc-types-eyebrow::after {

        width:
            14px;

    }


    .rc-types-header h2 {

        font-size:
            clamp(29px, 8vw, 39px);

        letter-spacing:
            -1.2px;

    }


    .rc-types-header p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    /* Grid */

    .rc-types-grid {

        grid-template-columns:
            1fr;

        gap:
            13px;

    }


    /* Card */

    .rc-type-card {

        min-height:
            auto;

        padding:
            21px;

        border-radius:
            14px;

    }


    .rc-type-card-top {

        margin-bottom:
            13px;

    }


    .rc-type-number {

        font-size:
            28px;

    }


    .rc-type-icon {

        width:
            42px;

        height:
            42px;

        border-radius:
            11px;

        font-size:
            16px;

    }


    .rc-type-card h3 {

        font-size:
            18px;

    }


    .rc-type-card p {

        font-size:
            12px;

        line-height:
            1.75;

    }


    .rc-type-read-more {

        font-size:
            11px;

    }


    /* CTA */

    .rc-types-bottom {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

        padding:
            18px;

    }


    .rc-types-bottom-content {

        min-width:
            calc(100% - 55px);

    }


    .rc-types-button {

        width:
            100%;

        justify-content:
            center;

        margin-top:
            4px;

    }

}


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

@media (max-width: 380px) {

    .rc-types-header h2 {

        font-size:
            28px;

    }


    .rc-type-card {

        padding:
            18px;

    }


    .rc-type-card h3 {

        font-size:
            17px;

    }


    .rc-type-card p {

        font-size:
            11.5px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .rc-types-title-line span {

        animation:
            none;

    }


    .rc-type-card,
    .rc-type-icon,
    .rc-type-line,
    .rc-type-number,
    .rc-types-button {

        transition:
            none;

    }

}


/* =========================================================
   ROOT COLORS
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-checklist-section {

    position: relative;

    width: 100%;

    padding: 90px 0 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.rc-checklist-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-checklist-orb-one {

    width: 500px;

    height: 500px;

    top: -270px;

    right: -230px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.14),
            transparent 70%
        );
}


.rc-checklist-orb-two {

    width: 450px;

    height: 450px;

    bottom: -270px;

    left: -240px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0.07),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-checklist-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


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

.rc-checklist-header {

    max-width: 1050px;

    margin:
        0 auto 55px;

    text-align: center;
}


.rc-checklist-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.rc-checklist-eyebrow::before,
.rc-checklist-eyebrow::after {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--orange);
}


.rc-checklist-header h2 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(35px, 4vw, 55px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;
}


.rc-checklist-header h2 span {

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   HEADING LINE
========================================================= */

.rc-checklist-heading-line {

    width: 95px;

    height: 4px;

    margin:
        17px auto 20px;

    border-radius: 30px;

    background:
        var(--light-gray);

    overflow: hidden;
}


.rc-checklist-heading-line span {

    display: block;

    width: 60%;

    height: 100%;

    background:
        var(--orange);

    animation:
        rcChecklistLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcChecklistLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


.rc-checklist-header p {

    max-width: 920px;

    margin:
        0 auto;

    color:
        #555555;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.75;
}


/* =========================================================
   MAIN GRID
========================================================= */

.rc-checklist-grid {

    display: grid;

    grid-template-columns:
        minmax(400px, .8fr)
        minmax(500px, 1.2fr);

    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.rc-checklist-visual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #111111,
            #202020
        );

    box-shadow:
        0 25px 65px
        rgba(0,0,0,0.16);

    overflow: hidden;
}


/* Orange Glow */

.rc-checklist-visual-glow {

    position: absolute;

    width: 300px;

    height: 300px;

    top: -100px;

    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,0.35),
            transparent 70%
        );
}


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

.rc-checklist-floating-number {

    position: absolute;

    top: 30px;

    left: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 65px;

    height: 65px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 15px;

    color:
        var(--white);

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

    backdrop-filter:
        blur(10px);
}


.rc-checklist-floating-number span {

    color:
        var(--orange);

    font-size: 20px;

    font-weight: 900;

}


.rc-checklist-floating-number small {

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   CLIPBOARD
========================================================= */

.rc-checklist-clipboard {

    position: relative;

    width: 240px;

    height: 340px;

    margin-top: 35px;

    padding: 25px 20px 20px;

    border-radius: 7px;

    background:
        #eeeeee;

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

    transform:
        rotate(-3deg);

    z-index: 2;
}


/* =========================================================
   CLIP
========================================================= */

.rc-checklist-clip {

    position: absolute;

    top: -18px;

    left: 50%;

    width: 72px;

    height: 42px;

    transform:
        translateX(-50%);

    border-radius:
        7px 7px 4px 4px;

    background:
        #555555;

    box-shadow:
        0 5px 10px
        rgba(0,0,0,0.25);
}


.rc-checklist-clip::before {

    content: "";

    position: absolute;

    left: 50%;

    top: -10px;

    width: 23px;

    height: 23px;

    transform:
        translateX(-50%);

    border:
        5px solid
        #eeeeee;

    border-radius: 50%;

    background:
        transparent;
}


/* =========================================================
   PAPER
========================================================= */

.rc-checklist-paper {

    width: 100%;

    height: 100%;

    padding:
        22px 18px;

    border-radius: 4px;

    background:
        var(--white);

    box-shadow:
        inset 0 0 20px
        rgba(0,0,0,0.04);
}


.rc-paper-heading {

    color:
        var(--black);

    font-size: 18px;

    font-weight: 900;

    line-height: 1.05;

}


.rc-paper-heading strong {

    display: block;

    color:
        var(--orange);

}


.rc-paper-line {

    width: 42px;

    height: 3px;

    margin:
        12px 0 20px;

    background:
        var(--orange);

}


/* =========================================================
   PAPER ITEMS
========================================================= */

.rc-paper-item {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}


.rc-paper-item i {

    width: 23px;

    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        #cfcfcf;

    color:
        transparent;

    font-style:
        normal;

    font-size: 13px;
}


.rc-paper-item.checked i {

    border-color:
        var(--orange);

    color:
        var(--white);

    background:
        var(--orange);
}


.rc-paper-item span {

    width: 80%;

    height: 7px;

    border-radius: 5px;

    background:
        #dce4ea;
}


/* =========================================================
   FLOATING TAGS
========================================================= */

.rc-checklist-tag {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(235,126,0,0.35);

    border-radius: 8px;

    color:
        var(--dark-text);

    background:
        var(--white);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,0.18);

    font-size: 9px;

    font-weight: 900;

    z-index: 4;

    animation:
        rcTagFloat
        4s
        ease-in-out
        infinite;
}


.rc-checklist-tag span {

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 9px;
}


.rc-tag-one {

    top: 115px;

    right: 18px;
}


.rc-tag-two {

    top: 170px;

    right: 0;

    animation-delay:
        .6s;
}


.rc-tag-three {

    bottom: 150px;

    right: 10px;

    animation-delay:
        1.1s;
}


.rc-tag-four {

    bottom: 92px;

    left: 15px;

    animation-delay:
        1.7s;
}


@keyframes rcTagFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-6px);

    }

}


/* =========================================================
   GROUND
========================================================= */

.rc-checklist-ground {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 35px;

    height: 30px;

    border-bottom:
        2px solid
        rgba(255,255,255,0.2);
}


.rc-ground-circle {

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background:
        var(--orange);

}


.rc-ground-circle:first-child {

    left: 15%;

    bottom: 5px;
}


.rc-ground-circle:nth-child(2) {

    left: 20%;

    bottom: 16px;

    width: 6px;

    height: 6px;
}


.rc-ground-leaf {

    position: absolute;

    right: 16%;

    bottom: 0;

    width: 50px;

    height: 30px;

    border-radius:
        100% 0 100% 0;

    background:
        rgba(235,126,0,0.5);

    transform:
        rotate(-20deg);
}


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

.rc-checklist-content {

    width: 100%;
}


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

.rc-checklist-content-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}


.rc-checklist-mini-label {

    display: block;

    margin-bottom: 5px;

    color:
        var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.rc-checklist-content-top h3 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(24px, 2.3vw, 32px);

    font-weight: 900;
}


/* =========================================================
   COUNTER
========================================================= */

.rc-checklist-counter {

    display: flex;

    align-items: baseline;

    padding:
        8px 12px;

    border-radius: 9px;

    color:
        var(--dark-text);

    background:
        #f4f4f4;
}


.rc-checklist-counter strong {

    color:
        var(--orange);

    font-size: 20px;

    font-weight: 900;
}


.rc-checklist-counter span {

    color:
        #999999;

    font-size: 10px;

    font-weight: 800;
}


/* =========================================================
   PROGRESS
========================================================= */

.rc-checklist-progress {

    width: 100%;

    height: 5px;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 20px;

    background:
        #eeeeee;
}


.rc-checklist-progress-bar {

    width: 0%;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );

    transition:
        width .5s ease;
}


/* =========================================================
   CHECK ITEMS
========================================================= */

.rc-checklist-items {

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.rc-check-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        13px 15px;

    border:
        1px solid
        #e7e7e7;

    border-radius: 12px;

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

    box-shadow:
        0 6px 20px
        rgba(0,0,0,0.035);

    cursor: pointer;

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


.rc-check-item:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(235,126,0,0.3);

    background:
        #fffaf5;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,0.07);
}


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

.rc-check-icon {

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1.5px solid
        var(--orange);

    border-radius: 50%;

    color:
        var(--orange);

    background:
        #fff7ef;

    font-size: 13px;

    font-weight: 900;

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


.rc-check-item:hover
.rc-check-icon {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        scale(1.08);
}


/* =========================================================
   CHECK TEXT
========================================================= */

.rc-check-text {

    flex: 1;

    min-width: 0;
}


.rc-check-text strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--dark-text);

    font-size:
        clamp(12px, 1vw, 14px);

    line-height: 1.35;

    font-weight: 800;
}


.rc-check-text p {

    margin: 0;

    color:
        #777777;

    font-size:
        10px;

    line-height: 1.5;
}


/* =========================================================
   STATUS
========================================================= */

.rc-check-status {

    flex-shrink: 0;

    padding:
        5px 8px;

    border-radius: 20px;

    color:
        #777777;

    background:
        #f3f3f3;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .6px;
}


/* =========================================================
   COMPLETION BOX
========================================================= */

.rc-checklist-complete {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 17px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(235,126,0,0.2);

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #fff5ea,
            #ffffff
        );
}


.rc-complete-icon {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size: 13px;

    font-weight: 900;
}


.rc-checklist-complete strong {

    display: block;

    color:
        var(--dark-text);

    font-size: 11px;
}


.rc-checklist-complete span {

    display: block;

    margin-top: 2px;

    color:
        #777777;

    font-size: 9px;
}


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

@media (max-width: 1050px) {

    .rc-checklist-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .rc-checklist-visual {

        width:
            min(650px, 100%);

        margin:
            0 auto;

    }


    .rc-checklist-content {

        width:
            min(800px, 100%);

        margin:
            0 auto;

    }

}


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

@media (max-width: 650px) {

    .rc-checklist-section {

        padding:
            55px 0 65px;

    }


    .rc-checklist-container {

        width:
            91%;

    }


    /* Header */

    .rc-checklist-header {

        margin-bottom:
            35px;

    }


    .rc-checklist-eyebrow {

        font-size:
            7px;

        letter-spacing:
            1.6px;

    }


    .rc-checklist-eyebrow::before,
    .rc-checklist-eyebrow::after {

        width:
            14px;

    }


    .rc-checklist-header h2 {

        font-size:
            clamp(29px, 8vw, 40px);

        letter-spacing:
            -1.3px;

    }


    .rc-checklist-header p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    /* Visual */

    .rc-checklist-visual {

        min-height:
            410px;

        border-radius:
            18px;

    }


    .rc-checklist-floating-number {

        top:
            18px;

        left:
            18px;

        width:
            52px;

        height:
            52px;

    }


    .rc-checklist-floating-number span {

        font-size:
            16px;

    }


    .rc-checklist-clipboard {

        width:
            190px;

        height:
            275px;

        padding:
            20px 15px;

        margin-top:
            25px;

    }


    .rc-checklist-clip {

        width:
            60px;

        height:
            35px;

    }


    .rc-checklist-paper {

        padding:
            17px 13px;

    }


    .rc-paper-heading {

        font-size:
            14px;

    }


    .rc-paper-item {

        margin-bottom:
            12px;

    }


    .rc-paper-item i {

        width:
            19px;

        height:
            19px;

        font-size:
            10px;

    }


    .rc-checklist-tag {

        padding:
            7px 9px;

        font-size:
            7px;

    }


    .rc-checklist-tag span {

        width:
            15px;

        height:
            15px;

        font-size:
            7px;

    }


    .rc-tag-one {

        top:
            95px;

        right:
            8px;

    }


    .rc-tag-two {

        top:
            145px;

        right:
            0;

    }


    .rc-tag-three {

        bottom:
            125px;

        right:
            5px;

    }


    .rc-tag-four {

        bottom:
            75px;

        left:
            8px;

    }


    /* Content */

    .rc-checklist-content-top {

        align-items:
            center;

    }


    .rc-checklist-content-top h3 {

        font-size:
            23px;

    }


    .rc-checklist-mini-label {

        font-size:
            7px;

    }


    .rc-check-item {

        align-items:
            flex-start;

        gap:
            10px;

        padding:
            12px;

    }


    .rc-check-icon {

        width:
            29px;

        height:
            29px;

        font-size:
            11px;

    }


    .rc-check-text strong {

        font-size:
            12px;

    }


    .rc-check-text p {

        font-size:
            9px;

    }


    .rc-check-status {

        display:
            none;

    }


    .rc-checklist-complete {

        padding:
            12px;

    }

}


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

@media (max-width: 380px) {

    .rc-checklist-header h2 {

        font-size:
            28px;

    }


    .rc-checklist-visual {

        min-height:
            370px;

    }


    .rc-checklist-clipboard {

        width:
            170px;

        height:
            250px;

    }


    .rc-checklist-tag {

        font-size:
            6px;

    }


    .rc-check-text strong {

        font-size:
            11px;

    }


    .rc-check-text p {

        font-size:
            8px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .rc-checklist-heading-line span,
    .rc-checklist-tag {

        animation:
            none;

    }


    .rc-check-item,
    .rc-check-icon,
    .rc-checklist-progress-bar {

        transition:
            none;

    }

}


:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.rc-importance-section {
    position: relative;
    width: 100%;
    padding: 80px 0 75px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;
    isolation: isolate;
}


/* =====================================================
   BACKGROUND DECORATIONS
===================================================== */

.rc-importance-bg {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}


.rc-importance-bg-1 {
    width: 420px;
    height: 420px;

    top: -280px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(235, 126, 0, 0.13),
            transparent 70%
        );
}


.rc-importance-bg-2 {
    width: 350px;
    height: 350px;

    bottom: -250px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(0, 0, 0, 0.07),
            transparent 70%
        );
}


/* =====================================================
   CONTAINER
===================================================== */

.rc-importance-container {
    width: min(1320px, 92%);
    margin: 0 auto;
}


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

.rc-importance-header {
    text-align: center;
    max-width: 1150px;
    margin: 0 auto 38px;
}


.rc-importance-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 10px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
}


.rc-importance-label::before,
.rc-importance-label::after {
    content: "";

    width: 25px;
    height: 2px;

    background: var(--orange);
}


/* =====================================================
   HEADING
===================================================== */

.rc-importance-header h2 {
    margin: 0;

    color: var(--dark-text);

    font-size:
        clamp(30px, 4vw, 52px);

    line-height: 1.13;

    font-weight: 900;

    letter-spacing: -1.8px;
}


.rc-importance-header h2 span {
    background:
        linear-gradient(
            90deg,
            #111111,
            var(--orange)
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


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

.rc-importance-line {
    width: 90px;
    height: 4px;

    margin: 17px auto 0;

    border-radius: 20px;

    background: var(--light-gray);

    overflow: hidden;
}


.rc-importance-line span {
    display: block;

    width: 55%;
    height: 100%;

    background: var(--orange);

    border-radius: inherit;

    animation:
        rcImportanceLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcImportanceLine {

    0% {
        width: 25%;
    }

    100% {
        width: 100%;
    }

}


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

.rc-importance-content {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 30px 35px;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 18px;

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

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.06);

    backdrop-filter: blur(8px);

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


.rc-importance-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    border-radius:
        18px 0 0 18px;

    background:
        linear-gradient(
            180deg,
            var(--black),
            var(--orange)
        );
}


.rc-importance-content:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(235, 126, 0, 0.25);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.09);
}


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

.rc-importance-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

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

    border-radius: 14px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--black),
            #333333
        );

    box-shadow:
        0 10px 22px
        rgba(0, 0, 0, 0.15);

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


.rc-importance-icon span {
    font-size: 20px;
    font-weight: 900;
}


.rc-importance-content:hover
.rc-importance-icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    background:
        var(--orange);
}


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

.rc-importance-text {
    flex: 1;
}


.rc-importance-text p {
    margin: 0;

    color: #444444;

    font-size:
        clamp(14px, 1.15vw, 17px);

    line-height: 1.75;

    text-align: justify;
}


.rc-importance-text p + p {
    margin-top: 14px;
}


/* =====================================================
   BOTTOM STATS
===================================================== */

.rc-importance-bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(800px, 100%);

    margin:
        25px auto 0;

    padding:
        16px 20px;

    border:
        1px solid
        rgba(0, 0, 0, 0.07);

    border-radius: 14px;

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

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.04);
}


.rc-importance-stat {
    flex: 1;

    text-align: center;
}


.rc-importance-stat strong {
    display: block;

    color:
        var(--orange);

    font-size: 20px;

    line-height: 1;

    font-weight: 900;
}


.rc-importance-stat span {
    display: block;

    margin-top: 5px;

    color:
        #666666;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.rc-importance-divider {
    width: 1px;
    height: 30px;

    background:
        #dddddd;
}


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

@media (max-width: 900px) {

    .rc-importance-section {
        padding:
            65px 0 70px;
    }


    .rc-importance-header {
        margin-bottom:
            30px;
    }


    .rc-importance-content {
        padding:
            27px;
    }


    .rc-importance-text p {
        font-size:
            15px;
    }

}


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

@media (max-width: 650px) {

    .rc-importance-section {
        padding:
            50px 0 55px;
    }


    .rc-importance-container {
        width:
            91%;
    }


    /* Header */

    .rc-importance-header {
        margin-bottom:
            27px;
    }


    .rc-importance-label {
        font-size:
            7px;

        letter-spacing:
            1.7px;
    }


    .rc-importance-label::before,
    .rc-importance-label::after {
        width:
            14px;
    }


    .rc-importance-header h2 {
        font-size:
            clamp(27px, 8vw, 38px);

        letter-spacing:
            -1px;
    }


    .rc-importance-line {
        width:
            70px;

        height:
            3px;

        margin-top:
            13px;
    }


    /* Content */

    .rc-importance-content {
        flex-direction:
            column;

        gap:
            15px;

        padding:
            22px 20px;
    }


    .rc-importance-content::before {
        width:
            100%;

        height:
            3px;

        top:
            0;

        left:
            0;

        border-radius:
            18px 18px 0 0;
    }


    .rc-importance-icon {
        width:
            42px;

        height:
            42px;

        border-radius:
            11px;
    }


    .rc-importance-icon span {
        font-size:
            16px;
    }


    .rc-importance-text p {
        font-size:
            13px;

        line-height:
            1.75;

        text-align:
            left;
    }


    /* Bottom */

    .rc-importance-bottom {
        padding:
            14px 8px;

        margin-top:
            18px;
    }


    .rc-importance-stat strong {
        font-size:
            17px;
    }


    .rc-importance-stat span {
        font-size:
            7px;

        letter-spacing:
            .5px;
    }


    .rc-importance-divider {
        height:
            25px;
    }

}


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

@media (max-width: 380px) {

    .rc-importance-header h2 {
        font-size:
            27px;
    }


    .rc-importance-content {
        padding:
            20px 17px;
    }


    .rc-importance-text p {
        font-size:
            12px;
    }


    .rc-importance-stat strong {
        font-size:
            15px;
    }


    .rc-importance-stat span {
        font-size:
            6px;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .rc-importance-line span {
        animation:
            none;
    }

    .rc-importance-content,
    .rc-importance-icon {
        transition:
            none;
    }

}


:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-benefits-section {

    position: relative;

    width: 100%;

    padding: 85px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.rc-benefits-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-benefits-bg-1 {

    width: 520px;

    height: 520px;

    top: -320px;

    right: -250px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,.13),
            transparent 68%
        );
}


.rc-benefits-bg-2 {

    width: 450px;

    height: 450px;

    bottom: -300px;

    left: -230px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.06),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-benefits-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


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

.rc-benefits-header {

    text-align:
        center;

    max-width:
        1050px;

    margin:
        0 auto 18px;
}


.rc-benefits-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        9px;

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        2.5px;
}


.rc-benefits-eyebrow::before,
.rc-benefits-eyebrow::after {

    content:
        "";

    width:
        25px;

    height:
        2px;

    background:
        var(--orange);
}


.rc-benefits-header h2 {

    margin:
        0;

    color:
        var(--dark-text);

    font-size:
        clamp(31px, 4vw, 52px);

    line-height:
        1.1;

    font-weight:
        900;

    letter-spacing:
        -1.8px;
}


.rc-benefits-header h2 span {

    background:
        linear-gradient(
            90deg,
            #111111,
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


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

.rc-benefits-title-line {

    width:
        90px;

    height:
        4px;

    margin:
        15px auto 0;

    border-radius:
        20px;

    overflow:
        hidden;

    background:
        var(--light-gray);
}


.rc-benefits-title-line span {

    display:
        block;

    width:
        55%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--orange);

    animation:
        rcBenefitsLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcBenefitsLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


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

.rc-benefits-intro {

    max-width:
        1000px;

    margin:
        0 auto 40px;

    text-align:
        center;

    color:
        #555555;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height:
        1.7;
}


/* =========================================================
   MAIN GRID
========================================================= */

.rc-benefits-grid {

    display:
        grid;

    grid-template-columns:
        minmax(420px, 1fr)
        minmax(500px, 1fr);

    gap:
        75px;

    align-items:
        center;
}


/* =========================================================
   LEFT LIST
========================================================= */

.rc-benefits-list-wrapper {

    position:
        relative;
}


.rc-benefits-list-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        20px;
}


.rc-benefits-list-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        45px;

    height:
        45px;

    flex-shrink:
        0;

    border-radius:
        12px;

    color:
        var(--white);

    background:
        var(--black);

    font-size:
        14px;

    font-weight:
        900;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}


.rc-benefits-list-heading small {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--orange);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.rc-benefits-list-heading h3 {

    margin:
        0;

    color:
        var(--dark-text);

    font-size:
        25px;

    font-weight:
        900;
}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.rc-benefits-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.rc-benefit-item {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        12px 15px;

    border:
        1px solid
        #e8e8e8;

    border-radius:
        12px;

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

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.035);

    cursor:
        pointer;

    overflow:
        hidden;

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


.rc-benefit-item::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        3px;

    height:
        100%;

    background:
        var(--orange);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform .3s ease;
}


.rc-benefit-item:hover {

    transform:
        translateX(7px);

    border-color:
        rgba(235,126,0,.3);

    background:
        #fffaf5;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.08);
}


.rc-benefit-item:hover::before {

    transform:
        scaleY(1);
}


/* =========================================================
   CHECK
========================================================= */

.rc-benefit-check {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1.5px solid
        var(--orange);

    border-radius:
        50%;

    color:
        var(--orange);

    background:
        #fff8f0;

    font-size:
        12px;

    font-weight:
        900;

    transition:
        .3s ease;
}


.rc-benefit-item:hover
.rc-benefit-check {

    color:
        var(--white);

    background:
        var(--orange);

    transform:
        scale(1.08);
}


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

.rc-benefit-content {

    flex:
        1;

    min-width:
        0;
}


.rc-benefit-content strong {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--dark-text);

    font-size:
        14px;

    font-weight:
        800;
}


.rc-benefit-content span {

    display:
        block;

    color:
        #777777;

    font-size:
        10px;

    line-height:
        1.4;
}


/* =========================================================
   INDEX
========================================================= */

.rc-benefit-index {

    color:
        #dddddd;

    font-size:
        12px;

    font-weight:
        900;

    transition:
        color .3s ease;
}


.rc-benefit-item:hover
.rc-benefit-index {

    color:
        var(--orange);
}


/* =========================================================
   DIAGRAM
========================================================= */

.rc-benefits-diagram-wrapper {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        520px;
}


.rc-benefits-diagram {

    position:
        relative;

    width:
        510px;

    height:
        510px;

    max-width:
        100%;

    transform:
        scale(.95);
}


/* =========================================================
   RINGS
========================================================= */

.rc-benefits-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(235,126,0,.2);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);
}


.rc-ring-outer {

    width:
        310px;

    height:
        310px;

    animation:
        rcRingPulse
        4s
        ease-in-out
        infinite;
}


.rc-ring-middle {

    width:
        230px;

    height:
        230px;

    border-color:
        rgba(0,0,0,.12);
}


@keyframes rcRingPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }

}


/* =========================================================
   CENTER
========================================================= */

.rc-benefits-center {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        180px;

    height:
        180px;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px solid
        rgba(235,126,0,.25);

    border-radius:
        50%;

    background:
        var(--white);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.1);

    z-index:
        5;
}


.rc-center-icon {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        7px;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size:
        13px;

    font-weight:
        900;
}


.rc-benefits-center small {

    color:
        #999999;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.rc-benefits-center strong {

    color:
        var(--dark-text);

    font-size:
        13px;

    line-height:
        1.1;
}


.rc-benefits-center b {

    color:
        var(--orange);

    font-size:
        13px;

    line-height:
        1.1;
}


/* =========================================================
   DIAGRAM CARDS
========================================================= */

.rc-diagram-card {

    position:
        absolute;

    width:
        105px;

    min-height:
        75px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        8px;

    text-align:
        center;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-radius:
        14px;

    background:
        var(--white);

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

    z-index:
        6;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.rc-diagram-card:hover {

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.16);
}


.rc-diagram-icon {

    width:
        29px;

    height:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size:
        13px;

    font-weight:
        900;
}


.rc-diagram-card span {

    color:
        var(--dark-text);

    font-size:
        8px;

    line-height:
        1.2;

    font-weight:
        800;
}


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

.rc-card-top {

    top:
        5px;

    left:
        50%;

    transform:
        translateX(-50%);
}


.rc-card-top-right {

    top:
        75px;

    right:
        25px;
}


.rc-card-right {

    top:
        215px;

    right:
        0;
}


.rc-card-bottom-right {

    bottom:
        75px;

    right:
        25px;
}


.rc-card-bottom {

    bottom:
        5px;

    left:
        50%;

    transform:
        translateX(-50%);
}


.rc-card-bottom-left {

    bottom:
        75px;

    left:
        25px;
}


.rc-card-left {

    top:
        215px;

    left:
        0;
}


/* =========================================================
   HOVER CARD POSITIONS
========================================================= */

.rc-card-top:hover {

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


.rc-card-bottom:hover {

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


.rc-card-top-right:hover,
.rc-card-right:hover,
.rc-card-bottom-right:hover,
.rc-card-bottom-left:hover,
.rc-card-left:hover {

    transform:
        translateY(-5px);
}


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

.rc-benefit-dot {

    position:
        absolute;

    width:
        11px;

    height:
        11px;

    border:
        2px solid
        var(--white);

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(235,126,0,.12);

    z-index:
        3;

    animation:
        rcDotPulse
        2s
        ease-in-out
        infinite;
}


.dot-1 {
    top: 145px;
    left: 105px;
}


.dot-2 {
    top: 95px;
    left: 185px;
}


.dot-3 {
    top: 105px;
    right: 185px;
}


.dot-4 {
    top: 245px;
    right: 85px;
}


.dot-5 {
    bottom: 105px;
    right: 185px;
}


.dot-6 {
    bottom: 95px;
    left: 185px;
}


.dot-7 {
    top: 245px;
    left: 85px;
}


@keyframes rcDotPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.3);
    }

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.rc-benefits-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    width:
        min(720px, 100%);

    margin:
        35px auto 0;

    padding:
        15px 20px;

    border:
        1px solid
        rgba(235,126,0,.2);

    border-radius:
        14px;

    background:
        linear-gradient(
            90deg,
            #fff5e9,
            #ffffff
        );

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.04);
}


.rc-benefits-bottom-icon {

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size:
        13px;

    font-weight:
        900;
}


.rc-benefits-bottom strong {

    display:
        block;

    color:
        var(--dark-text);

    font-size:
        12px;
}


.rc-benefits-bottom span {

    display:
        block;

    margin-top:
        2px;

    color:
        #777777;

    font-size:
        9px;
}


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

@media (max-width: 1050px) {

    .rc-benefits-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .rc-benefits-list-wrapper {

        width:
            min(750px, 100%);

        margin:
            0 auto;
    }


    .rc-benefits-diagram-wrapper {

        min-height:
            500px;
    }

}


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

@media (max-width: 650px) {

    .rc-benefits-section {

        padding:
            55px 0 65px;
    }


    .rc-benefits-container {

        width:
            91%;
    }


    .rc-benefits-header {

        margin-bottom:
            15px;
    }


    .rc-benefits-eyebrow {

        font-size:
            7px;

        letter-spacing:
            1.6px;
    }


    .rc-benefits-eyebrow::before,
    .rc-benefits-eyebrow::after {

        width:
            14px;
    }


    .rc-benefits-header h2 {

        font-size:
            clamp(28px, 8vw, 39px);

        letter-spacing:
            -1px;
    }


    .rc-benefits-intro {

        margin-bottom:
            30px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    /* List */

    .rc-benefits-list-heading {

        margin-bottom:
            15px;
    }


    .rc-benefits-list-number {

        width:
            40px;

        height:
            40px;
    }


    .rc-benefits-list-heading h3 {

        font-size:
            22px;
    }


    .rc-benefit-item {

        padding:
            11px;

        gap:
            9px;
    }


    .rc-benefit-check {

        width:
            27px;

        height:
            27px;

        font-size:
            10px;
    }


    .rc-benefit-content strong {

        font-size:
            12px;
    }


    .rc-benefit-content span {

        font-size:
            8px;
    }


    .rc-benefit-index {

        font-size:
            9px;
    }


    /* Diagram */

    .rc-benefits-diagram-wrapper {

        min-height:
            380px;
    }


    .rc-benefits-diagram {

        width:
            370px;

        height:
            370px;

        transform:
            scale(.95);
    }


    .rc-ring-outer {

        width:
            245px;

        height:
            245px;
    }


    .rc-ring-middle {

        width:
            185px;

        height:
            185px;
    }


    .rc-benefits-center {

        width:
            135px;

        height:
            135px;
    }


    .rc-center-icon {

        width:
            24px;

        height:
            24px;

        font-size:
            10px;
    }


    .rc-benefits-center strong,
    .rc-benefits-center b {

        font-size:
            10px;
    }


    .rc-diagram-card {

        width:
            80px;

        min-height:
            60px;

        border-radius:
            10px;
    }


    .rc-diagram-icon {

        width:
            23px;

        height:
            23px;

        font-size:
            10px;
    }


    .rc-diagram-card span {

        font-size:
            6px;
    }


    .rc-card-top {

        top:
            0;
    }


    .rc-card-top-right {

        top:
            55px;

        right:
            5px;
    }


    .rc-card-right {

        top:
            155px;

        right:
            -2px;
    }


    .rc-card-bottom-right {

        bottom:
            55px;

        right:
            5px;
    }


    .rc-card-bottom {

        bottom:
            0;
    }


    .rc-card-bottom-left {

        bottom:
            55px;

        left:
            5px;
    }


    .rc-card-left {

        top:
            155px;

        left:
            -2px;
    }


    .dot-1 {
        top: 105px;
        left: 72px;
    }


    .dot-2 {
        top: 70px;
        left: 135px;
    }


    .dot-3 {
        top: 78px;
        right: 135px;
    }


    .dot-4 {
        top: 180px;
        right: 55px;
    }


    .dot-5 {
        bottom: 78px;
        right: 135px;
    }


    .dot-6 {
        bottom: 70px;
        left: 135px;
    }


    .dot-7 {
        top: 180px;
        left: 55px;
    }


    /* Bottom */

    .rc-benefits-bottom {

        align-items:
            flex-start;

        justify-content:
            flex-start;

        margin-top:
            25px;

        padding:
            13px;
    }


    .rc-benefits-bottom-icon {

        width:
            30px;

        height:
            30px;
    }


    .rc-benefits-bottom strong {

        font-size:
            10px;
    }


    .rc-benefits-bottom span {

        font-size:
            8px;

        line-height:
            1.4;
    }

}


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

@media (max-width: 390px) {

    .rc-benefits-diagram {

        width:
            330px;

        height:
            330px;
    }


    .rc-benefits-diagram-wrapper {

        min-height:
            340px;
    }


    .rc-diagram-card {

        width:
            70px;

        min-height:
            54px;
    }


    .rc-benefits-center {

        width:
            120px;

        height:
            120px;
    }


    .rc-ring-outer {

        width:
            215px;

        height:
            215px;
    }


    .rc-ring-middle {

        width:
            160px;

        height:
            160px;
    }

}

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-compare-section {

    position: relative;

    width: 100%;

    padding: 85px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.rc-compare-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-compare-bg-one {

    width: 500px;
    height: 500px;

    top: -300px;
    right: -220px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,.12),
            transparent 70%
        );
}


.rc-compare-bg-two {

    width: 400px;
    height: 400px;

    bottom: -280px;
    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.06),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-compare-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


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

.rc-compare-header {

    text-align:
        center;

    max-width:
        1150px;

    margin:
        0 auto 18px;
}


.rc-compare-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        8px;

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        2.5px;
}


.rc-compare-eyebrow::before,
.rc-compare-eyebrow::after {

    content:
        "";

    width:
        25px;

    height:
        2px;

    background:
        var(--orange);
}


.rc-compare-header h2 {

    margin:
        0;

    color:
        var(--dark-text);

    font-size:
        clamp(30px, 4vw, 50px);

    line-height:
        1.12;

    font-weight:
        900;

    letter-spacing:
        -1.7px;
}


.rc-compare-header h2 span {

    background:
        linear-gradient(
            90deg,
            #111111,
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


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

.rc-compare-title-line {

    width:
        90px;

    height:
        4px;

    margin:
        15px auto 0;

    background:
        #e5e5e5;

    border-radius:
        50px;

    overflow:
        hidden;
}


.rc-compare-title-line span {

    display:
        block;

    width:
        55%;

    height:
        100%;

    background:
        var(--orange);

    border-radius:
        inherit;

    animation:
        rcCompareLine
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcCompareLine {

    from {
        width: 25%;
    }

    to {
        width: 100%;
    }

}


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

.rc-compare-description {

    max-width:
        1120px;

    margin:
        0 auto 32px;

    color:
        #555555;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height:
        1.7;

    text-align:
        center;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.rc-compare-table-wrapper {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0,0,0,.08);

    border-radius:
        18px;

    background:
        var(--white);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.08);
}


/* =========================================================
   TABLE
========================================================= */

.rc-compare-table {

    width:
        100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    table-layout:
        fixed;
}


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

.rc-compare-table thead th {

    padding:
        18px 15px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #111111,
            #292929
        );

    font-size:
        13px;

    font-weight:
        800;

    text-align:
        center;

    border-right:
        1px solid
        rgba(255,255,255,.1);
}


.rc-compare-table thead th:first-child {

    border-radius:
        17px 0 0 0;
}


.rc-compare-table thead th:last-child {

    border-radius:
        0 17px 0 0;

    border-right:
        none;
}


/* Orange top line */

.rc-compare-table thead tr {

    position:
        relative;
}


/* =========================================================
   BODY CELLS
========================================================= */

.rc-compare-table tbody td {

    position:
        relative;

    padding:
        17px 14px;

    color:
        #444444;

    background:
        #ffffff;

    border-right:
        1px solid
        #dedede;

    border-bottom:
        1px solid
        #dedede;

    font-size:
        13px;

    line-height:
        1.65;

    vertical-align:
        top;
}


.rc-compare-table tbody tr:last-child td {

    border-bottom:
        none;
}


.rc-compare-table tbody td:last-child {

    border-right:
        none;
}


/* =========================================================
   ROW HOVER
========================================================= */

.rc-compare-table tbody tr {

    transition:
        transform .25s ease;
}


.rc-compare-table tbody tr:hover td {

    background:
        #fffaf5;
}


.rc-compare-table tbody tr:hover {

    box-shadow:
        inset 4px 0 0
        var(--orange);
}


/* =========================================================
   COMPANY NAME
========================================================= */

.rc-company-name {

    color:
        #111111 !important;

    background:
        #fafafa !important;

    font-weight:
        800;

    text-align:
        left;
}


.rc-row-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        27px;

    height:
        27px;

    margin-right:
        6px;

    border-radius:
        7px;

    color:
        var(--orange);

    background:
        #fff0df;

    font-size:
        9px;

    font-weight:
        900;
}


/* =========================================================
   BENEFIT CELL
========================================================= */

.rc-benefit-cell {

    background:
        #fff7ed !important;

    color:
        #b85c00 !important;

    font-weight:
        800;
}


.rc-benefit-cell span {

    position:
        relative;

    padding-left:
        17px;
}


.rc-benefit-cell span::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        0;

    color:
        var(--orange);

    font-weight:
        900;
}


/* =========================================================
   COLUMN WIDTH
========================================================= */

.rc-compare-table th:nth-child(1),
.rc-compare-table td:nth-child(1) {
    width: 14%;
}

.rc-compare-table th:nth-child(2),
.rc-compare-table td:nth-child(2) {
    width: 16%;
}

.rc-compare-table th:nth-child(3),
.rc-compare-table td:nth-child(3) {
    width: 22%;
}

.rc-compare-table th:nth-child(4),
.rc-compare-table td:nth-child(4) {
    width: 30%;
}

.rc-compare-table th:nth-child(5),
.rc-compare-table td:nth-child(5) {
    width: 18%;
}


/* =========================================================
   MOBILE CARDS HIDDEN
========================================================= */

.rc-compare-mobile {
    display:
        none;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.rc-compare-note {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    width:
        min(720px, 100%);

    margin:
        28px auto 0;

    padding:
        15px 20px;

    border:
        1px solid
        rgba(235,126,0,.2);

    border-radius:
        14px;

    background:
        linear-gradient(
            90deg,
            #fff3e4,
            #ffffff
        );

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.04);
}


.rc-note-icon {

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-size:
        13px;

    font-weight:
        900;
}


.rc-compare-note strong {

    display:
        block;

    color:
        var(--dark-text);

    font-size:
        12px;
}


.rc-compare-note span {

    display:
        block;

    margin-top:
        3px;

    color:
        #777777;

    font-size:
        9px;
}


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

@media (max-width: 1000px) {

    .rc-compare-section {

        padding:
            65px 0 70px;
    }


    .rc-compare-table-wrapper {

        overflow-x:
            auto;

        border-radius:
            14px;
    }


    .rc-compare-table {

        min-width:
            950px;
    }

}


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

@media (max-width: 650px) {

    .rc-compare-section {

        padding:
            55px 0 65px;
    }


    .rc-compare-container {

        width:
            91%;
    }


    /* Header */

    .rc-compare-header {

        margin-bottom:
            15px;
    }


    .rc-compare-eyebrow {

        font-size:
            7px;

        letter-spacing:
            1.6px;
    }


    .rc-compare-eyebrow::before,
    .rc-compare-eyebrow::after {

        width:
            14px;
    }


    .rc-compare-header h2 {

        font-size:
            clamp(27px, 8vw, 38px);

        letter-spacing:
            -1px;
    }


    .rc-compare-description {

        margin-bottom:
            25px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    /* Hide table */

    .rc-compare-table-wrapper {

        display:
            none;
    }


    /* Mobile Cards */

    .rc-compare-mobile {

        display:
            flex;

        flex-direction:
            column;

        gap:
            15px;
    }


    .rc-compare-card {

        position:
            relative;

        padding:
            20px;

        border:
            1px solid
            #e6e6e6;

        border-radius:
            16px;

        background:
            var(--white);

        box-shadow:
            0 10px 28px
            rgba(0,0,0,.06);

        overflow:
            hidden;

        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .rc-compare-card::before {

        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            0;

        width:
            100%;

        height:
            3px;

        background:
            linear-gradient(
                90deg,
                var(--black),
                var(--orange)
            );
    }


    .rc-compare-card:hover {

        transform:
            translateY(-4px);

        box-shadow:
            0 16px 35px
            rgba(0,0,0,.1);
    }


    /* Card heading */

    .rc-card-top {

        display:
            flex;

        align-items:
            center;

        gap:
            12px;

        margin-bottom:
            18px;

        padding-bottom:
            14px;

        border-bottom:
            1px solid
            #eeeeee;
    }


    .rc-card-number {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            39px;

        height:
            39px;

        flex-shrink:
            0;

        border-radius:
            10px;

        color:
            var(--orange);

        background:
            #fff0df;

        font-size:
            10px;

        font-weight:
            900;
    }


    .rc-card-top h3 {

        margin:
            0;

        color:
            var(--dark-text);

        font-size:
            16px;

        line-height:
            1.3;

        font-weight:
            900;
    }


    /* Card rows */

    .rc-card-row {

        padding:
            11px 0;

        border-bottom:
            1px dashed
            #e5e5e5;
    }


    .rc-card-row span {

        display:
            block;

        margin-bottom:
            4px;

        color:
            var(--orange);

        font-size:
            9px;

        font-weight:
            900;

        text-transform:
            uppercase;

        letter-spacing:
            .8px;
    }


    .rc-card-row p {

        margin:
            0;

        color:
            #555555;

        font-size:
            12px;

        line-height:
            1.6;
    }


    /* Benefit */

    .rc-card-benefit {

        margin-top:
            14px;

        padding:
            13px;

        border-radius:
            10px;

        background:
            #fff6eb;

        border:
            1px solid
            rgba(235,126,0,.18);
    }


    .rc-card-benefit small {

        display:
            block;

        margin-bottom:
            4px;

        color:
            #999999;

        font-size:
            7px;

        font-weight:
            900;

        letter-spacing:
            1.2px;
    }


    .rc-card-benefit strong {

        display:
            block;

        color:
            #a95300;

        font-size:
            11px;

        line-height:
            1.45;
    }


    /* Bottom note */

    .rc-compare-note {

        align-items:
            flex-start;

        justify-content:
            flex-start;

        margin-top:
            25px;

        padding:
            13px;
    }


    .rc-note-icon {

        width:
            30px;

        height:
            30px;
    }


    .rc-compare-note strong {

        font-size:
            10px;
    }


    .rc-compare-note span {

        font-size:
            8px;

        line-height:
            1.45;
    }

}


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

@media (max-width: 380px) {

    .rc-compare-card {

        padding:
            17px;
    }


    .rc-card-top h3 {

        font-size:
            14px;
    }


    .rc-card-row p {

        font-size:
            11px;
    }


    .rc-card-benefit strong {

        font-size:
            10px;
    }

}



/* =========================================================
   ROOT COLORS
========================================================= */

:root {
    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --rc-gray-text: #555555;
    --rc-border: #dddddd;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.rc-conclusion-section {

    position: relative;

    width: 100%;

    padding: 85px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf5 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.rc-conclusion-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.rc-orb-left {

    width: 400px;
    height: 400px;

    left: -280px;
    top: 150px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,.12),
            rgba(235,126,0,0)
        );
}


.rc-orb-right {

    width: 500px;
    height: 500px;

    right: -350px;
    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.07),
            rgba(0,0,0,0)
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.rc-conclusion-container {

    width:
        min(1320px, 92%);

    margin:
        0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.rc-conclusion-heading {

    text-align: center;

    margin-bottom: 50px;
}


.rc-conclusion-tag {

    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--orange);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;
}


.rc-conclusion-heading h2 {

    margin: 0;

    color:
        var(--dark-text);

    font-size:
        clamp(32px, 4vw, 52px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -1.5px;
}


.rc-conclusion-line {

    width: 80px;

    height: 4px;

    margin: 15px auto 0;

    border-radius: 50px;

    background:
        #e5e5e5;

    overflow: hidden;
}


.rc-conclusion-line span {

    display: block;

    width: 60%;

    height: 100%;

    background:
        var(--orange);

    border-radius: inherit;

    animation:
        rcConclusionLine
        2s
        ease-in-out
        infinite
        alternate;
}


@keyframes rcConclusionLine {

    from {
        width: 30%;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   GRID
========================================================= */

.rc-conclusion-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(360px, .75fr);

    gap: 70px;

    align-items: start;
}


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

.rc-conclusion-content {

    position: relative;

    padding-right: 10px;
}


.rc-conclusion-content p {

    margin:
        0 0 20px;

    color:
        #333333;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height:
        1.8;

    text-align:
        justify;
}


/* Intro */

.rc-conclusion-intro {

    position: relative;

    padding-left: 18px;

    margin-bottom: 20px;
}


.rc-intro-line {

    position: absolute;

    left: 0;

    top: 7px;

    width: 4px;

    height: calc(100% - 14px);

    border-radius: 20px;

    background:
        var(--orange);
}


.rc-conclusion-intro p {

    margin-bottom: 0;

    color:
        #222222;

    font-weight:
        500;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.rc-conclusion-highlight {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 30px;

    padding:
        17px 20px;

    border:
        1px solid
        rgba(235,126,0,.2);

    border-left:
        4px solid
        var(--orange);

    border-radius:
        12px;

    background:
        linear-gradient(
            90deg,
            #fff2df,
            #ffffff
        );

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.04);
}


.rc-highlight-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    color:
        var(--white);

    background:
        var(--orange);

    font-weight: 900;

    box-shadow:
        0 6px 15px
        rgba(235,126,0,.25);
}


.rc-conclusion-highlight strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--dark-text);

    font-size: 13px;
}


.rc-conclusion-highlight span {

    display: block;

    color:
        #777777;

    font-size: 11px;

    line-height: 1.5;
}


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

.rc-consultation-card {

    position: relative;

    padding:
        32px;

    border:
        1px solid
        rgba(0,0,0,.12);

    border-radius:
        18px;

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

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.09);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.rc-consultation-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.13);
}


/* Orange top decoration */

.rc-consultation-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--black),
            var(--orange)
        );
}


/* Corner decoration */

.rc-form-decoration {

    position: absolute;

    right: -45px;
    top: -45px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    border:
        1px solid
        rgba(235,126,0,.15);
}


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

.rc-form-header {

    margin-bottom:
        24px;
}


.rc-form-badge {

    display:
        inline-block;

    margin-bottom:
        9px;

    padding:
        5px 10px;

    border-radius:
        50px;

    color:
        var(--orange);

    background:
        #fff1df;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}


.rc-form-header h3 {

    margin:
        0 0 7px;

    color:
        var(--dark-text);

    font-size:
        clamp(24px, 2vw, 30px);

    line-height:
        1.2;

    font-weight:
        900;
}


.rc-form-header h3 span {

    color:
        var(--orange);
}


.rc-form-header p {

    margin:
        0;

    color:
        #777777;

    font-size:
        11px;

    line-height:
        1.6;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.rc-input-group {

    margin-bottom:
        16px;
}


.rc-input-group label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #333333;

    font-size:
        10px;

    font-weight:
        800;
}


.rc-input-wrapper {

    position:
        relative;
}


.rc-input-icon {

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--orange);

    font-size:
        13px;

    pointer-events:
        none;
}


.rc-input-group input {

    width:
        100%;

    height:
        50px;

    padding:
        0 14px 0 40px;

    border:
        1px solid
        #d8d8d8;

    border-radius:
        10px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--dark-text);

    font-size:
        12px;

    box-sizing:
        border-box;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.rc-input-group input::placeholder {

    color:
        #999999;
}


.rc-input-group input:focus {

    border-color:
        var(--orange);

    background:
        #fffaf5;

    box-shadow:
        0 0 0 3px
        rgba(235,126,0,.10);
}


/* Error */

.rc-error {

    display:
        none;

    margin-top:
        5px;

    color:
        #d33;

    font-size:
        9px;
}


.rc-input-group.rc-invalid
.rc-error {

    display:
        block;
}


.rc-input-group.rc-invalid input {

    border-color:
        #d33;
}


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

.rc-apply-btn {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    width:
        100%;

    height:
        52px;

    margin-top:
        5px;

    border:
        none;

    border-radius:
        10px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #111111,
            var(--orange)
        );

    font-size:
        12px;

    font-weight:
        900;

    cursor:
        pointer;

    overflow:
        hidden;

    box-shadow:
        0 10px 22px
        rgba(235,126,0,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.rc-apply-btn::before {

    content:
        "";

    position:
        absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .6s ease;
}


.rc-apply-btn:hover::before {

    left:
        130%;
}


.rc-apply-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(235,126,0,.28);
}


.rc-apply-btn:active {

    transform:
        translateY(0);
}


.rc-btn-arrow {

    font-size:
        17px;

    transition:
        transform .25s ease;
}


.rc-apply-btn:hover
.rc-btn-arrow {

    transform:
        translateX(4px);
}


/* Loading */

.rc-apply-btn.rc-loading {

    pointer-events:
        none;

    opacity:
        .75;
}


.rc-apply-btn.rc-loading
.rc-btn-text::after {

    content:
        "...";

    animation:
        rcDots 1s
        infinite;
}


@keyframes rcDots {

    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.rc-form-success {

    display:
        none;

    margin-top:
        13px;

    padding:
        11px;

    border-radius:
        8px;

    color:
        #3d6b00;

    background:
        #f0f9e8;

    border:
        1px solid
        #d5ebba;

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        700;
}


.rc-form-success.rc-show {

    display:
        block;

    animation:
        rcSuccess .4s ease;
}


@keyframes rcSuccess {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

}


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

@media (max-width: 1000px) {

    .rc-conclusion-section {

        padding:
            70px 0 75px;
    }


    .rc-conclusion-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .rc-conclusion-content {

        padding-right:
            0;
    }


    .rc-consultation-card {

        width:
            min(600px, 100%);

        margin:
            0 auto;

        box-sizing:
            border-box;
    }

}


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

@media (max-width: 600px) {

    .rc-conclusion-section {

        padding:
            55px 0 60px;
    }


    .rc-conclusion-container {

        width:
            91%;
    }


    .rc-conclusion-heading {

        margin-bottom:
            32px;
    }


    .rc-conclusion-tag {

        font-size:
            7px;

        letter-spacing:
            2px;
    }


    .rc-conclusion-heading h2 {

        font-size:
            34px;

        letter-spacing:
            -1px;
    }


    .rc-conclusion-line {

        width:
            65px;

        height:
            3px;
    }


    .rc-conclusion-grid {

        gap:
            30px;
    }


    .rc-conclusion-content p {

        font-size:
            13px;

        line-height:
            1.75;

        text-align:
            left;

        margin-bottom:
            17px;
    }


    .rc-conclusion-intro {

        padding-left:
            14px;
    }


    .rc-intro-line {

        width:
            3px;
    }


    .rc-conclusion-highlight {

        align-items:
            flex-start;

        padding:
            14px;
    }


    .rc-highlight-icon {

        width:
            32px;

        height:
            32px;

        font-size:
            11px;
    }


    .rc-conclusion-highlight strong {

        font-size:
            11px;
    }


    .rc-conclusion-highlight span {

        font-size:
            9px;
    }


    .rc-consultation-card {

        padding:
            24px 18px;

        border-radius:
            15px;
    }


    .rc-form-header h3 {

        font-size:
            24px;
    }


    .rc-form-header p {

        font-size:
            10px;
    }


    .rc-input-group input {

        height:
            48px;
    }


    .rc-apply-btn {

        height:
            50px;
    }

}


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

@media (max-width: 380px) {

    .rc-conclusion-heading h2 {

        font-size:
            30px;
    }


    .rc-conclusion-content p {

        font-size:
            12px;
    }


    .rc-consultation-card {

        padding:
            22px 15px;
    }

}




/* =========================================================
   RC TAX CONSULTANCY FAQ SECTION
========================================================= */

:root {

    --black: #000000;
    --orange: #EB7E00;
    --white: #ffffff;
    --dark-text: #222222;
    --light-gray: #eeeeee;

    --rctc-muted: #666666;
    --rctc-border: #dedede;

}


/* =========================================================
   SECTION
========================================================= */

.rctc-faq-section {

    position: relative;

    width: 100%;

    padding: 80px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff9f3 100%
        );

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.rctc-faq-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}


.rctc-faq-bg-1 {

    width: 450px;

    height: 450px;

    top: -280px;

    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(235,126,0,.12),
            transparent 70%
        );

}


.rctc-faq-bg-2 {

    width: 500px;

    height: 500px;

    right: -300px;

    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.06),
            transparent 70%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.rctc-faq-container {

    width:
        min(1280px, 92%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(320px, .8fr);

    gap:
        24px;

    align-items:
        start;

}


/* =========================================================
   LEFT FAQ BOX
========================================================= */

.rctc-faq-box {

    padding:
        30px;

    border:
        1px solid
        rgba(0,0,0,.07);

    border-radius:
        20px;

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

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.07);

}


/* =========================================================
   FAQ HEADING
========================================================= */

.rctc-faq-heading {

    margin-bottom:
        25px;

}


.rctc-faq-small-title {

    display:
        inline-block;

    margin-bottom:
        6px;

    color:
        var(--orange);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        2px;

}


.rctc-faq-heading h2 {

    margin:
        0 0 8px;

    color:
        var(--dark-text);

    font-size:
        clamp(25px, 3vw, 38px);

    line-height:
        1.15;

    font-weight:
        900;

    letter-spacing:
        -1px;

}


.rctc-faq-heading h2 span {

    color:
        var(--orange);

}


.rctc-faq-heading p {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--rctc-muted);

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   FAQ LIST
========================================================= */

.rctc-faq-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


/* =========================================================
   FAQ ITEM
========================================================= */

.rctc-faq-item {

    border:
        1px solid
        #e2e2e2;

    border-radius:
        10px;

    background:
        #ffffff;

    overflow:
        hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


.rctc-faq-item:hover {

    border-color:
        rgba(235,126,0,.4);

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.045);

}


/* =========================================================
   QUESTION
========================================================= */

.rctc-faq-question {

    width:
        100%;

    min-height:
        55px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        #222222;

    text-align:
        left;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

}


.rctc-faq-question span {

    flex:
        1;

}


.rctc-faq-plus {

    width:
        27px;

    height:
        27px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--orange);

    background:
        #fff2e3;

    font-size:
        21px;

    font-style:
        normal;

    font-weight:
        500;

    line-height:
        1;

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

}


/* =========================================================
   ACTIVE FAQ
========================================================= */

.rctc-faq-item.rctc-faq-open {

    border-color:
        var(--orange);

    box-shadow:
        0 8px 25px
        rgba(235,126,0,.08);

}


.rctc-faq-item.rctc-faq-open
.rctc-faq-plus {

    transform:
        rotate(45deg);

    color:
        var(--white);

    background:
        var(--orange);

}


/* =========================================================
   ANSWER
========================================================= */

.rctc-faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .35s ease;

}


.rctc-faq-answer p {

    overflow:
        hidden;

    margin:
        0;

    padding:
        0 15px;

    color:
        #666666;

    font-size:
        11px;

    line-height:
        1.65;

    opacity:
        0;

    transition:
        opacity .25s ease,
        padding .35s ease;

}


.rctc-faq-item.rctc-faq-open
.rctc-faq-answer {

    grid-template-rows:
        1fr;

}


.rctc-faq-item.rctc-faq-open
.rctc-faq-answer p {

    padding:
        0 15px 15px;

    opacity:
        1;

}


/* =========================================================
   RIGHT SIDEBAR
========================================================= */

.rctc-faq-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


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

.rctc-expert-card {

    position:
        relative;

    padding:
        25px 20px 20px;

    border-radius:
        18px;

    color:
        var(--white);

    background:
        linear-gradient(
            145deg,
            #111111,
            #292929
        );

    text-align:
        center;

    overflow:
        hidden;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.16);

}


/* Orange glow */

.rctc-expert-card::before {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    top:
        -90px;

    right:
        -70px;

    border-radius:
        50%;

    background:
        rgba(235,126,0,.18);

}


.rctc-expert-card::after {

    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    bottom:
        -80px;

    left:
        -70px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(235,126,0,.3);

}


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

.rctc-expert-icon {

    position:
        relative;

    z-index:
        2;

    width:
        62px;

    height:
        62px;

    margin:
        0 auto 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--black);

    background:
        var(--orange);

    border:
        5px solid
        rgba(255,255,255,.12);

    box-shadow:
        0 8px 25px
        rgba(235,126,0,.3);

}


.rctc-expert-icon span {

    font-size:
        25px;

    font-weight:
        900;

}


.rctc-expert-label {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--orange);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.8px;

}


.rctc-expert-card h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 8px;

    font-size:
        20px;

    line-height:
        1.15;

    font-weight:
        900;

}


.rctc-expert-card p {

    position:
        relative;

    z-index:
        2;

    max-width:
        300px;

    margin:
        0 auto 16px;

    color:
        #bbbbbb;

    font-size:
        10px;

    line-height:
        1.55;

}


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

.rctc-touch-btn {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        43px;

    border:
        none;

    border-radius:
        8px;

    color:
        var(--black);

    background:
        var(--orange);

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.rctc-touch-btn span {

    margin-left:
        8px;

    font-size:
        15px;

    transition:
        margin-left .25s ease;

}


.rctc-touch-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(235,126,0,.25);

}


.rctc-touch-btn:hover span {

    margin-left:
        13px;

}


/* =========================================================
   TRUST GRID
========================================================= */

.rctc-trust-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding:
        8px 0;

    border:
        1px solid
        #e3e3e3;

    border-radius:
        12px;

    background:
        #ffffff;

}


.rctc-trust-item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        75px;

    border-right:
        1px solid
        #dddddd;

    text-align:
        center;

}


.rctc-trust-item:last-child {

    border-right:
        none;

}


.rctc-trust-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        27px;

    height:
        27px;

    margin-bottom:
        5px;

    border:
        1px solid
        rgba(235,126,0,.4);

    border-radius:
        50%;

    color:
        var(--orange);

    font-size:
        11px;

    font-weight:
        900;

}


.rctc-trust-item strong {

    color:
        #222222;

    font-size:
        9px;

}


.rctc-trust-item span {

    margin-top:
        2px;

    color:
        #999999;

    font-size:
        7px;

}


/* =========================================================
   SERVICES BOX
========================================================= */

.rctc-service-box {

    padding:
        19px;

    border:
        1px solid
        #e0e0e0;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.04);

}


.rctc-service-heading {

    margin-bottom:
        15px;

}


.rctc-service-heading span {

    color:
        var(--orange);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.rctc-service-heading h3 {

    margin:
        3px 0 0;

    color:
        var(--dark-text);

    font-size:
        16px;

    font-weight:
        900;

}


/* =========================================================
   SERVICE SLIDER
========================================================= */

.rctc-service-slider {

    position:
        relative;

    min-height:
        150px;

    overflow:
        hidden;

}


.rctc-service-slide {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;

    opacity:
        0;

    transform:
        translateX(20px);

    pointer-events:
        none;

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.rctc-service-slide.rctc-active-slide {

    position:
        relative;

    opacity:
        1;

    transform:
        translateX(0);

    pointer-events:
        auto;

}


/* =========================================================
   SERVICE ITEM
========================================================= */

.rctc-service-item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        67px;

    padding:
        8px;

    border:
        1px solid
        #eeeeee;

    border-radius:
        9px;

    background:
        #fffaf5;

    text-align:
        center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.rctc-service-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(235,126,0,.35);

    background:
        #fff2e3;

}


.rctc-service-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        29px;

    height:
        29px;

    margin-bottom:
        5px;

    border-radius:
        8px;

    color:
        var(--white);

    background:
        var(--black);

    font-size:
        7px;

    font-weight:
        900;

}


.rctc-service-item strong {

    color:
        #444444;

    font-size:
        8px;

}


/* =========================================================
   SLIDER CONTROLS
========================================================= */

.rctc-slider-controls {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        13px;

}


.rctc-slider-controls button {

    width:
        26px;

    height:
        26px;

    border:
        1px solid
        #dddddd;

    border-radius:
        50%;

    color:
        #333333;

    background:
        #ffffff;

    font-size:
        17px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.rctc-slider-controls button:hover {

    color:
        var(--white);

    background:
        var(--orange);

    border-color:
        var(--orange);

}


.rctc-slider-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.rctc-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #cccccc;

    transition:
        width .25s ease,
        background .25s ease;

}


.rctc-dot.active {

    width:
        17px;

    border-radius:
        20px;

    background:
        var(--orange);

}


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

@media (max-width: 950px) {

    .rctc-faq-container {

        grid-template-columns:
            1fr;

    }


    .rctc-faq-sidebar {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        align-items:
            start;

    }


    .rctc-expert-card {

        grid-column:
            span 1;

    }


    .rctc-trust-grid {

        grid-column:
            span 1;

    }


    .rctc-service-box {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 600px) {

    .rctc-faq-section {

        padding:
            50px 0 60px;

    }


    .rctc-faq-container {

        width:
            92%;

        gap:
            18px;

    }


    .rctc-faq-box {

        padding:
            20px 14px;

        border-radius:
            15px;

    }


    .rctc-faq-small-title {

        font-size:
            7px;

    }


    .rctc-faq-heading h2 {

        font-size:
            27px;

    }


    .rctc-faq-heading p {

        font-size:
            10px;

    }


    .rctc-faq-question {

        min-height:
            52px;

        padding:
            10px 11px;

        font-size:
            10px;

    }


    .rctc-faq-plus {

        width:
            24px;

        height:
            24px;

        font-size:
            18px;

    }


    .rctc-faq-answer p {

        font-size:
            10px;

    }


    /* Sidebar */

    .rctc-faq-sidebar {

        display:
            flex;

        flex-direction:
            column;

    }


    .rctc-expert-card {

        padding:
            24px 17px 18px;

    }


    .rctc-expert-icon {

        width:
            55px;

        height:
            55px;

    }


    .rctc-expert-card h3 {

        font-size:
            19px;

    }


    .rctc-trust-item {

        min-height:
            68px;

    }


    .rctc-service-box {

        width:
            100%;

        box-sizing:
            border-box;

    }

}


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

@media (max-width: 380px) {

    .rctc-faq-heading h2 {

        font-size:
            24px;

    }


    .rctc-faq-question {

        font-size:
            9px;

    }


    .rctc-service-heading h3 {

        font-size:
            14px;

    }

}