@charset "UTF-8";
/*!
Theme Name: Sandbox - Modern & Multipurpose Bootstrap 5 Template
Theme URI:	https://sandbox.elemisthemes.com/
Version:	2.0.0
Author:		elemis
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700");

    /* ==================== Base & Variables ==================== */
    :root{
      --primary: #C09D19;
      --primary-soft: #fff8ef;
      --primary-2: #e6b730;
      --bg-dark: #111111;
      --bg-2: #1a1a1a;
      --bg-3: #0e0e0e;
      --bg-card: #1c1c1c;gap-14
      --text: #ffffff;
      --text-2: #a8aeb8;
      --text-3: #6c7280;
      --border: rgba(255,255,255,0.08);
      --border-2: rgba(255,255,255,0.12);
      --gold-grad: linear-gradient(135deg, #C09D19 0%, #e6b730 50%, #C09D19 100%);
      --gold-soft-grad: linear-gradient(135deg, rgba(192,157,25,0.18) 0%, rgba(230,183,48,0.06) 100%);
      --shadow-lg: 0 30px 80px rgba(0,0,0,0.45);
      --shadow-gold: 0 18px 50px rgba(192,157,25,0.25);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:16px}
    body{
      font-family:'Manrope','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background:var(--bg-dark);
      color:var(--text-2);
      line-height:1.7;
      font-weight:500;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    img{max-width:100%;display:block;height:auto}
    a{color:inherit;text-decoration:none;transition:color .2s}
    .container{max-width:1240px;margin:0 auto;padding:0 24px;position:relative}
    .section{padding:100px 0;position:relative;overflow:hidden}
    .section-sm{padding:60px 0}
    .text-primary{color:var(--primary)}
    .text-white{color:#fff}
    .text-muted{color:var(--text-3)}
    .eyebrow{
      display:inline-block;
      font-size:0.75rem;
      letter-spacing:0.4em;
      text-transform:uppercase;
      color:var(--primary);
      font-weight:700;
      margin-bottom:18px;
      position:relative;
      padding-left:34px;
    }
    .eyebrow::before{
      content:'';
      position:absolute;
      left:0;top:50%;
      width:24px;height:1px;
      background:var(--primary);
    }
    .h-display{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.02em;margin-bottom:24px}
    .h-section{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.01em;margin-bottom:18px}
    .lede{font-size:1.05rem;color:var(--text-2);line-height:1.8;max-width:640px}

    /* ==================== Navbar ==================== */
    .navbar{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      padding:22px 0;
      transition:all .3s ease;
      background:transparent;
    }
    .navbar.scrolled{
      background:rgba(15,15,15,0.85);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      padding:14px 0;
      border-bottom:1px solid var(--border);
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
    .nav-links{display:flex;align-items:center;gap:34px;list-style:none}
    .nav-links a{font-size:0.92rem;color:#cdd2db;font-weight:500;transition:color .2s}
    .nav-links a:hover{color:var(--primary)}
    .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:#fff;letter-spacing:0.02em}
    .logo-mark{
      width:34px;height:34px;border-radius:9px;
      background:var(--gold-grad);
      display:flex;align-items:center;justify-content:center;
      color:#111;font-size:1.05rem;font-weight:900;
      box-shadow:0 8px 22px rgba(192,157,25,0.35);
    }
    .nav-cta{
      padding:10px 22px;border-radius:30px;
      background:var(--gold-grad);color:#111 !important;font-weight:700;font-size:0.88rem;
      box-shadow:0 10px 26px rgba(192,157,25,0.3);
      transition:transform .2s, box-shadow .2s;
    }
    .nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(192,157,25,0.45)}

    /* ==================== Hero ==================== */
    .hero{
      min-height:auto;
      padding:140px 0 70px;
      position:relative;
      display:flex;align-items:center;
      background:
        radial-gradient(ellipse at 20% 20%, rgba(192,157,25,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(192,157,25,0.10) 0%, transparent 50%),
        var(--bg-dark);
      overflow:hidden;
    }
    .hero::before{
      content:'';position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size:60px 60px;
      mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
      -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
      opacity:0.6;
    }
    .hero::after{
      content:'';position:absolute;
      width:600px;height:600px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(192,157,25,0.18), transparent 60%);
      top:50%;left:50%;
      transform:translate(-50%,-50%);
      filter:blur(40px);
      animation:pulseGlow 6s ease-in-out infinite;
    }
    @keyframes pulseGlow{
      0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}
      50%{opacity:0.9;transform:translate(-50%,-50%) scale(1.15)}
    }
    .hero-inner{position:relative;z-index:2;text-align:center;width:100%}
    .hero-tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 16px;border-radius:30px;
      background:rgba(192,157,25,0.10);
      border:1px solid rgba(192,157,25,0.30);
      color:var(--primary);
      font-size:0.78rem;font-weight:600;letter-spacing:0.05em;
      margin-bottom:20px;
    }
    .hero-tag::before{
      content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);
      box-shadow:0 0 12px var(--primary);
    }
    .hero h1{
      font-size:clamp(2.0rem,4.2vw,3.2rem);
      font-weight:800;
      color:#fff;
      line-height:1.2;
      letter-spacing:-0.03em;
      margin-bottom:20px;
    }
    .hero h1 .gold{
      background:linear-gradient(120deg, #f3d36b 0%, #C09D19 50%, #f3d36b 100%);
      background-size:200% 100%;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      animation:shimmer 4s ease-in-out infinite;
    }
    @keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .hero-sub{
      font-size:clamp(0.92rem,1.4vw,1.05rem);
      color:var(--text-2);
      max-width:680px;margin:0 auto;
      line-height:1.8;
    }
    .hero-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:16px 32px;border-radius:40px;
      font-weight:700;font-size:0.95rem;
      transition:all .3s ease;cursor:pointer;border:none;
    }
    .btn-primary{
      background:var(--gold-grad);color:#111;
      box-shadow:0 14px 36px rgba(192,157,25,0.35);
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(192,157,25,0.5)}
    .btn-ghost{
      background:rgba(255,255,255,0.04);color:#fff;
      border:1px solid var(--border-2);
    }
    .btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:rgba(192,157,25,0.4)}
    .scroll-hint{display:none}

    /* ==================== Stats Strip ==================== */
    .stats-section{padding:0 0 100px;position:relative}
    .stats-card{
      background:linear-gradient(135deg, rgba(28,28,28,0.9) 0%, rgba(20,20,20,0.95) 100%);
      border:1px solid var(--border);
      border-radius:24px;
      padding:50px 30px;
      position:relative;overflow:hidden;
    }
    .stats-card::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at top, rgba(192,157,25,0.08), transparent 60%);
    }
    .stats-grid{
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:20px;position:relative;text-align:center;
    }
    .stat-num{
      font-size:clamp(2.2rem,4vw,3.4rem);
      font-weight:800;color:#fff;
      line-height:1;margin-bottom:10px;
      font-family:'Manrope',sans-serif;
    }
    .stat-num .suffix{color:var(--primary);font-size:0.6em;margin-left:4px}
    .stat-label{font-size:0.9rem;color:var(--text-2);font-weight:500}
    .stat-divider{
      position:absolute;left:50%;top:20%;height:60%;
      width:1px;background:var(--border);
    }
    .stat-divider:nth-of-type(2){left:75%}

    /* ==================== Section: Angled Divider ==================== */
    .angled-top::before{
      content:'';position:absolute;
      top:-1px;left:0;right:0;height:80px;
      background:var(--bg-dark);
      clip-path:polygon(0 100%, 100% 100%, 100% 0);
      z-index:3;
    }
    .angled-bottom::after{
      content:'';position:absolute;
      bottom:-1px;left:0;right:0;height:80px;
      background:var(--bg-dark);
      clip-path:polygon(0 0, 100% 0, 0 100%);
      z-index:3;
    }

    /* ==================== Feature Section Layout ==================== */
    .feature-section{background:var(--bg-3)}
    .feature-grid{
      display:grid;grid-template-columns:0.9fr 1.4fr;
      gap:70px;align-items:center;
    }
    .feature-grid.reverse{grid-template-columns:1.4fr 0.9fr}
    .feature-grid.reverse .feature-text{order:2}
    .feature-grid.reverse .feature-visual{order:1}
    .feature-text .num-tag{
      display:inline-flex;align-items:center;gap:10px;
      color:var(--primary);font-size:0.85rem;font-weight:700;letter-spacing:0.2em;
      margin-bottom:14px;
    }
    .feature-text .num-tag::before{
      content:'';width:30px;height:1px;background:var(--primary);
    }
    .feature-text h2{
      font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:#fff;
      line-height:1.25;margin-bottom:18px;letter-spacing:-0.01em;
    }
    .feature-text .desc{
      color:var(--text-2);font-size:1.0rem;line-height:1.85;margin-bottom:30px;
    }
    .feature-list{list-style:none;display:grid;gap:16px}
    .feature-list li{
      display:flex;align-items:flex-start;gap:14px;
      color:var(--text-2);font-size:0.95rem;line-height:1.7;
    }
    .feature-list li .check{
      flex-shrink:0;width:22px;height:22px;border-radius:50%;
      background:var(--gold-soft-grad);
      border:1px solid rgba(192,157,25,0.4);
      display:flex;align-items:center;justify-content:center;
      color:var(--primary);font-size:0.7rem;font-weight:900;
      margin-top:2px;
    }
    .feature-highlight{
      display:inline-flex;align-items:baseline;gap:6px;
      padding:10px 18px;border-radius:14px;
      background:var(--gold-soft-grad);
      border:1px solid rgba(192,157,25,0.25);
      color:var(--primary);
      font-weight:700;
      margin-top:24px;
    }
    .feature-highlight .big{
      font-size:1.6rem;font-weight:800;
      background:linear-gradient(120deg, #f3d36b, #C09D19);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    }

    /* ==================== UI Screenshot Visual ==================== */
    .feature-visual{position:relative;width:100%}
    .screenshot-frame{
      position:relative;border-radius:20px;overflow:hidden;
      background:#0a0a0a;
      box-shadow:0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px var(--border-2);
      transition:transform .5s ease, box-shadow .5s ease;
    }
    .screenshot-frame:hover{transform:translateY(-6px);box-shadow:0 50px 110px rgba(0,0,0,0.65), 0 0 0 1px rgba(192,157,25,0.35)}
    .screenshot-frame .browser-bar{
      display:flex;align-items:center;gap:8px;
      padding:12px 16px;
      background:linear-gradient(to bottom, #1a1a1a, #0e0e0e);
      border-bottom:1px solid var(--border);
    }
    .screenshot-frame .browser-bar .dot{
      width:11px;height:11px;border-radius:50%;
    }
    .screenshot-frame .browser-bar .dot.r{background:#ff5f57}
    .screenshot-frame .browser-bar .dot.y{background:#febc2e}
    .screenshot-frame .browser-bar .dot.g{background:#28c840}
    .screenshot-frame .browser-bar .url{
      flex:1;margin-left:12px;
      background:rgba(255,255,255,0.05);
      padding:5px 12px;border-radius:6px;
      color:var(--text-3);font-size:0.78rem;
      font-family:monospace;
      text-align:center;
    }
    .screenshot-frame img{width:100%;display:block;min-height:340px;object-fit:cover}
    .feature-visual .float-stat{
      position:absolute;
      background:linear-gradient(135deg, rgba(28,28,28,0.95), rgba(20,20,20,0.95));
      border:1px solid var(--border-2);
      backdrop-filter:blur(10px);
      padding:14px 20px;border-radius:12px;
      box-shadow:var(--shadow-lg);
    }
    .float-stat.top-right{top:-20px;right:-30px}
    .float-stat.bottom-left{bottom:-20px;left:-30px}
    .float-stat .label{font-size:0.7rem;color:var(--text-3);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:4px}
    .float-stat .value{font-size:1.4rem;font-weight:800;color:#fff}
    .float-stat .value .gold{color:var(--primary)}
    .float-stat .delta{font-size:0.8rem;color:#45c4a0;margin-top:2px}

    /* ==================== Function Matrix ==================== */
    .matrix-section{
      background:linear-gradient(180deg, var(--bg-dark) 0%, #0a0a0a 100%);
      position:relative;
    }
    .matrix-head{text-align:center;max-width:760px;margin:0 auto 70px}
    .matrix-head p{color:var(--text-2);font-size:1.05rem}
    .matrix-grid{
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:20px;
    }
    .matrix-card{
      background:linear-gradient(180deg, rgba(28,28,28,0.7) 0%, rgba(18,18,18,0.7) 100%);
      border:1px solid var(--border);
      border-radius:18px;
      padding:32px 26px;
      transition:all .35s ease;
      position:relative;overflow:hidden;
    }
    .matrix-card::before{
      content:'';position:absolute;
      top:0;left:0;right:0;height:2px;
      background:linear-gradient(90deg, transparent, var(--primary), transparent);
      opacity:0;transition:opacity .35s ease;
    }
    .matrix-card:hover{
      transform:translateY(-6px);
      border-color:rgba(192,157,25,0.3);
      box-shadow:0 24px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(192,157,25,0.15);
    }
    .matrix-card:hover::before{opacity:1}
    .matrix-icon{
      width:54px;height:54px;border-radius:14px;
      background:var(--gold-soft-grad);
      border:1px solid rgba(192,157,25,0.2);
      display:flex;align-items:center;justify-content:center;
      color:var(--primary);font-size:1.4rem;font-weight:800;
      margin-bottom:20px;
    }
    .matrix-card h3{
      font-size:1.15rem;font-weight:800;color:#fff;
      margin-bottom:8px;letter-spacing:0.01em;
    }
    .matrix-card .subtitle{
      font-size:0.78rem;color:var(--primary);font-weight:600;
      letter-spacing:0.05em;margin-bottom:14px;
    }
    .matrix-card p{
      color:var(--text-2);font-size:0.92rem;line-height:1.75;
    }

    /* ==================== Case Studies ==================== */
    .case-section{background:var(--bg-3);position:relative}
    .case-head{text-align:center;max-width:760px;margin:0 auto 60px}
    .case-head p{color:var(--text-2);font-size:1.05rem}
    .case-carousel{
      position:relative;
      padding:0 70px;
    }
    .case-track{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:24px;
      transition:transform .5s cubic-bezier(.22,.61,.36,1);
    }
    .case-card{
      background:linear-gradient(180deg, rgba(28,28,28,0.7) 0%, rgba(18,18,18,0.7) 100%);
      border:1px solid var(--border);
      border-radius:20px;
      padding:24px;
      display:flex;flex-direction:column;
      transition:all .35s ease;
    }
    .case-card:hover{
      transform:translateY(-4px);
      border-color:rgba(192,157,25,0.3);
      box-shadow:0 24px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(192,157,25,0.15);
    }
    .case-visual{position:relative;margin-bottom:20px}
    .case-img-wrap{
      position:relative;border-radius:14px;overflow:hidden;
      box-shadow:0 16px 40px rgba(0,0,0,0.5);
      background:#000;
      aspect-ratio:3/4;
    }
    .case-img-wrap img{
      width:100%;height:100%;display:block;object-fit:cover;
      transition:transform .6s ease;
    }
    .case-card:hover .case-img-wrap img{transform:scale(1.05)}
    .case-img-wrap::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
      pointer-events:none;
    }
    .case-rating{
      position:absolute;bottom:12px;left:12px;right:12px;
      z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;
    }
    .case-rating .pill{
      background:rgba(0,0,0,0.65);backdrop-filter:blur(10px);
      padding:5px 10px;border-radius:14px;
      color:#fff;font-size:0.72rem;font-weight:600;
      border:1px solid rgba(255,255,255,0.15);
      white-space:nowrap;
    }
    .case-tag{
      display:inline-block;
      padding:5px 12px;border-radius:18px;
      background:var(--gold-soft-grad);
      border:1px solid rgba(192,157,25,0.25);
      color:var(--primary);font-size:0.72rem;font-weight:700;
      letter-spacing:0.1em;margin-bottom:12px;
      align-self:flex-start;
    }
    .case-card h3{
      font-size:1.15rem;
      font-weight:800;color:#fff;line-height:1.35;
      margin-bottom:12px;letter-spacing:-0.005em;
    }
    .case-card .case-desc{
      color:var(--text-2);font-size:0.88rem;line-height:1.7;margin-bottom:18px;
      flex:1;
    }
    .case-stats{
      display:flex;flex-direction:column;gap:10px;
      padding-top:16px;
      border-top:1px solid var(--border);
    }
    .case-stat{
      display:flex;align-items:baseline;gap:8px;
    }
    .case-stat .num{
      font-size:1.05rem;
      font-weight:800;color:var(--primary);line-height:1;
      flex-shrink:0;min-width:80px;
    }
    .case-stat .label{
      font-size:0.78rem;color:var(--text-3);line-height:1.5;
    }

    /* Carousel arrows */
    .case-arrow{
      position:absolute;top:50%;transform:translateY(-50%);
      width:50px;height:50px;border-radius:50%;
      background:linear-gradient(135deg, rgba(28,28,28,0.95), rgba(20,20,20,0.95));
      border:1px solid var(--border-2);
      backdrop-filter:blur(10px);
      color:#fff;font-size:1.4rem;font-weight:300;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;z-index:5;
      transition:all .25s ease;
      box-shadow:0 12px 30px rgba(0,0,0,0.4);
    }
    .case-arrow:hover{
      background:var(--gold-grad);
      color:#111;
      border-color:transparent;
      transform:translateY(-50%) scale(1.05);
      box-shadow:0 16px 40px rgba(192,157,25,0.4);
    }
    .case-arrow:disabled{
      opacity:0.3;cursor:not-allowed;
    }
    .case-arrow:disabled:hover{
      background:linear-gradient(135deg, rgba(28,28,28,0.95), rgba(20,20,20,0.95));
      color:#fff;transform:translateY(-50%);box-shadow:0 12px 30px rgba(0,0,0,0.4);
    }
    .case-arrow.prev{left:0}
    .case-arrow.next{right:0}

    .case-dots{
      display:flex;justify-content:center;gap:8px;margin-top:40px;
    }
    .case-dots .dot{
      width:10px;height:10px;border-radius:50%;
      background:rgba(255,255,255,0.15);
      cursor:pointer;transition:all .25s ease;
    }
    .case-dots .dot.active{
      background:var(--primary);
      width:30px;border-radius:5px;
    }

    /* ==================== CTA / Footer ==================== */
    .cta-section{
      padding:120px 0;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(192,157,25,0.18) 0%, transparent 50%),
        var(--bg-dark);
      text-align:center;position:relative;overflow:hidden;
    }
    .cta-section::before{
      content:'';position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size:40px 40px;
      mask-image:radial-gradient(ellipse at center, black 20%, transparent 60%);
    }
    .cta-section h2{
      font-size:clamp(2rem,4.5vw,3.4rem);
      font-weight:800;color:#fff;line-height:1.2;
      margin-bottom:24px;letter-spacing:-0.02em;position:relative;
    }
    .cta-section p{
      color:var(--text-2);font-size:1.1rem;max-width:600px;margin:0 auto 40px;position:relative;
    }
    .cta-section .hero-actions{position:relative}

    header {
    margin-bottom: 100px;
    }
    
    footer{
      background:#0a0a0a;padding:60px 0 30px;
      border-top:1px solid var(--border);
      text-align: center;
    }
    .footer-inner{
      display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
    }
    .footer-links{display:flex;gap:30px;list-style:none;flex-wrap:wrap}
    .footer-links a{color:var(--text-2);font-size:0.9rem;transition:color .2s}
    .footer-links a:hover{color:var(--primary)}
    .footer-copy{color:var(--text-3);font-size:0.85rem}

    /* ==================== Animations ==================== */
    .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease, transform 0.8s ease}
    .reveal.in{opacity:1;transform:translateY(0)}
    .reveal-delay-1{transition-delay:0.1s}
    .reveal-delay-2{transition-delay:0.2s}
    .reveal-delay-3{transition-delay:0.3s}

    /* ==================== Responsive ==================== */
    @media (max-width: 991px){
      .nav-links{display:none}
      .feature-grid, .feature-grid.reverse{
        grid-template-columns:1fr;gap:50px;
      }
      .feature-grid.reverse .feature-text{order:1}
      .feature-grid.reverse .feature-visual{order:2}
      .matrix-grid{grid-template-columns:repeat(2,1fr)}
      .stats-grid{grid-template-columns:repeat(2,1fr);gap:40px 20px}
      .stat-divider{display:none}
      .section{padding:80px 0}
      .case-track{grid-template-columns:repeat(2,1fr)}
      .case-carousel{padding:0 60px}
    }
    @media (max-width: 600px){
      .matrix-grid{grid-template-columns:1fr}
      .stats-grid{grid-template-columns:1fr 1fr}
      .float-stat{display:none}
      .case-track{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .case-track::-webkit-scrollbar{display:none}
      .case-card{
        min-width:78vw;
        scroll-snap-align:center;
        flex-shrink:0;
      }
      .case-carousel{padding:0}
      .case-arrow{display:none}
    }
    
    
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-bottom: 100px !important;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-sm,
.navbar>.container-md,
.navbar>.container-lg,
.navbar>.container-xl,
.navbar>.container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  font-size: 0.7rem;
  white-space: nowrap;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}

.navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }

  .navbar-expand-sm .offcanvas-header {
    display: none;
  }

  .navbar-expand-sm .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }

  .navbar-expand-sm .offcanvas-top,
  .navbar-expand-sm .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .navbar-expand-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }

  .navbar-expand-md .offcanvas-header {
    display: none;
  }

  .navbar-expand-md .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }

  .navbar-expand-md .offcanvas-top,
  .navbar-expand-md .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .navbar-expand-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}


@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }

  .navbar-expand-lg .offcanvas-header {
    display: none;
  }

  .navbar-expand-lg .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }

  .navbar-expand-lg .offcanvas-top,
  .navbar-expand-lg .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .navbar-expand-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }

  .navbar-expand-xl .offcanvas-header {
    display: none;
  }

  .navbar-expand-xl .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }

  .navbar-expand-xl .offcanvas-top,
  .navbar-expand-xl .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .navbar-expand-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }

  .navbar-expand-xxl .offcanvas-header {
    display: none;
  }

  .navbar-expand-xxl .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }

  .navbar-expand-xxl .offcanvas-top,
  .navbar-expand-xxl .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .navbar-expand-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.navbar-expand .navbar-nav {
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}

.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}

.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-expand .offcanvas-header {
  display: none;
}

.navbar-expand .offcanvas {
  position: inherit;
  bottom: 0;
  z-index: 1000;
  flex-grow: 1;
  visibility: visible !important;
  background-color: transparent;
  border-right: 0;
  border-left: 0;
  transition: none;
  transform: none;
}

.navbar-expand .offcanvas-top,
.navbar-expand .offcanvas-bottom {
  height: auto;
  border-top: 0;
  border-bottom: 0;
}

.navbar-expand .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: #343f52;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #3f78e0;
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(52, 63, 82, 0.3);
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: #3f78e0;
}

.navbar-light .navbar-toggler {
  color: #343f52;
  border-color: transparent;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%233f78e0' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: #343f52;
}

.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: #3f78e0;
}

.navbar-dark .navbar-brand {
  color: #efefef;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #efefef;
}

.navbar-dark .navbar-nav .nav-link {
  color: #efefef;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-dark .navbar-toggler {
  color: #efefef;
  border-color: transparent;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%23fff' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: #fff;
}

.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #efefef;
}

.position-absolute {
  position: absolute !important;
}

.justify-content-center {
  justify-content: center !important;
}

.align-items-center {
  align-items: center !important;
}

.new-nav {
  height:128px;
  text-align: center !important;
  overflow: hidden;
  color: #efefef;
}

.new-nav a {
  color: #efefef;
}

.p-10 {
  padding: 2.5rem !important;
}

.gap-14 {
  gap: 5.6rem !important;
}