@charset "UTF-8";

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

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

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

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

/* Variables */
/* ── DESIGN TOKENS ── */
    :root {
      --primary-color: #009B93;
      --primary-color-h: #038D85;
      --text-color: #aaaca6;
      --white-color: #FFFFFF;
      --black-color: #000;
      --surface: rgba(255, 255, 255, 0.04);
      --border: rgba(12, 8, 8, 0.08);
      --border-g: rgba(235, 187, 38, 0.08);
      --r-pill: 100px;
    }

    /* ── BASE ── */
    body {
      font-family: 'Outfit', sans-serif;
      background: #000;
      color: #fff;
      overflow-x: hidden;
      font-weight: 300;
      background: url('bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      background-attachment: fixed;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .text-gold {
      color: var(--primary-color) !important;
    }

    .text-muted-custom {
      color: var(--text-color) !important;
    }
    @media (min-width: 1200px) {
        .fs-4 {
            font-size: 1.4rem !important;
        }
    }

    /* ── NAVBAR ── */
    .nb-wrap {
      position: fixed;
      top: 30px;
      z-index: 1000;
      width: 100%;
    }

    .nb-pill {
      max-width: 1413px;
      height: 76px;
      background: rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(6px);
      border: 1px solid #171817;
      border-radius: var(--r-pill);
    }

    .nb-links a {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      transition: color .2s;
    }

    .nb-links a:hover,
    .nb-links a.active, .nb-mob a.active{
      color: var(--primary-color);
    }


    .nb-ham {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .nb-ham span {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
      margin: 5px 0;
    }

    .nb-ham[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nb-ham[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .nb-ham[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .nb-mob {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 11, 0.50);
      backdrop-filter: blur(16px);
      padding: 86px 24px 32px;
      z-index: 999;
      flex-direction: column;
    }

    .nb-mob.open {
      display: flex;
    }

    .nb-mob a {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-color);
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nb-mob a:hover {
      color: #fff;
    }

    /* ── BTN GOLD ── */
    .btn-gold {
      display: inline-flex;
      align-items: center;
      background: var(--primary-color);
      border: 1px solid var(--primary-color);
      border-radius: var(--r-pill);
      height: 52px;
      padding: 0 22px 0 4px;
      white-space: nowrap;
      transition: background .2s;
    }

    .btn-gold:hover {
      background: var(--primary-color-h);
    }

    .btn-gold .b-ico {
      width: 44px;
      height: 44px;
      background: #fff;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .btn-gold .b-ico svg path{
      stroke: var(--primary-color);
    }

    .btn-gold .b-ico img {
      width: 22px;
      height: 22px;
    }

    .btn-gold .b-lbl {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }

    /* ── BTN OUTLINE ── */
    .btn-outline-gold {
      display: inline-flex;
      align-items: center;
      background: transparent;
      border: 1px solid var(--primary-color) !important;
      border-radius: var(--r-pill);
      height: 52px;
      padding: 0 22px 0 4px !important;
      white-space: nowrap;
      transition: background .2s;
    }

    .btn-outline-gold:hover {
      background: rgba(0, 155, 147, 0.1);
    }

    .btn-outline-gold .b-ico {
      width: 44px;
      height: 44px;
      background: var(--primary-color);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .btn-outline-gold .b-ico svg path {
      stroke: var(--white-color);
    }
    .btn-outline-gold .b-ico img {
      width: 22px;
      height: 22px;
    }

    .btn-outline-gold .b-lbl {
      font-size: 16px;
      font-weight: 500;
      color: var(--primary-color);
    }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 977px;
      overflow: hidden;
    }

    .hero-inner {
      position: relative;
      z-index: 5;
      padding-top: 200px;
    }
    .hero-inner:before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 900px 500px at center 60%, rgba(0, 155, 147, .16) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-badge-line {
      width: 90px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
      margin-bottom: -1px;
    }

    .hero-badge-pill {
      background: linear-gradient(102deg, rgba(0, 155, 147, 0.56) 1%, rgba(0, 155, 147, 0) 99%);
      border: 1px solid rgba(235, 187, 38, 0.08);
      border-radius: var(--r-pill);
      padding: 8px 24px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
    }

    .hero-coin-l {
      position: absolute;
      left: 5%;
      top: 8%;
      z-index: 4;
      width: 180px;
    }

    .hero-coin-r {
      position: absolute;
      right: 4%;
      top: 8%;
      z-index: 4;
      width: 180px;
    }

    /* ── SECTION DIVIDER ── */
    .sec-divider {
      height: 1px;
      background: radial-gradient(ellipse 768px 1px at center, rgba(40, 40, 44, 1) 0%, rgba(20, 20, 22, 1) 50%, transparent 100%);
    }

    /* .sec-bg {
      background: radial-gradient(ellipse 1000px 700px at center -200px, #131315 0%, #0a0a0b 50%, #000 100%);
    } */
    .sec-padd{
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
    z-index: 9;
}
    .card{
      background: #010208;
      /* border: solid 1px #262626; */
  }
.card-outline-box{
    padding: 1px;
    width: 100%;
}
.card-container{
    background: linear-gradient(136.11deg, #001C1A 0%, #010101 100%);
    position: relative;
    border-radius: 30px;
    min-height: 247px;
}
.outline-wrapper{
    flex: none;
    inset: 0;
    position: absolute;
}
.outline-container{
    width:100%;
    height:100%;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    /* display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px;
    gap: 30px;
    min-height: 300px;
    background: linear-gradient(136.11deg, rgba(235, 187, 38, 0.112) 0%, rgba(235, 187, 38, 0) 100%);
    border-radius: 24px; */
}
.outline-animation{
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: conic-gradient(transparent 0%, rgb(0, 155, 147) 10%, transparent 20%);
    background-color: #011D1C;
}
.spin_10{
    -webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}
.spin_9{
    -webkit-animation:spin 9s linear infinite;
    -moz-animation:spin 9s linear infinite;
    animation:spin 9s linear infinite;
}
.spin_8{
    -webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

    /* ── AUDIENCE CARDS (Workers / Venues) ── */
    /* Outer dark card with inner inset photo + text block below */
    .ac-card {
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 24px 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Inset rounded photo frame */
    .ac-inner {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      height: 420px;
    }

    .ac-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    /* subtle bottom gradient on photo for depth */

    .ac-tint-v {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.50) 100%);
    }

    /* text content below the photo */
    .ac-content {
      padding: 4px 8px 0;
    }

    /* full-width CTA button */
    .btn-sm-gold {
      display: flex;
      align-items: center;
      background: transparent;
      border: 1px solid var(--primary-color);
      border-radius: var(--r-pill);
      height: 50px;
      padding: 0 6px;
      width: 100%;
      transition: background .2s;
    }

    .btn-sm-gold:hover {
      background: rgba(0, 155, 147, 0.1);
    }

    .btn-sm-gold .b-ico {
      width: 38px;
      height: 38px;
      background: var(--primary-color);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .btn-sm-gold .b-ico img {
      width: 18px;
      height: 18px;
    }

    .btn-sm-gold .b-lbl {
      font-size: 15px;
      font-weight: 600;
      color: var(--primary-color);
      flex: 1;
      text-align: center;
    }

    /* ── HOW IT WORKS ── */
    

    .how-divider {
      width: 1px;
      background: #1d1d20;
      align-self: stretch;
    }

    /* ── BENEFITS CARDS — FIXED ── */
    /* Dark card, rounded, with centred title and left-aligned checklist */
    .ben-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 48px;
    }

    .ben-card h3 {
      font-size: 32px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 32px;
    }

    .ben-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-color);
    }

    .ben-item img {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ── TESTIMONIAL CARDS ── */
    .tc-top-line {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 170px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    }

    .tc-card {
      background: linear-gradient(.05deg, rgba(0, 155, 147, 0.15) 0%, rgba(0, 0, 0, 0.09) 100%);
      border: 1px solid #011D1C;
      border-radius: 20px;
      height: 301px;
      position: relative;
    }

    .tc-sep {
      height: 1px;
      width: 230px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    }

    .tc-avatar {
      border-radius: 50%;
      box-shadow: 2px 4px 24px rgba(0, 155, 147, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.07);
	  width: 48px; 
	  height: 48px; 
	  background: var(--primary-color); 
	  color: #fff; 
	  font-size: 15px; 
	  font-weight: 500; 
	  display: flex; 
	  align-items: center; 
	  justify-content: center;
    }

    /* ── FAQ ── */
    .faq-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 24px !important;
      overflow: hidden;
    }

    .faq-btn {
      background: none;
      border: none;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 600;
      padding: 16px 24px;
      text-align: left;
    }

    .faq-icon {
      width: 40px;
      height: 40px;
      border: 1px solid #1d1d20;
      border-radius: 10px;
      transition: transform .25s;
      flex-shrink: 0;
    }

    .faq-icon img {
      width: 24px;
      height: 24px;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }

    .faq-item.open .faq-body {
      max-height: 200px;
    }

    /* ── CTA BANNER ── */
    .ctab {
      position: relative;
      border-radius: 20px;
      min-height: 600px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.07);
      background: url('bottom-banner.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
    }
    .ctab-inner {
      position: absolute;
      inset: 0;
    }

    /* ── FOOTER — FIXED ── */
    /* Exact match: logo image full-width in brand col, TikTok/Instagram/LinkedIn icons */
    .ft-logo {
      max-width: 120px;
      border-radius: 8px;
    }

    .ft-soc-ico {
      width: 22px;
      height: 22px;
      opacity: .7;
      transition: opacity .2s;
    }

    .ft-soc-ico:hover {
      opacity: 1;
    }

    .ft-link {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-color);
      line-height: 2;
      transition: color .2s;
    }

    .ft-link:hover {
      color: #fff;
    }

    .ft-col-h {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 24px;
    }

    .ft-divider {
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1199px) {
      .nb-wrap .btn-outline-gold{
        display: none !important;
      }
      .nb-brand-img {
        height: 34px !important;
      }
      .nb-pill{
        height: 54px;
      }
      .hero {
        background-size: cover;
      }
    }
    @media (max-width: 1024px) {

      .nb-links{
        display: none !important;
      }

      .nb-ham {
        display: block !important;
      }

      .hero-coin-l,
      .hero-coin-r {
        display: none;
      }
    }

    @media (max-width: 768px) {
	  .page-hero{
		  min-height: auto !important;
        padding: 120px 24px 40px !important;
      }
	  .hero-inner {
        padding-top: 120px;
      }
      .hero {
        min-height: 700px;
      }

      .hero-ph-l,
      .hero-ph-c,

      .ac-card {
        gap: 16px;
        padding: 16px;
      }

      .ac-inner {
        height: 260px;
      }

      .ac-content {
        padding: 0 4px;
      }

      .ctab {
        min-height: auto;
      }

      .faq-btn{
        padding: 10px 16px;
      }

      .faq-qt{
        font-size: 16px !important;
      }

      .ctab-inner {
        position: relative;
        padding: 60px 24px;
      }
    }



    /* Navbar brand img */
    .nb-brand-img {
      height: 42px;
    }

    /* Mobile nav gold link */

    /* Hero headline */
    .hero-h1 {
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.21;
      letter-spacing: -1px;
    }

    /* Hero subtitle */
    .hero-sub {
      font-size: clamp(16px, 2vw, 20px);
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
    }


    /* Section heading large */
    .sec-h2 {
      font-size: clamp(28px, 4vw, 48px);
      letter-spacing: -0.72px;
    }

    /* Section subtitle */
    .sec-p {
      font-size: 18px;
      line-height: 1.6;
    }

    /* Feature card heading */

    /* Feature card paragraph */
    .fc-p {
      font-size: 17px;
      line-height: 1.6;
    }


    /* Audience card heading */
    .ac-h3 {
      font-size: 26px;
    }

    /* Audience card paragraph */
    .ac-p {
      font-size: 17px;
      line-height: 1.6;
    }


    /* Testimonial card text */
    .tc-txt {
      font-size: 15px;
      line-height: 26px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* Testimonial name */
    .tc-name {
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
    }

    /* Testimonial role */
    .tc-role {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }

    /* Testimonial star img */


    /* FAQ container */
    .faq-container {
      max-width: 951px;
      margin: 0 auto;
    }

    /* FAQ question text */
    .faq-qt {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      text-align: left;
    }

    /* FAQ icon img */

    /* FAQ answer body */
    .faq-ans-p {
      font-size: 16px;
      line-height: 1.6;
    }

    /* FAQ more text */
    .faq-more {
      font-size: 16px;
    }

    /* FAQ more link */
    .faq-more-link {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* CTA heading */
    .cta-h2 {
      font-size: clamp(28px, 4.5vw, 56px);
      line-height: 1.21;
      letter-spacing: -1px;
    }

    /* CTA subtitle */
    .cta-p {
      font-size: clamp(16px, 2vw, 22px);
      line-height: 1.6;
    }


    /* Footer container */
    footer .row{
      margin-left: 0px;
      margin-right: 0px;
    }
    footer .row>*{
      padding-left: 0px;
      padding-right: 0px;
    }
    .ft-container {
      max-width: 1349px;
    }

    /* Footer brand desc */
    .ft-desc {
      font-size: 17px;
      line-height: 1.7;
      color: var(--text-color);
    }

    /* Footer copyright */
    .ft-copy {
      font-size: 15px;
      color: var(--text-color);
    }

    /* ── REMAINING CLASSES ── */
    .how-step-h3 {
      font-size: 22px;
    }

    .how-divider-line {
      width: 1px;
      min-height: 160px;
    }

    .how-walkthrough-lnk {
      color: var(--primary-color);
      font-size: 16px;
      font-weight: 500;
    }

    /* ── COIN 3D SCROLL ANIMATION ── */
    .hero-coin-l,
    .hero-coin-r {
      transform-style: preserve-3d;
      transition: transform 0.1s linear;
      will-change: transform;
      z-index: 9;
    }

    .hero-coin-l {
      animation: coin-float-l 10s ease-in-out infinite;
    }
    .hero-coin-r {
      animation: coin-float-r 10s ease-in-out infinite;
      animation-delay: -5s;
    }

    @keyframes coin-float-l {
      0%   { transform: rotateY(0deg)   rotateX(3deg) translateY(0px); }
      50%  { transform: rotateY(20deg)  rotateX(-1deg) translateY(-12px); }
      100% { transform: rotateY(0deg)   rotateX(3deg) translateY(0px); }
    }
    @keyframes coin-float-r {
      0%   { transform: rotateY(0deg)   rotateX(-3deg) translateY(0px); }
      50%  { transform: rotateY(-20deg) rotateX(1deg)   translateY(-10px); }
      100% { transform: rotateY(0deg)   rotateX(-3deg) translateY(0px); }
    }

    /* ── HERO PARALLAX SCREEN ── */
    .hero-screen-wrap {
      transition: transform 0.08s linear;
      will-change: transform;
    }


    /* inner page hero */
    .page-hero {
      position: relative;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 160px 24px 80px;
      overflow: hidden;
      background: url('inner-banner-bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 900px 500px at center 60%, rgba(0, 155, 147, .16) 0%, transparent 70%);
      pointer-events: none
    }

    .page-hero-h1 {
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 600;
      line-height: 1.21;
      letter-spacing: -1px;
      max-width: 767px;
    }

    .page-hero-sub {
      font-size: clamp(16px, 2vw, 20px);
      line-height: 1.6;
      max-width: 760px;
      margin: 0 auto
    }

    .img-card, .designed-img-card, .img-card-cover {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      margin: 0 auto;
      display: flex;
      align-items: end;
      justify-content: center;
      min-height: 500px;
    }

    .img-card-cover{
       min-height: auto;
    }

    .img-card img {
      width: 50%;
    }
    .gold-shade{
        background: radial-gradient(ellipse 1000px 1000px at center -150px, #001C1A 0%, #010101 50%, #000 100%);
    }

    .designed-img-card img{
        width: 60%;
    }

    .img-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── SECTOR AUTO-SCROLL MARQUEE ── */
    .sector-marquee-wrap {
      overflow: hidden;
      width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    .sector-marquee-wrap:hover .sector-track {
      animation-play-state: paused;
    }

    .sector-track {
      display: flex;
      gap: 20px;
      width: max-content;
      will-change: transform;
    }

    /* Row 1: scroll left */
    .sector-track--fwd {
      animation: marquee-left 32s linear infinite;
    }

    /* Row 2: scroll right */
    .sector-track--rev {
      animation: marquee-right 28s linear infinite;
    }

    @keyframes marquee-left {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes marquee-right {
      0% {
        transform: translateX(-50%);
      }

      100% {
        transform: translateX(0);
      }
    }

    /* Card sizes — row 1 taller, row 2 shorter, matching Figma */
    .sector-card {
      flex-shrink: 0;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .sector-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sector-label {
      position: absolute;
      bottom: 20px;
      left: 24px;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }

    .sector-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 55%);
    }

    /* Row 1 cards: tall */
    .sector-track--fwd .sector-card, .sector-track--rev .sector-card {
      width: 320px;
      height: 260px;
    }


    .ic-card {
        border-radius: 24px;
        border: 1px solid rgba(235, 187, 38, .08);
        background: linear-gradient(145deg, rgba(0, 155, 147, .112) 0%, rgba(0, 155, 147, 0) 100%);
        padding: 48px;
        position: relative;
    }
    .ic-card-top {
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    }
    .card-img {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gold-link {
        color: var(--primary-color);
        font-size: 16px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

 .form-input {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 12px 16px;
      width: 100%;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      outline: none;
      transition: border-color .2s
    }

    .form-input:focus {
      border-color: rgba(235, 187, 38, .5)
    }

    .form-input::placeholder {
      color: rgba(255, 255, 255, .4)
    }

    .form-select-custom {
      background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 12px 40px 12px 16px;
      width: 100%;
      color: rgba(255, 255, 255, .6);
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      outline: none;
      -webkit-appearance: none;
      appearance: none
    }

    .form-select-custom:focus {
      border-color: rgba(235, 187, 38, .5)
    }

    .form-label {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      text-transform: capitalize;
      letter-spacing: .6px;
      margin-bottom: 8px;
      display: block
    }

    .form-textarea {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 16px;
      width: 100%;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      outline: none;
      transition: border-color .2s;
      min-height: 120px;
      resize: vertical
    }

    .form-textarea:focus {
      border-color: rgba(235, 187, 38, .5)
    }

    .form-textarea::placeholder {
      color: rgba(255, 255, 255, .4)
    }

    .contact-info-icon {
      width: 40px;
      height: 40px;
      background: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }
    .login-card {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 24px;
        padding: 48px;
        max-width: 480px;
        width: 100%;
    }

    .faq-tab {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r-pill);
      padding: 8px;
      display: flex;
      gap: 4px
    }

    .faq-tab-btn {
      flex: 1;
      padding: 10px 20px;
      border-radius: var(--r-pill);
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, .6);
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s
    }

    .faq-tab-btn.active {
      background: var(--primary-color);
      color: var(--white-color);
      font-weight: 600
    }

    /* ── BUTTON ARROW ANIMATION ── */
    .btn-gold .b-ico,
    .btn-outline-gold .b-ico,
    .btn-sm-gold .b-ico {
      overflow: hidden;
      position: relative;
    }
    /* The SVG inside .b-ico slides out right, then a clone slides in from left */
    .btn-gold .b-ico svg,
    .btn-gold .b-ico img,
    .btn-outline-gold .b-ico svg,
    .btn-outline-gold .b-ico img,
    .btn-sm-gold .b-ico svg,
    .btn-sm-gold .b-ico img {
      display: block;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity  0.25s ease;
      will-change: transform, opacity;
    }
    .btn-gold:hover .b-ico svg,
    .btn-gold:hover .b-ico img,
    .btn-outline-gold:hover .b-ico svg,
    .btn-outline-gold:hover .b-ico img,
    .btn-sm-gold:hover .b-ico svg,
    .btn-sm-gold:hover .b-ico img {
      animation: arrow-shoot 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes arrow-shoot {
      0%   { transform: translateX(0);     opacity: 1; }
      45%  { transform: translateX(130%);  opacity: 0; }
      46%  { transform: translateX(-130%); opacity: 0; }
      100% { transform: translateX(0);     opacity: 1; }
    }
    .btn-sm-gold .b-ico svg path{
      stroke: var(--white-color);
    }
.screen-reader-response{
	display: none;
}
.wpcf7-not-valid-tip{
	    font-size: 12px !important;
    color: #d71b1b !important;
    margin-top: 4px;
    display: block;
    font-weight: 400;
}
.form-input, .form-select-custom{
	margin-top: 8px;
}
.wpcf7-textarea{
	height: 150px;
}
form.invalid .wpcf7-response-output {
    font-size: 14px !important;
    padding: 10px !important;
    background: rgba(250, 203, 42, 0.2) !important;
    color: rgb(136 107 9) !important;
    border-radius: 10px !important;
}

.download-modal .modal-content{
	min-height: 190px; 
	background: url(bottom-banner.webp); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center top; 
	border: 1px solid rgba(255, 255, 255, 0.09);
}
.download-modal .modal-content a:hover{
	opacity: 0.7;
}
.download-modal .btn-close{
	position: absolute; 
	right: 12px; 
	top: 12px; 
	z-index: 9;
}