/* ===== THEME COLORS (from your UI) ===== */
      :root{
      --primary:#1f4e5f;
      --secondary:#2e7d7f;
      --accent:#00bcd4;
      --light:#f4f7f9;
      }
      /* ===== GLOBAL ===== */
      body{
      font-family: 'Segoe UI', sans-serif;
      background: var(--light);
      }
      html, body{
      height:100%;
      margin:0;
      }
      /* FULL PAGE LAYOUT */
      .page-wrapper{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      }
      /* MAIN CONTENT EXPANDS */
      .main-content{
      flex:1;
      display:flex;
      flex-direction:column;
      }
      /* ===== NAVBAR ===== */
      .navbar{
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      }
      .navbar-brand{
      font-weight: 600;
      color: #fff !important;
      }
      /* ===== HERO ===== */
      .hero{
      height: 90vh;
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),
      url('https://images.unsplash.com/photo-1500382017468-9049fed747ef');
      background-size: cover;
      background-position: center;
      color: white;
      }
      .hero h1{
      font-size: 3rem;
      font-weight: 700;
      }
      .hero-btn{
      background: var(--accent);
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      }
      /* ===== FEATURE CARDS ===== */
      .feature-card{
      background: white;
      border-radius: 15px;
      padding: 25px;
      transition: 0.3s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      }
      .feature-card:hover{
      transform: translateY(-10px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      }
      .feature-icon{
      font-size: 30px;
      color: var(--secondary);
      }
      /* ===== MAP SECTION ===== */
      .map-preview{
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      }
      /* ===== CTA ===== */
      .cta{
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      color: white;
      border-radius: 20px;
      padding: 50px;
      }
      /* ===== FOOTER ===== */
      /* ===== FOOTER ===== */
      .footer-pro{
      background: linear-gradient(135deg,#0f2d46,#1f4e5f);
      color:#fff;
      padding:80px 0 30px;
      position:relative;
      margin-top:0;
      }
      /* subtle pattern */
      /* .footer-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 25px 25px;
      }*/
      /* TITLE */
      .footer-title{
      font-weight:700;
      }
      /* DESC */
      .footer-desc{
      color:#cbd5e1;
      margin-top:10px;
      }
      /* HEADINGS */
      .footer-heading{
      margin-bottom:10px;
      font-weight:600;
      }
      /* LINKS */
      .footer-links{
      list-style:none;
      padding:0;
      }
      .footer-links li{
      margin-bottom:8px;
      }
      .footer-links a{
      color:#cbd5e1;
      text-decoration:none;
      transition:0.3s;
      }
      .footer-links a:hover{
      color:#fff;
      padding-left:5px;
      }
      /* SOCIAL */
      .footer-social a{
      display:inline-block;
      margin-right:10px;
      font-size:18px;
      color:#fff;
      transition:0.3s;
      }
      .footer-social a:hover{
      transform:translateY(-3px) scale(1.1);
      color:#00d4ff;
      }
      /* CONTACT */
      .footer-pro p{
      margin:5px 0;
      color:#cbd5e1;
      }
      .footer-pro i{
      margin-right:6px;
      }
      /* STATS */
      .footer-stats{
      display:flex;
      gap:15px;
      font-size:13px;
      }
      /* DIVIDER */
      .footer-divider{
      border-color:rgba(255,255,255,0.2);
      margin:30px 0;
      }
      /* BOTTOM */
      .footer-bottom{
      font-size:14px;
      color:#cbd5e1;
      }
      /* MOBILE */
      @media(max-width:768px){
      .auth-left {
      display: none;
      }
      .register-container {
      border-radius: 0 !important;
      overflow: initial !important;
      display: initial !important;
      width: 100% !important;
      box-shadow: none !important;
      } 
      .register-wrapper {
      background: #fff !important;
      }
      .footer-bottom{
      text-align:center;
      gap:10px;
      }
      }
      /* ===== TOP BAR ===== */
      .topbar{
      background:#1f3c5a;
      color:#fff;
      font-size:14px;
      padding:6px 0;
      }
      /* ===== HEADER ===== */
      .main-header{
      background:#fff;
      padding:10px 0;
      border-bottom:1px solid #eee;
      }
      /* ===== NAV ===== */
      .nav-menu{
      background:#f8f9fb;
      border-bottom:1px solid #ddd;
      }
      .nav-link{
      font-weight:500;
      }
      .nav-link.active{
      border-bottom:2px solid #2e7d7f;
      }
      /* ===== FIXED HEADER ===== */
      .topbar, .main-header, .nav-menu{
      position: sticky;
      z-index: 999;
      }
      .topbar{ top:0; }
      .main-header{ top:36px; }
      .nav-menu{ top:96px; }
      /* ===== HERO ===== */
      .hero-advanced{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:100px 0;
      }
      .hero-title{
      font-size:42px;
      font-weight:700;
      }
      .hero-sub{
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      }
      /* MAP CARD */
      .map-card{
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 40px rgba(0,0,0,0.3);
      transform: perspective(1000px) rotateY(-5deg);
      transition:0.4s;
      }
      .map-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* FLOATING LABEL */
      .floating-card{
      position:absolute;
      bottom:15px;
      left:15px;
      background:#fff;
      padding:10px 15px;
      border-radius:10px;
      font-size:14px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .hero-pro{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:120px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle grid pattern */
      .hero-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 30px 30px;
      }
      /* TEXT */
      .hero-title{
      font-size:44px;
      font-weight:700;
      }
      .hero-sub{
      margin-top:15px;
      font-size:16px;
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags{
      margin-top:20px;
      }
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      font-size:14px;
      transition:0.3s;
      }
      .hero-tags span:hover{
      background:rgba(255,255,255,0.2);
      }
      /* RIGHT CARD */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* BADGES */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* BUTTONS */
      .btn-light{
      border-radius:25px;
      }
      .btn-outline-light{
      border-radius:25px;
      }
      /* MOBILE FIX */
      @media(max-width:992px){
      .viewer-card{
      margin-top:30px;
      transform:none;
      }
      }
      /* ===== IMAGE BASE ===== */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      .viewer-card img{
      width:100%;
      display:block;
      }
      /* ===== GRADIENT OVERLAY ===== */
      .overlay-gradient{
      position:absolute;
      inset:0;
      background: linear-gradient(
      135deg,
      rgba(31,78,95,0.7),
      rgba(46,125,127,0.4)
      );
      }
      /* ===== FOCUS GLOW ===== */
      .overlay-focus{
      position:absolute;
      width:220px;
      height:220px;
      background: radial-gradient(circle, rgba(0,255,200,0.35), transparent 70%);
      top:40%;
      left:45%;
      transform:translate(-50%,-50%);
      filter: blur(10px);
      }
      /* ===== GLASS CARD ===== */
      .glass-info{
      position:absolute;
      top:20px;
      right:20px;
      padding:10px 16px;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius:12px;
      color:#fff;
      font-size:14px;
      border:1px solid rgba(255,255,255,0.2);
      }
      /* ===== EDGE FADE (premium effect) ===== */
      .viewer-card::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.4));
      pointer-events:none;
      }
      /* ===== BADGES ===== */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* ===== HEADER BASE ===== */
      .header-pro{
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      transition: 0.3s;
      padding: 15px;
      } 
      /* SHADOW ON SCROLL */
      .header-pro.scrolled{
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      }
      /* ===== BRAND ===== */
      .brand-logo{
      height: 42px;
      }
      .brand-text h5{
      font-weight: 700;
      color: #1f4e5f;
      }
      .brand-text small{
      font-size: 12px;
      color: #6c757d;
      }
      /* ===== NAV ===== */
      .nav-center{
      gap: 25px;
      }
      .nav-item{
      position: relative;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      padding: 6px 0;
      transition: 0.3s;
      }
      .nav-item i{
      margin-right: 6px;
      }
      /* HOVER EFFECT */
      .nav-item:hover{
      color: #2e7d7f;
      }
      /* ACTIVE UNDERLINE */
      .nav-item::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0%;
      height: 2px;
      background: #2e7d7f;
      transition: 0.3s;
      }
      .nav-item:hover::after,
      .nav-item.active::after{
      width: 100%;
      }
      /* ===== LOGIN BUTTON ===== */
      .btn-login{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color: #fff;
      border-radius: 25px;
      padding: 8px 20px;
      border: none;
      transition: 0.3s;
      }
      .btn-login:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      }
      /* ===== MOBILE ===== */
      @media(max-width:992px){
      .nav-center{
      display:none;
      }
      }
      /* ===== TOPBAR ===== */
      .topbar-pro{
      background: linear-gradient(90deg,#1f3c5a,#2e7d7f);
      color:#fff;
      font-size:14px;
      padding:8px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle glow effect */
      .topbar-pro::after{
      content:"";
      position:absolute;
      width:200%;
      height:100%;
      background: linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent);
      animation: shine 6s linear infinite;
      }
      @keyframes shine{
      0%{ transform: translateX(-100%);}
      100%{ transform: translateX(100%);}
      }
      /* ===== LEFT ITEMS ===== */
      .top-item{
      display:flex;
      align-items:center;
      gap:6px;
      margin-right:15px;
      opacity:0.9;
      transition:0.3s;
      font-size: 12px;
      }
      .top-item:hover{
      opacity:1;
      transform:translateY(-1px);
      }
      /* divider */
      .divider{
      width:1px;
      height:16px;
      background:rgba(255,255,255,0.3);
      margin:0 10px;
      }
      /* ===== CONTROL GROUP ===== */
      .control-group{
      display:flex;
      background:rgba(255,255,255,0.1);
      border-radius:25px;
      padding:2px;
      }
      /* buttons */
      .control-btn{
      background:transparent;
      border:none;
      color:#fff;
      padding:3.5px 10px;
      border-radius:20px;
      font-size:10px;
      transition:0.3s;
      } 
      /* active */
      .control-btn.active,
      .control-btn:hover{
      background:#fff;
      color:#1f4e5f;
      }
      /* ===== MOBILE ===== */
      @media(max-width:768px){
      .topbar-left{
      width:100%;
      justify-content:center;
      margin-bottom:5px;
      }
      .topbar-right{
      width:100%;
      justify-content:center;
      }
      }
      .about-pro{
      padding:30px 0;
      background:#f4f7f9;
      position:relative;
      } 
      /* subtle background */
      .about-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 25px 25px;
      }
      /* TITLE */
      .about-title{
      font-weight:700;
      color:#1f4e5f;
      }
      /* DESC */
      .about-desc{
      color:#555;
      margin-top:10px;
      }
      /* POINTS */
      .point{
      margin-top:10px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:500;
      }
      .point i{
      color:#2e7d7f;
      }
      /* ===== VISUAL ===== */
      .about-visual{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 50px rgba(0,0,0,0.2);
      }
      /* FLOATING CARDS */
      .floating-card{
      position:absolute;
      background:#fff;
      padding:8px 12px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      display:flex;
      align-items:center;
      gap:6px;
      }
      /* positions */
      .fc1{ top:15px; left:15px; }
      .fc2{ bottom:20px; left:20px; }
      .fc3{ top:50%; right:15px; }
      /* ===== FEATURE CARDS ===== */
      .about-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      text-align:center;
      transition:0.3s;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      }
      .about-card i{
      font-size:28px;
      color:#2e7d7f;
      }
      .about-card:hover{
      transform:translateY(-8px);
      box-shadow:0 15px 35px rgba(0,0,0,0.1);
      }
      .about-visual-pro{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      }
      .main-img{
      width:100%;
      filter: brightness(0.85);
      }
      /* blur */
      .blur-overlay{
      position:absolute;
      inset:0;
      backdrop-filter: blur(0.5px);
      }
      /* glowing parcel */
      .parcel-highlight{
      position:absolute;
      width:120px;
      height:120px;
      border:3px solid #00ffc8;
      border-radius:10px;
      top:40%;
      left:50%;
      transform:translate(-50%,-50%);
      box-shadow:0 0 20px #00ffc8;
      }
      /* labels */
      .label{
      position:absolute;
      background:rgba(255,255,255,0.9);
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
      }
      .l1{ top:20px; left:20px; }
      .l2{ bottom:20px; left:20px; }
      .l3{ top:50%; right:20px; }
      /* ===== SECTION ===== */
      .faq-pro{
      padding:30px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .faq-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .faq-header p{
      color:#666;
      }
      /* LIST */
      .faq-list{
      max-width:800px;
      margin:auto;
      }
      /* ITEM */
      .faq-item{
      background:#fff;
      border-radius:15px;
      margin-bottom:15px;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      overflow:hidden;
      transition:0.3s;
      }
      /* QUESTION */
      .faq-question{
      padding:18px 20px;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:500;
      }
      .faq-question i{
      transition:0.3s;
      }
      /* ANSWER */
      .faq-answer{
      max-height:0;
      overflow:hidden;
      padding:0 20px;
      color:#555;
      transition:0.4s ease;
      }
      /* ACTIVE */
      .faq-item.active .faq-answer{
      max-height:200px;
      padding:15px 20px 20px;
      }
      .faq-item.active .faq-question i{
      transform:rotate(180deg);
      }
      /* HOVER */
      .faq-item:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      }
      /* ===== SECTION ===== */
      .contact-pro{
      padding:30px 0 20px;
      background:#f4f7f9;
      }
      /* HEADER */
      .contact-pro h2{
      font-weight:700;
      color:#1f4e5f;
      }
      /* ===== CARD ===== */
      .contact-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      transition:0.3s;
      }
      .contact-card:hover{
      transform:translateY(-5px);
      box-shadow:0 20px 40px rgba(0,0,0,0.1);
      }
      /* HIGHLIGHT CARD */
      .contact-card.highlight{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      }
      /* ITEMS */
      .contact-item{
      display:flex;
      gap:15px;
      margin-bottom:15px;
      align-items:flex-start;
      }
      .contact-item i{
      font-size:20px;
      color:#2e7d7f;
      }
      .contact-card.highlight i{
      color:#fff;
      }
      .contact-item small{
      color:#888;
      }
      .contact-item p{
      margin:0;
      font-weight:500;
      }
      /* ===== FORM ===== */
      .contact-form{
      background:#fff;
      padding:30px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      }
      /* INPUT */
      .form-control{
      border-radius:10px;
      border:1px solid #ddd;
      padding:10px;
      transition:0.3s;
      }
      .form-control:focus{
      border-color:#2e7d7f;
      box-shadow:0 0 0 2px rgba(46,125,127,0.1);
      }
      /* BUTTON */
      .btn-send{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      border:none;
      padding:10px 25px;
      border-radius:25px;
      transition:0.3s;
      }
      .btn-send:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 20px rgba(0,0,0,0.2);
      }
      footer{
      margin-bottom:0 !important;
      }
      /* BUTTON */
      #backToTop{
      position:fixed;
      bottom:25px;
      right:25px;
      width:50px;
      height:50px;
      border:none;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      opacity:0;
      visibility:hidden;
      transform:translateY(20px);
      transition:0.4s;
      z-index:999;
      }
      /* SHOW */
      #backToTop.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      }
      /* ICON */
      #backToTop i{
      position:absolute;
      font-size:18px;
      }
      /* SVG FIX */
      .progress-ring{
      position:absolute;
      top:0;
      left:0;
      }
      /* background circle */
      .progress-ring .bg{
      fill:none;
      stroke:rgba(255,255,255,0.2);
      stroke-width:3;
      }
      /* progress circle */
      .progress-ring .progress{
      fill:none;
      stroke:#00ffc8;
      stroke-width:3;
      stroke-linecap:round;
      transform:rotate(-90deg);
      transform-origin:50% 50%;
      transition:stroke-dashoffset 0.2s linear;
      }
      /* SECTION BACKGROUND */
      .section-features{
      padding:100px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .section-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .section-header p{
      color:#666;
      max-width:600px;
      margin:auto;
      }
      /* CARD */
      .feature-card-pro{
      background:rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      padding:30px;
      border-radius:18px;
      text-align:center;
      transition:0.4s;
      border:1px solid rgba(255,255,255,0.4);
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      position:relative;
      overflow:hidden;
      }
      /* subtle gradient glow */
      .feature-card-pro::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent,rgba(0,255,200,0.1),transparent);
      opacity:0;
      transition:0.4s;
      }
      /* ICON WRAP */
      .icon-wrap{
      width:60px;
      height:60px;
      margin:auto;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      margin-bottom:15px;
      transition:0.4s;
      }
      /* TEXT */
      .feature-card-pro h5{
      font-weight:600;
      margin-bottom:8px;
      }
      .feature-card-pro p{
      color:#555;
      font-size:14px;
      }
      /* HOVER EFFECT */
      .feature-card-pro:hover{
      transform:translateY(-10px) scale(1.02);
      box-shadow:0 20px 50px rgba(0,0,0,0.15);
      }
      .feature-card-pro:hover::before{
      opacity:1;
      }
      .feature-card-pro:hover .icon-wrap{
      transform:scale(1.1) rotate(5deg);
      }
      /* NAV ITEM */
      .nav-item{
      position:relative;
      padding:8px 12px;
      color:#333;
      text-decoration:none;
      transition:0.3s;
      }
      /* underline base */
      .nav-item::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-5px;
      width:0%;
      height:2px;
      background:linear-gradient(90deg,#1f4e5f,#2e7d7f);
      transition:0.3s;
      }
      /* hover */
      .nav-item:hover::after{
      width:100%;
      }
      /* ACTIVE */
      .nav-item.active{
      color:#1f4e5f;
      font-weight:600;
      }
      .nav-item.active::after{
      width:100%;
      }
      /*      register*/
      /* WRAPPER */
      .register-wrapper{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      /*  background:#f4f7f9;*/
      background: linear-gradient(135deg, #1f4e5f, #2e7d7f);
      }
      /* CONTAINER */
      .register-container{
      display:flex;
/*      width:1000px;*/ 
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.2);
      }
      /* RIGHT */
      .register-card{
      flex:1;
      background:#fff;
      /*      padding:40px;*/
      padding: 20px 40px;
      }
      /* STEPPER */
      .stepper{
      display:flex;
      justify-content:space-between;
      margin-bottom:20px;
      } 
      .step{
      width:35px;
      height:35px;
      border-radius:50%;
      background:#ddd;
      display:flex;
      align-items:center;
      justify-content:center;
      }
      .step.active{
      background:#1f4e5f;
      color:#fff;
      }
      /* FORM STEPS */
      .form-step{
      display:none;
      }
      .form-step.active{
      display:block;
      }
      /* INPUT */
      .form-control{
      margin-bottom:12px;
      padding:10px;
      border-radius:10px;
      border:1px solid #ddd;
      }
      /* BUTTONS */
      .btn-next, .btn-prev, .btn-auth,.btn-complete{
      margin-top:10px;
      padding:10px 20px;
      border:none;
      border-radius:10px;
      background:#1f4e5f;
      color:#fff;
      }
      .step-actions{
      display:flex;
      justify-content:space-between;
      }
      /*register*/
      /*login*/
      .auth-wrapper{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      }
      /* container */
      .auth-container{
      display:flex;
/*      width:900px;*/
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.3);
      }
      /* LEFT */
      .auth-left{
      flex:1;
      padding:50px;
      color:#fff;
      background:linear-gradient(135deg,#1f4e5f,#16394c);
      }
      /* RIGHT CARD */
      .auth-card{
      flex:1;
      background:#fff;
      padding:40px;
      }
      /* TOGGLE */
      .auth-toggle{
      display:flex;
      background:#eef2f5;
      border-radius:10px;
      overflow:hidden;
      margin-bottom:20px;
      }
      .auth-toggle button{
      flex:1;
      padding:10px;
      border:none;
      background:transparent;
      cursor:pointer;
      }
      .auth-toggle .active{
      background:#1f4e5f;
      color:#fff;
      }
      /* INPUT */
      .input-group-pro{
      position:relative;
      margin-bottom:15px;
      }
      .input-group-pro input{
      width:100%;
      padding:12px 40px;
      border-radius:10px;
      border:1px solid #ddd;
      width: 16px;
      }
      /*      .input-group-pro i{
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      }*/
      /* CAPTCHA */
      .captcha-row{
      display:flex;
      gap:10px;
      }
      .captcha-box{
      background:#00c2d1;
      color:#000;
      padding:10px;
      border-radius:8px;
      }
      /* BUTTON */
      .btn-auth{
      width:100%;
      margin-top:15px;
      padding:12px;
      border:none;
      border-radius:10px;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      transition:0.3s;
      }
      .btn-auth:hover{
      transform:translateY(-2px);
      }
      /* SUBTEXT */
      .auth-sub{
      margin-top:10px;
      opacity:0.9;
      }
      /* FEATURES */
      .auth-features{
      margin-top:25px;
      }
      .auth-feature{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      font-size:14px;
      opacity:0.9;
      transition:0.3s;
      }
      .auth-feature i{
      font-size:18px;
      color:#00ffc8;
      }
      .auth-feature:hover{
      transform:translateX(5px);
      }
      /* STATS */
      .auth-stats{
      display:flex;
      gap:30px;
      margin-top:30px;
      }
      .auth-stats h5{
      margin:0;
      font-weight:700;
      }
      .auth-stats small{
      opacity:0.7;
      }
      /* LEFT PANEL BASE */
      .auth-left{
      position:relative;
      overflow:hidden;
      padding:50px;
      color:#fff;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      }
      /* CONTENT ABOVE */
      .auth-content{
      position:relative;
      z-index:2;
      }
      /* BACKGROUND CONTAINER */
      .auth-bg{
      position:absolute;
      inset:0;
      z-index:1;
      }
      /* BLOBS */
      .blob{
      position:absolute;
      border-radius:50%;
      filter: blur(60px);
      opacity:0.4;
      animation: floatMove 10s infinite ease-in-out alternate;
      }
      /* DIFFERENT BLOBS */
      .b1{
      width:200px;
      height:200px;
      background:#00ffc8;
      top:10%;
      left:10%;
      }
      .b2{
      width:250px;
      height:250px;
      background:#3fd0ff;
      bottom:10%;
      right:10%;
      animation-delay:2s;
      }
      .b3{
      width:180px;
      height:180px;
      background:#ffffff;
      top:50%;
      left:60%;
      opacity:0.2;
      animation-delay:4s;
      }
      /* ANIMATION */
      @keyframes floatMove{
      0%{
      transform:translate(0,0) scale(1);
      }
      50%{
      transform:translate(30px,-20px) scale(1.1);
      }
      100%{
      transform:translate(-20px,20px) scale(1);
      }
      }
      /* BASE */
      .auth-left{
      position:relative;
      overflow:hidden;
      padding:50px;
      color:#fff;
      background:#1f4e5f;
      }
      /* ===== GRADIENT FLOW ===== */
      .gradient-layer{
      position:absolute;
      inset:0;
      background:linear-gradient(
      120deg,
      #1f4e5f,
      #2e7d7f,
      #1f4e5f,
      #3a8f92
      );
      background-size:300% 300%;
      animation: gradientMove 12s ease infinite;
      opacity:0.9;
      }
      /* animation */
      @keyframes gradientMove{
      0%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
      100%{ background-position:0% 50%; }
      }
      /* ===== BLOBS (ENHANCED) ===== */
      .blob{
      position:absolute;
      border-radius:50%;
      filter: blur(80px);
      opacity:0.3;
      animation: floatMove 14s infinite ease-in-out alternate;
      }
      .b1{
      width:220px;
      height:220px;
      background:#00ffc8;
      top:10%;
      left:10%;
      }
      .b2{
      width:260px;
      height:260px;
      background:#3fd0ff;
      bottom:10%;
      right:10%;
      animation-delay:3s;
      }
      .b3{
      width:200px;
      height:200px;
      background:#ffffff;
      top:50%;
      left:60%;
      opacity:0.15;
      animation-delay:6s;
      }
      @keyframes floatMove{
      0%{ transform:translate(0,0) scale(1);}
      50%{ transform:translate(40px,-30px) scale(1.15);}
      100%{ transform:translate(-30px,30px) scale(1);}
      }
      /* ===== LIGHT SWEEP (WOW EFFECT) ===== */
      .light-sweep{
      position:absolute;
      top:0;
      left:-100%;
      width:200%;
      height:100%;
      background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.15),
      transparent
      );
      animation: sweep 6s linear infinite;
      }
      @keyframes sweep{
      0%{ transform:translateX(-100%); }
      100%{ transform:translateX(100%); }
      }
      /* ===== CONTENT ABOVE ===== */
      .auth-content{
      position:relative;
      z-index:2;
      }
      /*login*/
      /* OTP */
      .otp-box{
      display:flex;
      gap:10px;
      justify-content:center;
      margin:20px 0;
      }
      .otp-box input{
      width:45px;
      height:50px;
      text-align:center;
      font-size:20px;
      border-radius:10px;
      border:1px solid #ddd;
      transition:0.3s;
      }
      .otp-box input:focus{
      border-color:#1f4e5f;
      box-shadow:0 0 0 2px rgba(31,78,95,0.2);
      }
      /* resend */
      .resend{
      cursor:pointer;
      color:#1f4e5f;
      font-size:13px;
      }
      /* smooth transitions */
      .form-step{
      display:none;
      animation: fadeSlide 0.4s ease;
      }
      .form-step.active{
      display:block;
      }
      @keyframes fadeSlide{
      from{
      opacity:0;
      transform:translateX(20px);
      }
      to{
      opacity:1;
      transform:translateX(0);
      }
      }
      .auth-title-main{
      font-weight:700;
      font-size:32px;
      }
      /* dynamic block */
      .auth-dynamic{
      margin-top:25px;
      min-height:120px;
      }
      /* feature */
      .auth-feature{
      display:flex;
      gap:10px;
      margin-bottom:10px;
      opacity:0.9;
      transition:0.3s;
      }
      .auth-feature i{
      color:#00ffc8;
      }
      /* step switching */
      .auth-step-content{
      display:none;
      }
      .auth-step-content.active{
      display:block;
      animation:fadeIn 0.4s ease;
      }
      @keyframes fadeIn{
      from{opacity:0; transform:translateY(10px);}
      to{opacity:1; transform:translateY(0);}
      }
      /* progress bar */
      .auth-progress-bar{
      margin-top:30px;
      height:4px;
      background:rgba(255,255,255,0.2);
      border-radius:10px;
      overflow:hidden;
      }
      .progress-fill{
      height:100%;
      width:25%;
      background:#00ffc8;
      transition:0.4s;
      }
      .form-step h5{
      font-size:20px;
      font-weight:600;
      margin-bottom:20px;
      position:relative;
      }
      .form-step h5::after{
      content:"";
      width:40px;
      height:3px;
      background:#1f4e5f;
      position:absolute;
      bottom:-5px;
      left:0;
      }
      /* SUCCESS WRAPPER */
      .success-step{
      text-align:center;
      padding:30px 20px;
      }
      /* BOX */
      .success-box{
      animation: successFade 0.6s ease;
      }
      @keyframes successFade{
      from{
      opacity:0;
      transform:scale(0.9);
      }
      to{
      opacity:1;
      transform:scale(1);
      }
      }
      /* ICON */
      .success-icon{
      width:80px;
      height:80px;
      margin:0 auto 20px;
      }
      /* SVG */
      .success-icon svg{
      width:100%;
      height:100%;
      }
      /* circle */
      .success-icon circle{
      stroke:#2e7d7f;
      stroke-width:2;
      stroke-dasharray:157;
      stroke-dashoffset:157;
      animation: drawCircle 0.6s ease forwards;
      }
      /* check */
      .success-icon path{
      stroke:#2e7d7f;
      stroke-width:3;
      stroke-linecap:round;
      stroke-dasharray:48;
      stroke-dashoffset:48;
      animation: drawCheck 0.4s ease 0.6s forwards;
      }
      @keyframes drawCircle{
      to{ stroke-dashoffset:0; }
      }
      @keyframes drawCheck{
      to{ stroke-dashoffset:0; }
      }
      /* TEXT */
      .success-box h4{
      font-weight:600;
      margin-bottom:10px;
      }
      .success-box p{
      color:#666;
      font-size:14px;
      }
      .confetti{
      position:fixed;
      top:-10px;
      width:6px;
      height:10px;
      z-index:9999;
      }
      /* completed step */
      .step.completed{
      background:#2e7d7f;
      opacity:0.5;
      }
      /* validation */
      .is-invalid{
      border-color:red !important;
      }
      /* confetti */
      .confetti{
      position:fixed;
      top:-10px;
      width:6px;
      height:12px;
      z-index:9999;
      border-radius:2px;
      }
      /* SECTION TITLE */
      .section-title{
      font-size:20px;
      font-weight:600;
      margin-bottom:20px;
      display:flex;
      align-items:center;
      gap:10px;
      }
      .section-title i{
      color:#1f4e5f;
      font-size:22px;
      }
      /* FORM LABEL */
      .form-label{
      font-size:13px;
      font-weight:600;
      color:#1f4e5f;
      margin-bottom:8px;
      display:block;
      }
      /* GROUP */
      .form-group{
      margin-bottom:18px;
      }
      /* FLOAT INPUT */
      .input-float{
      position:relative;
      width:100%;
      }
      .input-float input,
      .input-float select{
      width:100%;
      padding:12px;
      border-radius:10px;
      border:1px solid #ddd;
      background:#fff;
      outline:none;
      transition:0.3s;
      }
      .input-float label{
      position:absolute;
      top:50%;
      left:12px;
      transform:translateY(-50%);
      background:#fff;
      padding:0 12px;
      font-size:13px;
      color:#888;
      pointer-events:none;
      transition:0.3s;
      }
      /* FLOAT ACTIVE */
      .input-float input:focus + label,
      .input-float input:valid + label,
      .input-float select:focus + label,
      .input-float select:valid + label{
      top:-4px;
      font-size:11px;
      color:#1f4e5f;
      }
      /* FOCUS EFFECT */
      .input-float input:focus,
      .input-float select:focus{
      border-color:#1f4e5f;
      box-shadow:0 0 0 2px rgba(31,78,95,0.1);
      }
      /* RADIO GROUP */
      .radio-group{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      }
      /* RADIO PILL */
      .radio-pill{
      position:relative;
      cursor:pointer;
      }
      .radio-pill input{
      display:none;
      }
      .radio-pill span{
      display:inline-block;
      padding:8px 16px;
      border-radius:20px;
      border:1px solid #ddd;
      font-size:13px;
      transition:0.3s;
      }
      /* ACTIVE STATE */
      .radio-pill input:checked + span{
      background:#1f4e5f;
      color:#fff;
      border-color:#1f4e5f;
      box-shadow:0 5px 12px rgba(31,78,95,0.2);
      }
      .deco-none {
      text-decoration: none !important;
      }
      /* TITLE */
      .form-title{
      font-weight:600;
      margin-bottom:15px;
      display:flex;
      align-items:center;
      gap:8px;
      }
      /* VERIFY GROUP */
      .verify-group{
      position:relative;
      margin-bottom:15px;
      }
      .verify-group input{
      padding-right:100px;
      }
      .verify-btn{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      border:none;
      background:linear-gradient(135deg,#0ea5a4,#2563eb);
      color:#fff;
      padding:6px 12px;
      border-radius:8px;
      font-size:12px;
      cursor:pointer;
      }
      /* VERIFIED STATE */
      .verify-status{
      position:absolute;
      right:100px;
      top:50%;
      transform:translateY(-50%);
      font-size:12px;
      color:#16a34a;
      display:none;
      }
      .verify-status.active{
      display:block;
      }
      /* PASSWORD TOGGLE */
      .toggle-pass{
      position:absolute;
      right:10px;
      top:50%;
      transform:translateY(-50%);
      cursor:pointer;
      }
      /* BUTTON */
      .btn-complete{
      margin-top:10px;
      }
      /* ================= MODAL ================= */
      .otp-modal{
      position:fixed;
      inset:0;
      display:none;
      z-index:999;
      }
      .otp-modal.show{
      display:block;
      }
      .otp-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      }
      .otp-card{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%) scale(0.9);
      width:340px;
      background:#fff;
      border-radius:16px;
      padding:25px;
      box-shadow:0 20px 60px rgba(0,0,0,0.3);
      opacity:0;
      transition:all 0.35s ease;
      }
      .otp-modal.show .otp-card{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
      }
      .otp-close{
      position:absolute;
      top:10px;
      right:12px;
      font-size:20px;
      cursor:pointer;
      }
      /* OTP BOX */
      .otp-box{
      display:flex;
      justify-content:center;
      gap:10px;
      margin:20px 0;
      }
      .otp-box input{
      width:45px;
      height:50px;
      text-align:center;
      border-radius:10px;
      border:1px solid #ccc;
      }
      /* VERIFY */
      .verify-group{
      position:relative;
      margin-bottom:15px;
      }
      .verify-group input{
      padding-right:100px;
      }
      .verify-btn{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      background:linear-gradient(135deg,#0ea5a4,#2563eb);
      color:#fff;
      border:none;
      padding:6px 12px;
      border-radius:8px;
      font-size:12px;
      cursor:pointer;
      }
      .verify-status{
      position:absolute;
      right:100px;
      top:50%;
      transform:translateY(-50%);
      font-size:12px;
      color:#16a34a;
      display:none;
      }
      .verify-status.active{
      display:flex;
      align-items:center;
      gap:5px;
      font-weight:600;
      }
      /* TOAST */
      .toast-pro{
      position:fixed;
      top:20px;
      right:20px;
      background:#16a34a;
      color:#fff;
      padding:12px 18px;
      border-radius:10px;
      box-shadow:0 10px 30px rgba(0,0,0,0.2);
      opacity:0;
      transform:translateY(-20px);
      transition:all 0.3s ease;
      display:flex;
      gap:8px;
      align-items:center;
      }
      .toast-pro.show{
      opacity:1;
      transform:translateY(0);
      }
      /* CONFETTI */
      .confetti{
      position:fixed;
      width:8px;
      height:8px;
      top:-10px;
      border-radius:50%;
      z-index:9999;
      }
      /* SSO SECTION */
      .sso-section{
      text-align:center;
      margin-top:20px;
      animation: fadeIn 0.5s ease;
      }
      .sso-title{
      font-weight:600;
      font-size:14px;
      color:#444;
      margin-bottom:12px;
      }
      /* BUTTON GROUP */
      .sso-options{
      display:flex;
      justify-content:center;
      gap:10px;
      }
      /* BUTTON */
      .sso-btn{
      border:none;
      padding:8px 18px;
      border-radius:25px;
      font-size:13px;
      cursor:pointer;
      transition:0.3s;
      background:#f1f5f9;
      color:#333;
      }
      /* ACTIVE */
      .sso-btn.active{
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      /* HOVER */
      .sso-btn:hover{
      transform:translateY(-2px);
      }
      /* RESULT */
      .sso-result{
      min-height:40px;
      }
      /* TEXT */
      .sso-text{
      font-size:13px;
      color:#666;
      }
      /* SSO LINK CARD */
      .sso-link-card{
      display:inline-block;
      padding:10px 18px;
      border-radius:10px;
      background:linear-gradient(135deg,#0ea5a4,#2563eb);
      color:#fff;
      text-decoration:none;
      font-size:13px;
      transition:0.3s;
      }
      .sso-link-card:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 25px rgba(0,0,0,0.2);
      }
    
    /* register */

     
      /* ===== THEME COLORS (from your UI) ===== */
      :root{
      --primary:#1f4e5f;
      --secondary:#2e7d7f;
      --accent:#00bcd4;
      --light:#f4f7f9;
      /* TEXT COLORS */
      --text: #1e293b;
      --text-muted: #64748b;   /* ✅ THIS WAS MISSING */
      --text-light: #94a3b8;
      /* BACKGROUND */
      --bg: #f8fafc;
      --card-bg: #ffffff;
      /* BORDER */
      --border: rgba(0,0,0,0.08);
      }
      /* ===== GLOBAL ===== */
      body{
      font-family: 'Segoe UI', sans-serif;
      background: var(--light);
      }
      html, body{
      height:100%;
      margin:0;
      }
      /* FULL PAGE LAYOUT */
      .page-wrapper{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      }
      /* MAIN CONTENT EXPANDS */
      .main-content{
      flex:1;
      display:flex;
      flex-direction:column;
      }
      /* ===== NAVBAR ===== */
      .navbar{
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      }
      .navbar-brand{
      font-weight: 600;
      color: #fff !important;
      }
      /* ===== HERO ===== */
      .hero{
      height: 90vh;
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),
      url('assets/img/land.jpg') no-repeat;
      background-size: cover;
      background-position: center;
      color: white;
      }
      .hero h1{
      font-size: 3rem;
      font-weight: 700;
      }
      .hero-btn{
      background: var(--accent);
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      }
      /* ===== FEATURE CARDS ===== */
      .feature-card{
      background: white;
      border-radius: 15px;
      padding: 25px;
      transition: 0.3s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      }
      .feature-card:hover{
      transform: translateY(-10px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      }
      .feature-icon{
      font-size: 30px;
      color: var(--secondary);
      }
      /* ===== MAP SECTION ===== */
      .map-preview{
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      }
      /* ===== CTA ===== */
      .cta{
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      color: white;
      border-radius: 20px;
      padding: 50px;
      }
      /* ===== FOOTER ===== */
      /* ===== FOOTER ===== */
      .footer-pro{
      background: linear-gradient(135deg,#0f2d46,#1f4e5f);
      color:#fff;
      padding:80px 0 30px;
      position:relative;
      margin-top:0;
      }
      /* subtle pattern */
      /* .footer-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 25px 25px;
      }*/
      /* TITLE */
      .footer-title{
      font-weight:700;
      }
      /* DESC */
      .footer-desc{
      color:#cbd5e1;
      margin-top:10px;
      }
      /* HEADINGS */
      .footer-heading{
      margin-bottom:10px;
      font-weight:600;
      }
      /* LINKS */
      .footer-links{
      list-style:none;
      padding:0;
      }
      .footer-links li{
      margin-bottom:8px;
      }
      .footer-links a{
      color:#cbd5e1;
      text-decoration:none;
      transition:0.3s;
      }
      .footer-links a:hover{
      color:#fff;
      padding-left:5px;
      }
      /* SOCIAL */
      .footer-social a{
      display:inline-block;
      margin-right:10px;
      font-size:18px;
      color:#fff;
      transition:0.3s;
      }
      .footer-social a:hover{
      transform:translateY(-3px) scale(1.1);
      color:#00d4ff;
      }
      /* CONTACT */
      .footer-pro p{
      margin:5px 0;
      color:#cbd5e1;
      }
      .footer-pro i{
      margin-right:6px;
      }
      /* STATS */
      .footer-stats{
      display:flex;
      gap:15px;
      font-size:13px;
      }
      /* DIVIDER */
      .footer-divider{
      border-color:rgba(255,255,255,0.2);
      margin:30px 0;
      }
      /* BOTTOM */
      .footer-bottom{
      font-size:14px;
      color:#cbd5e1;
      }
      /* MOBILE */
      @media(max-width:768px){
      .auth-left {
      display: none;
      }
      .footer-bottom{
      text-align:center;
      gap:10px;
      }
      }
      /* ===== TOP BAR ===== */
      .topbar{
      background:#1f3c5a;
      color:#fff;
      font-size:14px;
      padding:6px 0;
      }
      /* ===== HEADER ===== */
      .main-header{
      background:#fff;
      padding:10px 0;
      border-bottom:1px solid #eee;
      }
      /* ===== NAV ===== */
      .nav-menu{
      background:#f8f9fb;
      border-bottom:1px solid #ddd;
      }
      .nav-link{
      font-weight:500;
      }
      .nav-link.active{
      border-bottom:2px solid #2e7d7f;
      }
      /* ===== FIXED HEADER ===== */
      .topbar, .main-header, .nav-menu{
      position: sticky;
      z-index: 999;
      }
      .topbar{ top:0; }
      .main-header{ top:36px; }
      .nav-menu{ top:96px; }
      /* ===== HERO ===== */
      .hero-advanced{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:100px 0;
      }
      .hero-title{
      font-size:42px;
      font-weight:700;
      }
      .hero-sub{
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      }
      /* MAP CARD */
      .map-card{
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 40px rgba(0,0,0,0.3);
      transform: perspective(1000px) rotateY(-5deg);
      transition:0.4s;
      }
      .map-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* FLOATING LABEL */
      .floating-card{
      position:absolute;
      bottom:15px;
      left:15px;
      background:#fff;
      padding:10px 15px;
      border-radius:10px;
      font-size:14px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .hero-pro{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:120px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle grid pattern */
      .hero-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 30px 30px;
      }
      /* TEXT */
      .hero-title{
      font-size:44px;
      font-weight:700;
      }
      .hero-sub{
      margin-top:15px;
      font-size:16px;
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags{
      margin-top:20px;
      }
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      font-size:14px;
      transition:0.3s;
      }
      .hero-tags span:hover{
      background:rgba(255,255,255,0.2);
      }
      /* RIGHT CARD */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* BADGES */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* BUTTONS */
      .btn-light{
      border-radius:25px;
      }
      .btn-outline-light{
      border-radius:25px;
      }
      /* MOBILE FIX */
      @media(max-width:992px){
      .viewer-card{
      margin-top:30px;
      transform:none;
      }
      }
      /* ===== IMAGE BASE ===== */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      .viewer-card img{
      width:100%;
      display:block;
      }
      /* ===== GRADIENT OVERLAY ===== */
      .overlay-gradient{
      position:absolute;
      inset:0;
      background: linear-gradient(
      135deg,
      rgba(31,78,95,0.7),
      rgba(46,125,127,0.4)
      );
      }
      /* ===== FOCUS GLOW ===== */
      .overlay-focus{
      position:absolute;
      width:220px;
      height:220px;
      background: radial-gradient(circle, rgba(0,255,200,0.35), transparent 70%);
      top:40%;
      left:45%;
      transform:translate(-50%,-50%);
      filter: blur(10px);
      }
      /* ===== GLASS CARD ===== */
      .glass-info{
      position:absolute;
      top:20px;
      right:20px;
      padding:10px 16px;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius:12px;
      color:#fff;
      font-size:14px;
      border:1px solid rgba(255,255,255,0.2);
      }
      /* ===== EDGE FADE (premium effect) ===== */
      .viewer-card::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.4));
      pointer-events:none;
      }
      /* ===== BADGES ===== */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* ===== HEADER BASE ===== */
      .header-pro{
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      transition: 0.3s;
      padding: 15px;
      } 
      /* SHADOW ON SCROLL */
      .header-pro.scrolled{
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      }
      /* ===== BRAND ===== */
      .brand-logo {
      height: 26px;
      background: #fff;
      border-radius: 100%;
      } 
      .brand-text h5{
      font-weight: 700;
      color: #1f4e5f;
      }
      .brand-text small{
      font-size: 12px;
      color: #6c757d;
      }
      /* ===== NAV ===== */
      .nav-center{
      gap: 25px;
      }
      .nav-item{
      position: relative;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      padding: 6px 0;
      transition: 0.3s;
      }
      .nav-item i{
      margin-right: 6px;
      }
      /* HOVER EFFECT */
      .nav-item:hover{
      color: #2e7d7f;
      }
      /* ACTIVE UNDERLINE */
      .nav-item::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0%;
      height: 2px;
      background: #2e7d7f;
      transition: 0.3s;
      }
      .nav-item:hover::after,
      .nav-item.active::after{
      width: 100%;
      }
      /* ===== LOGIN BUTTON ===== */
      .btn-login{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color: #fff;
      border-radius: 25px;
      padding: 8px 20px;
      border: none;
      transition: 0.3s;
      }
      .btn-login:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      }
      /* ===== MOBILE ===== */
      @media(max-width:992px){
      .nav-center{
      display:none;
      }
      }
      /* ===== TOPBAR ===== */
      .topbar-pro{
      background: linear-gradient(90deg,#1f3c5a,#2e7d7f);
      color:#fff;
      font-size:14px;
      padding:8px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle glow effect */
      .topbar-pro::after{
      content:"";
      position:absolute;
      width:200%;
      height:100%;
      background: linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent);
      animation: shine 6s linear infinite;
      }
      @keyframes shine{
      0%{ transform: translateX(-100%);}
      100%{ transform: translateX(100%);}
      }
      /* ===== LEFT ITEMS ===== */
      .top-item{
      display:flex;
      align-items:center;
      gap:6px;
      margin-right:15px;
      opacity:0.9;
      transition:0.3s;
      font-size: 12px;
      }
      .top-item:hover{
      opacity:1;
      transform:translateY(-1px);
      }
      /* divider */
      .divider{
      width:1px;
      height:16px;
      background:rgba(255,255,255,0.3);
      margin:0 10px;
      }
      /* ===== CONTROL GROUP ===== */
      .control-group{
      display:flex;
      background:rgba(255,255,255,0.1);
      border-radius:25px;
      padding:2px;
      }
      /* buttons */
      .control-btn{
      background:transparent;
      border:none;
      color:#fff;
      padding:3.5px 10px;
      border-radius:20px;
      font-size:10px;
      transition:0.3s;
      } 
      /* active */
      .control-btn.active,
      .control-btn:hover{
      background:#fff;
      color:#1f4e5f;
      }
      /* ===== MOBILE ===== */
      @media(max-width:768px){
      .topbar-left{
      width:100%;
      justify-content:center;
      margin-bottom:5px;
      }
      .topbar-right{
      width:100%;
      justify-content:center;
      }
      }
      .about-pro{
      padding:30px 0;
      background:#f4f7f9;
      position:relative;
      } 
      /* subtle background */
      .about-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 25px 25px;
      }
      /* TITLE */
      .about-title{
      font-weight:700;
      color:#1f4e5f;
      }
      /* DESC */
      .about-desc{
      color:#555;
      margin-top:10px;
      }
      /* POINTS */
      .point{
      margin-top:10px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:500;
      }
      .point i{
      color:#2e7d7f;
      }
      /* ===== VISUAL ===== */
      .about-visual{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 50px rgba(0,0,0,0.2);
      }
      /* FLOATING CARDS */
      .floating-card{
      position:absolute;
      background:#fff;
      padding:8px 12px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      display:flex;
      align-items:center;
      gap:6px;
      }
      /* positions */
      .fc1{ top:15px; left:15px; }
      .fc2{ bottom:20px; left:20px; }
      .fc3{ top:50%; right:15px; }
      /* ===== FEATURE CARDS ===== */
      .about-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      text-align:center;
      transition:0.3s;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      }
      .about-card i{
      font-size:28px;
      color:#2e7d7f;
      }
      .about-card:hover{
      transform:translateY(-8px);
      box-shadow:0 15px 35px rgba(0,0,0,0.1);
      }
      .about-visual-pro{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      }
      .main-img{
      width:100%;
      filter: brightness(0.85);
      }
      /* blur */
      .blur-overlay{
      position:absolute;
      inset:0;
      backdrop-filter: blur(0.5px);
      }
      /* glowing parcel */
      .parcel-highlight{
      position:absolute;
      width:120px;
      height:120px;
      border:3px solid #00ffc8;
      border-radius:10px;
      top:40%;
      left:50%;
      transform:translate(-50%,-50%);
      box-shadow:0 0 20px #00ffc8;
      }
      /* labels */
      .label{
      position:absolute;
      background:rgba(255,255,255,0.9);
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
      }
      .l1{ top:20px; left:20px; }
      .l2{ bottom:20px; left:20px; }
      .l3{ top:50%; right:20px; }
      /* ===== SECTION ===== */
      .faq-pro{
      padding:30px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .faq-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .faq-header p{
      color:#666;
      }
      /* LIST */
      .faq-list{
      max-width:800px;
      margin:auto;
      }
      /* ITEM */
      .faq-item{
      background:#fff;
      border-radius:15px;
      margin-bottom:15px;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      overflow:hidden;
      transition:0.3s;
      }
      /* QUESTION */
      .faq-question{
      padding:18px 20px;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:500;
      }
      .faq-question i{
      transition:0.3s;
      }
      /* ANSWER */
      .faq-answer{
      max-height:0;
      overflow:hidden;
      padding:0 20px;
      color:#555;
      transition:0.4s ease;
      }
      /* ACTIVE */
      .faq-item.active .faq-answer{
      max-height:200px;
      padding:15px 20px 20px;
      }
      .faq-item.active .faq-question i{
      transform:rotate(180deg);
      }
      /* HOVER */
      .faq-item:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      }
      /* ===== SECTION ===== */
      .contact-pro{
      padding:30px 0 20px;
      background:#f4f7f9;
      }
      /* HEADER */
      .contact-pro h2{
      font-weight:700;
      color:#1f4e5f;
      }
      /* ===== CARD ===== */
      .contact-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      transition:0.3s;
      }
      .contact-card:hover{
      transform:translateY(-5px);
      box-shadow:0 20px 40px rgba(0,0,0,0.1);
      }
      /* HIGHLIGHT CARD */
      .contact-card.highlight{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      }
      /* ITEMS */
      .contact-item{
      display:flex;
      gap:15px;
      margin-bottom:15px;
      align-items:flex-start;
      }
      .contact-item i{
      font-size:20px;
      color:#2e7d7f;
      }
      .contact-card.highlight i{
      color:#fff;
      }
      .contact-item small{
      color:#888;
      }
      .contact-item p{
      margin:0;
      font-weight:500;
      }
      /* ===== FORM ===== */
      .contact-form{
      background:#fff;
      padding:30px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      }
      /* INPUT */
      .form-control{
      border-radius:10px;
      border:1px solid #ddd;
      padding:10px;
      transition:0.3s;
      }
      .form-control:focus{
      border-color:#2e7d7f;
      box-shadow:0 0 0 2px rgba(46,125,127,0.1);
      }
      /* BUTTON */
      .btn-send{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      border:none;
      padding:10px 25px;
      border-radius:25px;
      transition:0.3s;
      }
      .btn-send:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 20px rgba(0,0,0,0.2);
      }
      footer{
      margin-bottom:0 !important;
      }
      /* BUTTON */
      #backToTop{
      position:fixed;
      bottom:25px;
      right:25px;
      width:50px;
      height:50px;
      border:none;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      opacity:0;
      visibility:hidden;
      transform:translateY(20px);
      transition:0.4s;
      z-index:999;
      }
      /* SHOW */
      #backToTop.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      }
      /* ICON */
      #backToTop i{
      position:absolute;
      font-size:18px;
      }
      /* SVG FIX */
      .progress-ring{
      position:absolute;
      top:0;
      left:0;
      }
      /* background circle */
      .progress-ring .bg{
      fill:none;
      stroke:rgba(255,255,255,0.2);
      stroke-width:3;
      }
      /* progress circle */
      .progress-ring .progress{
      fill:none;
      stroke:#00ffc8;
      stroke-width:3;
      stroke-linecap:round;
      transform:rotate(-90deg);
      transform-origin:50% 50%;
      transition:stroke-dashoffset 0.2s linear;
      }
      /* SECTION BACKGROUND */
      .section-features{
      padding:100px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .section-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .section-header p{
      color:#666;
      max-width:600px;
      margin:auto;
      }
      /* CARD */
      .feature-card-pro{
      background:rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      padding:30px;
      border-radius:18px;
      text-align:center;
      transition:0.4s;
      border:1px solid rgba(255,255,255,0.4);
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      position:relative;
      overflow:hidden;
      }
      /* subtle gradient glow */
      .feature-card-pro::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent,rgba(0,255,200,0.1),transparent);
      opacity:0;
      transition:0.4s;
      }
      /* ICON WRAP */
      .icon-wrap{
      width:60px;
      height:60px;
      margin:auto;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      margin-bottom:15px;
      transition:0.4s;
      }
      /* TEXT */
      .feature-card-pro h5{
      font-weight:600;
      margin-bottom:8px;
      }
      .feature-card-pro p{
      color:#555;
      font-size:14px;
      }
      /* HOVER EFFECT */
      .feature-card-pro:hover{
      transform:translateY(-10px) scale(1.02);
      box-shadow:0 20px 50px rgba(0,0,0,0.15);
      }
      .feature-card-pro:hover::before{
      opacity:1;
      }
      .feature-card-pro:hover .icon-wrap{
      transform:scale(1.1) rotate(5deg);
      }
      /* NAV ITEM */
      .nav-item{
      position:relative;
      padding:8px 12px;
      color:#333;
      text-decoration:none;
      transition:0.3s;
      }
      /* underline base */
      .nav-item::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-5px;
      width:0%;
      height:2px;
      background:linear-gradient(90deg,#1f4e5f,#2e7d7f);
      transition:0.3s;
      }
      /* hover */
      .nav-item:hover::after{
      width:100%;
      }
      /* ACTIVE */
      .nav-item.active{
      color:#1f4e5f;
      font-weight:600;
      }
      .nav-item.active::after{
      width:100%;
      }
      /*login*/
      .auth-wrapper{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      }
      /* container */
      .auth-container{
      display:flex;
      /* width:900px; */
      /* border-radius:20px; */
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.3);
      }
      /* LEFT */
      .auth-left{
      flex:1;
      padding:50px;
      color:#fff;
      background:linear-gradient(135deg,#1f4e5f,#16394c);
      }
      /* RIGHT CARD */
      .auth-card{
      flex:1;
      background:#fff;
      padding:40px;
          position: relative;
      }
      .modalclose {
        position: absolute;
        top: 10px;
        right: 15px;
      }

      /* TOGGLE */
      .auth-toggle{
      display:flex;
      background:#eef2f5;
      border-radius:10px;
      overflow:hidden;
      margin-bottom:20px;
      }
      .auth-toggle button{
      flex:1;
      padding:10px;
      border:none;
      background:transparent;
      cursor:pointer;
      }
      .auth-toggle .active{
      background:#1f4e5f;
      color:#fff;
      }
      /* INPUT */
      .input-group-pro{
      position:relative;
      margin-bottom:15px;
      }
      .input-group-pro input{
      width:100%;
      padding:12px 40px;
      border-radius:10px;
      border:1px solid #ddd;
      }
      .input-group-pro i{
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      }
      /* CAPTCHA */
      .captcha-row{
      display:flex;
      gap:10px;
      }
      .captcha-box{
      background:#00c2d1;
      color:#000;
      padding:10px;
      border-radius:8px;
      }
      /* BUTTON */
      .btn-auth{
      width:100%;
      margin-top:15px;
      padding:12px;
      border:none;
      border-radius:10px;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      transition:0.3s;
      }
      .btn-auth:hover{
      transform:translateY(-2px);
      }
      /* SUBTEXT */
      .auth-sub{
      margin-top:10px;
      opacity:0.9;
      }
      /* FEATURES */
      .auth-features{
      margin-top:25px;
      }
      .auth-feature{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      font-size:14px;
      opacity:0.9;
      transition:0.3s;
      }
      .auth-feature i{
      font-size:18px;
      color:#00ffc8;
      }
      .auth-feature:hover{
      transform:translateX(5px);
      }
      /* STATS */
      .auth-stats{
      display:flex;
      gap:30px;
      margin-top:30px;
      }
      .auth-stats h5{
      margin:0;
      font-weight:700;
      }
      .auth-stats small{
      opacity:0.7;
      }
      /* LEFT PANEL BASE */
      .auth-left{
      position:relative;
      overflow:hidden;
      padding:50px;
      color:#fff;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      }
      /* CONTENT ABOVE */
      .auth-content{
      position:relative;
      z-index:2;
      }
      /* BACKGROUND CONTAINER */
      .auth-bg{
      position:absolute;
      inset:0;
      z-index:1;
      }
      /* BLOBS */
      .blob{
      position:absolute;
      border-radius:50%;
      filter: blur(60px);
      opacity:0.4;
      animation: floatMove 10s infinite ease-in-out alternate;
      }
      /* DIFFERENT BLOBS */
      .b1{
      width:200px;
      height:200px;
      background:#00ffc8;
      top:10%;
      left:10%;
      }
      .b2{
      width:250px;
      height:250px;
      background:#3fd0ff;
      bottom:10%;
      right:10%;
      animation-delay:2s;
      }
      .b3{
      width:180px;
      height:180px;
      background:#ffffff;
      top:50%;
      left:60%;
      opacity:0.2;
      animation-delay:4s;
      }
      /* ANIMATION */
      @keyframes floatMove{
      0%{
      transform:translate(0,0) scale(1);
      }
      50%{
      transform:translate(30px,-20px) scale(1.1);
      }
      100%{
      transform:translate(-20px,20px) scale(1);
      }
      }
      /* BASE */
      .auth-left{
      position:relative;
      overflow:hidden;
      padding:50px;
      color:#fff;
      background:#1f4e5f;
      }
      /* ===== GRADIENT FLOW ===== */
      .gradient-layer{
      position:absolute;
      inset:0;
      background:linear-gradient(
      120deg,
      #1f4e5f,
      #2e7d7f,
      #1f4e5f,
      #3a8f92
      );
      background-size:300% 300%;
      animation: gradientMove 12s ease infinite;
      opacity:0.9;
      }
      /* animation */
      @keyframes gradientMove{
      0%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
      100%{ background-position:0% 50%; }
      }
      /* ===== BLOBS (ENHANCED) ===== */
      .blob{
      position:absolute;
      border-radius:50%;
      filter: blur(80px);
      opacity:0.3;
      animation: floatMove 14s infinite ease-in-out alternate;
      }
      .b1{
      width:220px;
      height:220px;
      background:#00ffc8;
      top:10%;
      left:10%;
      }
      .b2{
      width:260px;
      height:260px;
      background:#3fd0ff;
      bottom:10%;
      right:10%;
      animation-delay:3s;
      }
      .b3{
      width:200px;
      height:200px;
      background:#ffffff;
      top:50%;
      left:60%;
      opacity:0.15;
      animation-delay:6s;
      }
      @keyframes floatMove{
      0%{ transform:translate(0,0) scale(1);}
      50%{ transform:translate(40px,-30px) scale(1.15);}
      100%{ transform:translate(-30px,30px) scale(1);}
      }
      /* ===== LIGHT SWEEP (WOW EFFECT) ===== */
      .light-sweep{
      position:absolute;
      top:0;
      left:-100%;
      width:200%;
      height:100%;
      background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.15),
      transparent
      );
      animation: sweep 6s linear infinite;
      }
      @keyframes sweep{
      0%{ transform:translateX(-100%); }
      100%{ transform:translateX(100%); }
      }
      /* ===== CONTENT ABOVE ===== */
      .auth-content{
      position:relative;
      z-index:2;
      }
      .input-group-custom{
      position:relative;
      }
      .input-icon{
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      color:#666;
      }
      .input-group-custom input{
      padding-left:38px;
      padding-right:40px;
      }
      /* toggle icon */
      .toggle-password{
      position:absolute;
      right: 3rem;
      top:50%; 
      transform:translateY(-50%);
      cursor:pointer;
      color:#666;
      transition:0.3s;
      } 
      .toggle-password:hover{
      color:#1f4e5f;
      }
      .captcha-wrapper{
      display:flex;
      gap:10px;
      }
      .captcha-box{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:10px;
      background:#0bbbc1;
      color:#000;
      font-weight:600;
      }
      .captcha-refresh{
      cursor:pointer;
      font-size:16px;
      transition:0.3s;
      }
      .captcha-refresh:hover{
      transform:rotate(90deg);
      }
      .captcha-box:hover{
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
      }
      /* FORGOT PASSWORD */
      .forgot-link{
      font-size: 13px;
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      }
      .forgot-link:hover{
      color: var(--accent);
      text-decoration: underline;
      }
      /* ================= DIVIDER ================= */
      .auth-divider-pro{
      position: relative;
      text-align: center;
      margin: 28px 0 18px;
      }
      .auth-divider-pro span{
      position: relative;
      z-index: 2;
      padding: 6px 18px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #6b7280;
      background: #ffffff;
      border-radius: 50px;
      }
      /* LINES */
      .auth-divider-pro::before,
      .auth-divider-pro::after{
      content: "";
      position: absolute;
      top: 50%;
      width: 42%;
      height: 1.5px;
      background: linear-gradient(to right, transparent, #d1d5db);
      }
      .auth-divider-pro::before{
      left: 0;
      }
      .auth-divider-pro::after{
      right: 0;
      transform: scaleX(-1);
      }
      /* ================= SSO BUTTON ================= */
      .btn-sso-pro{
      width: 100%;
      border-radius: 14px;
      padding: 14px;
      font-weight: 600;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #0ea5a4, #2563eb);
      color: #fff;
      border: none;
      box-shadow: 0 10px 25px rgba(14,165,164,0.25);
      transition: all 0.3s ease;
      }
      .btn-sso-pro i{
      font-size: 18px;
      }
      .btn-sso-pro:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(14,165,164,0.35);
      }
      /* ================= REGISTER ================= */
      .auth-footer-pro{
      margin-top: 18px;
      font-size: 14px;
      color: #6b7280;
      }
      .auth-footer-pro a{
      color: #0ea5a4;
      font-weight: 600;
      margin-left: 5px;
      text-decoration: none;
      position: relative;
      }
      .auth-footer-pro a::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0%;
      height: 2px;
      background: #0ea5a4;
      transition: 0.3s;
      }
      .auth-footer-pro a:hover::after{
      width: 100%;
      }
      .deco-none {
      text-decoration: none !important;
      }



      /* HIDE RADIOS */
#tabPublic,
#tabOfficial{
  display:none;
}

/* CONTENT WRAPPER */
.auth-content{
  position:relative;
}

/* PANES DEFAULT */
.auth-pane{
  display:none;
  animation:fadeIn 0.3s ease;
}

/* SHOW PUBLIC */
#tabPublic:checked ~ .auth-content .public-pane{
  display:block;
}

/* SHOW OFFICIAL */
#tabOfficial:checked ~ .auth-content .official-pane{
  display:block;
}

/* FADE ANIMATION */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
/* HIDE RADIO */
#tabPublic,
#tabOfficial{
  display:none;
}

/* TAB WRAPPER */
.auth-tabs-static{
  position:relative;
  display:flex;
  background:#eef2f5;
  border-radius:12px;
  padding:4px;
  margin-bottom:20px;
}

/* TAB */
.tab{
  flex:1;
  text-align:center;
  padding:10px;
  font-size:13px;
  font-weight:600;
  color:#64748b;
  border-radius:10px;
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* ACTIVE TEXT */
#tabPublic:checked ~ .auth-tabs-static .tab-public,
#tabOfficial:checked ~ .auth-tabs-static .tab-official{
  color:#fff;
}

/* SLIDER */
.tab-indicator{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
  border-radius:10px;
  transition:0.3s;
}

/* MOVE SLIDER */
#tabOfficial:checked ~ .auth-tabs-static .tab-indicator{
  transform:translateX(100%);
}

/* TITLE SWITCH */
.title-official{
  display:none;
}

#tabOfficial:checked ~ .auth-title-wrapper .title-public{
  display:none;
}

#tabOfficial:checked ~ .auth-title-wrapper .title-official{
  display:block;
}
      /*login*/
    

     

      /* ===== GLOBAL ===== */
      body{
      font-family: 'Segoe UI', sans-serif;
/*      background: var(--light);*/
      }
      html, body{
      height:100%;
      margin:0;
      }
      /* FULL PAGE LAYOUT */
      .page-wrapper{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      }
      /* MAIN CONTENT EXPANDS */
      .main-content{
      flex:1;
      display:flex;
      flex-direction:column;
      }
      /* ===== NAVBAR ===== */
      .navbar{
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      }
      .navbar-brand{
      font-weight: 600;
      color: #fff !important;
      }
      /* ===== HERO ===== */
      .hero{
      height: 90vh;
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),
      url('https://images.unsplash.com/photo-1500382017468-9049fed747ef');
      background-size: cover;
      background-position: center;
      color: white;
      }
      .hero h1{
      font-size: 3rem;
      font-weight: 700;
      }
      .hero-btn{
      background: var(--accent);
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      }
      /* ===== FEATURE CARDS ===== */
      .feature-card{
      background: white;
      border-radius: 15px;
      padding: 25px;
      transition: 0.3s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      }
      .feature-card:hover{
      transform: translateY(-10px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      }
      .feature-icon{
      font-size: 30px;
      color: var(--secondary);
      }
      /* ===== MAP SECTION ===== */
      .map-preview{
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      }
      /* ===== CTA ===== */
      .cta{
      background: linear-gradient(90deg, var(--secondary), var(--accent));
      color: white;
      border-radius: 20px;
      padding: 50px;
      }
      /* ===== FOOTER ===== */
      /* ===== FOOTER ===== */
      .footer-pro{
      background: linear-gradient(135deg,#0f2d46,#1f4e5f);
      color:#fff;
      padding:80px 0 30px;
      position:relative;
      margin-top:0;
      }
      /* subtle pattern */
      /* .footer-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 25px 25px;
      }*/
      /* TITLE */
      .footer-title{
      font-weight:700;
      }
      /* DESC */
      .footer-desc{
      color:#cbd5e1;
      margin-top:10px;
      }
      /* HEADINGS */
      .footer-heading{
      margin-bottom:10px;
      font-weight:600;
      }
      /* LINKS */
      .footer-links{
      list-style:none;
      padding:0;
      }
      .footer-links li{
      margin-bottom:8px;
      }
      .footer-links a{
      color:#cbd5e1;
      text-decoration:none;
      transition:0.3s;
      }
      .footer-links a:hover{
      color:#fff;
      padding-left:5px;
      }
      /* SOCIAL */
      .footer-social a{
      display:inline-block;
      margin-right:10px;
      font-size:18px;
      color:#fff;
      transition:0.3s;
      }
      .footer-social a:hover{
      transform:translateY(-3px) scale(1.1);
      color:#00d4ff;
      }
      /* CONTACT */
      .footer-pro p{
      margin:5px 0;
      color:#cbd5e1;
      }
      .footer-pro i{
      margin-right:6px;
      }
      /* STATS */
      .footer-stats{
      display:flex;
      gap:15px;
      font-size:13px;
      }
      /* DIVIDER */
      .footer-divider{
      border-color:rgba(255,255,255,0.2);
      margin:30px 0;
      }
      /* BOTTOM */
      .footer-bottom{
      font-size:14px;
      color:#cbd5e1;
      }
      /* MOBILE */
      @media(max-width:768px){

        .top-item, .btn-login {
          white-space: nowrap;
        }
        .hero-pro {
          padding: 35px 0 !important;
        }

        .hero-title {
            font-size: 34px !important;
        }

        .top-item {
            position: relative;
            right: -10px;
        }
 
      .footer-bottom{
      text-align:center;
      gap:10px;
      }
      }
      /* ===== TOP BAR ===== */
      .topbar{
      background:#1f3c5a;
      color:#fff;
      font-size:14px;
      padding:6px 0;
      }
      /* ===== HEADER ===== */
      .main-header{
      background:#fff;
      padding:10px 0;
      border-bottom:1px solid #eee;
      }
      /* ===== NAV ===== */
      .nav-menu{
      background:#f8f9fb;
      border-bottom:1px solid #ddd;
      }
      .nav-link{
      font-weight:500;
      }
      .nav-link.active{
      border-bottom:2px solid #2e7d7f;
      }
      /* ===== FIXED HEADER ===== */
      .topbar, .main-header, .nav-menu{
      position: sticky;
      z-index: 999;
      }
      .topbar{ top:0; }
      .main-header{ top:36px; }
      .nav-menu{ top:96px; }
      /* ===== HERO ===== */
      .hero-advanced{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:100px 0;
      }
      .hero-title{
      font-size:42px;
      font-weight:700;
      }
      .hero-sub{
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      }
      /* MAP CARD */
      .map-card{
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 40px rgba(0,0,0,0.3);
      transform: perspective(1000px) rotateY(-5deg);
      transition:0.4s;
      }
      .map-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* FLOATING LABEL */
      .floating-card{
      position:absolute;
      bottom:15px;
      left:15px;
      background:#fff;
      padding:10px 15px;
      border-radius:10px;
      font-size:14px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .hero-pro{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      padding:120px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle grid pattern */
      .hero-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 30px 30px;
      }
      /* TEXT */
      .hero-title{
      font-size:44px;
      font-weight:700;
      }
      .hero-sub{
      margin-top:15px;
      font-size:16px;
      opacity:0.9;
      }
      /* TAGS */
      .hero-tags{
      margin-top:20px;
      }
      .hero-tags span{
      display:inline-block;
      background:rgba(255,255,255,0.1);
      padding:8px 14px;
      margin:5px;
      border-radius:20px;
      font-size:14px;
      transition:0.3s;
      }
      .hero-tags span:hover{
      background:rgba(255,255,255,0.2);
      }
      /* RIGHT CARD */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      /* BADGES */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      }
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* BUTTONS */
      .btn-light{
      border-radius:25px;
      }
      .btn-outline-light{
      border-radius:25px;
      }
      /* MOBILE FIX */
      @media(max-width:992px){
      .viewer-card{
      margin-top:30px;
      transform:none;
      }
      }
      /* ===== IMAGE BASE ===== */
      .viewer-card{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.35);
      transform: perspective(1000px) rotateY(-6deg);
      transition:0.4s;
      }
      .viewer-card:hover{
      transform: perspective(1000px) rotateY(0deg) scale(1.03);
      }
      .viewer-card img{
      width:100%;
      display:block;
      }
      /* ===== GRADIENT OVERLAY ===== */
      .overlay-gradient{
      position:absolute;
      inset:0;
      background: linear-gradient(
      135deg,
      rgba(31,78,95,0.7),
      rgba(46,125,127,0.4)
      );
      }
      /* ===== FOCUS GLOW ===== */
      .overlay-focus{
      position:absolute;
      width:220px;
      height:220px;
      background: radial-gradient(circle, rgba(0,255,200,0.35), transparent 70%);
      top:40%;
      left:45%;
      transform:translate(-50%,-50%);
      filter: blur(10px);
      }
      /* ===== GLASS CARD ===== */
      .glass-info{
      position:absolute;
      top:20px;
      right:20px;
      padding:10px 16px;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius:12px;
      color:#fff;
      font-size:14px;
      border:1px solid rgba(255,255,255,0.2);
      }
      /* ===== EDGE FADE (premium effect) ===== */
      .viewer-card::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.4));
      pointer-events:none;
      }
      /* ===== BADGES ===== */
      .viewer-badge{
      position:absolute;
      background:#fff;
      padding:8px 14px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      color: initial;
      } 
      .viewer-badge.top{
      top:15px;
      left:15px;
      }
      .viewer-badge.bottom{
      bottom:15px;
      right:15px;
      }
      /* ===== HEADER BASE ===== */
      .header-pro{
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      transition: 0.3s;
      padding: 15px;
      } 
      /* SHADOW ON SCROLL */
      .header-pro.scrolled{
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      }
      /* ===== BRAND ===== */
      .brand-logo{
      height: 42px;
      }
      .brand-text h5{
      font-weight: 700;
      color: #1f4e5f;
      }
      .brand-text small{
      font-size: 12px;
      color: #6c757d;
      }
      /* ===== NAV ===== */
      .nav-center{
      gap: 25px;
      }
      .nav-item{
      position: relative;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      padding: 6px 0;
      transition: 0.3s;
      }
      .nav-item i{
      margin-right: 6px;
      }
      /* HOVER EFFECT */
      .nav-item:hover{
      color: #2e7d7f;
      }
      /* ACTIVE UNDERLINE */
      .nav-item::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0%;
      height: 2px;
      background: #2e7d7f;
      transition: 0.3s;
      }
      .nav-item:hover::after,
      .nav-item.active::after{
      width: 100%;
      }
      /* ===== LOGIN BUTTON ===== */
      .btn-login{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color: #fff;
      border-radius: 25px;
      padding: 8px 20px;
      border: none;
      transition: 0.3s;
      }
      .btn-login:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      }
      /* ===== MOBILE ===== */
      @media(max-width:992px){
      .nav-center{
      display:none;
      }
      }
      /* ===== TOPBAR ===== */
      .topbar-pro{
      background: linear-gradient(90deg,#1f3c5a,#2e7d7f);
      color:#fff;
      font-size:14px;
      padding:8px 0;
      position:relative;
      overflow:hidden;
      }
      /* subtle glow effect */
      .topbar-pro::after{
      content:"";
      position:absolute;
      width:200%;
      height:100%;
      background: linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent);
      animation: shine 6s linear infinite;
      }
      @keyframes shine{
      0%{ transform: translateX(-100%);}
      100%{ transform: translateX(100%);}
      }
      /* ===== LEFT ITEMS ===== */
      .top-item{
      display:flex;
      align-items:center;
      gap:6px;
      margin-right:15px;
      opacity:0.9;
      transition:0.3s;
      font-size: 12px;
      }
      .top-item:hover{
      opacity:1;
      transform:translateY(-1px);
      }
      /* divider */
      .divider{
      width:1px;
      height:16px;
      background:rgba(255,255,255,0.3);
      margin:0 10px;
      }
      /* ===== CONTROL GROUP ===== */
      .control-group{
      display:flex;
      background:rgba(255,255,255,0.1);
      border-radius:25px;
      padding:2px;
      }
      /* buttons */
      .control-btn{
      background:transparent;
      border:none;
      color:#fff;
      padding:3.5px 10px;
      border-radius:20px;
      font-size:10px;
      transition:0.3s;
      } 
      /* active */
      .control-btn.active,
      .control-btn:hover{
      background:#fff;
      color:#1f4e5f;
      }
      /* ===== MOBILE ===== */
      @media(max-width:768px){
      .topbar-left{
      width:100%;
      justify-content:center;
      margin-bottom:5px;
      }
      .topbar-right{
      width:100%;
      justify-content:center;
      }
      }
      .about-pro{
      padding:30px 0;
      background:#f4f7f9;
      position:relative;
      } 
      /* subtle background */
      .about-pro::before{
      content:"";
      position:absolute;
      width:100%;
      height:100%;
      background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 25px 25px;
      }
      /* TITLE */
      .about-title{
      font-weight:700;
      color:#1f4e5f;
      }
      /* DESC */
      .about-desc{
      color:#555;
      margin-top:10px;
      }
      /* POINTS */
      .point{
      margin-top:10px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:500;
      }
      .point i{
      color:#2e7d7f;
      }
      /* ===== VISUAL ===== */
      .about-visual{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 20px 50px rgba(0,0,0,0.2);
      }
      /* FLOATING CARDS */
      .floating-card{
      position:absolute;
      background:#fff;
      padding:8px 12px;
      border-radius:10px;
      font-size:13px;
      box-shadow:0 5px 15px rgba(0,0,0,0.2);
      display:flex;
      align-items:center;
      gap:6px;
      }
      /* positions */
      .fc1{ top:15px; left:15px; }
      .fc2{ bottom:20px; left:20px; }
      .fc3{ top:50%; right:15px; }
      /* ===== FEATURE CARDS ===== */
      .about-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      text-align:center;
      transition:0.3s;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      }
      .about-card i{
      font-size:28px;
      color:#2e7d7f;
      }
      .about-card:hover{
      transform:translateY(-8px);
      box-shadow:0 15px 35px rgba(0,0,0,0.1);
      }
      .about-visual-pro{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      }
      .main-img{
      width:100%;
      filter: brightness(0.85);
      }
      /* blur */
      .blur-overlay{
      position:absolute;
      inset:0;
      backdrop-filter: blur(0.5px);
      }
      /* glowing parcel */
      .parcel-highlight{
      position:absolute;
      width:120px;
      height:120px;
      border:3px solid #00ffc8;
      border-radius:10px;
      top:40%;
      left:50%;
      transform:translate(-50%,-50%);
      box-shadow:0 0 20px #00ffc8;
      }
      /* labels */
      .label{
      position:absolute;
      background:rgba(255,255,255,0.9);
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
      color: initial; 
      }
      .l1{ top:20px; left:20px; }
      .l2{ bottom:20px; left:20px; }
      .l3{ top:50%; right:20px; }
      /* ===== SECTION ===== */
      .faq-pro{
      padding:30px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .faq-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .faq-header p{
      color:#666;
      }
      /* LIST */
      .faq-list{
      max-width:800px;
      margin:auto;
      }
      /* ITEM */
      .faq-item{
      background:#fff;
      border-radius:15px;
      margin-bottom:15px;
      box-shadow:0 5px 20px rgba(0,0,0,0.05);
      overflow:hidden;
      transition:0.3s;
      }
      /* QUESTION */
      .faq-question{
      padding:18px 20px;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:500;
      }
      .faq-question i{
      transition:0.3s;
      }
      /* ANSWER */
      .faq-answer{
      max-height:0;
      overflow:hidden;
      padding:0 20px;
      color:#555;
      transition:0.4s ease;
      }
      /* ACTIVE */
      .faq-item.active .faq-answer{
      max-height:200px;
      padding:15px 20px 20px;
      }
      .faq-item.active .faq-question i{
      transform:rotate(180deg);
      }
      /* HOVER */
      .faq-item:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      }
      /* ===== SECTION ===== */
      .contact-pro{
      padding:30px 0 20px;
      background:#f4f7f9;
      }
      /* HEADER */
      .contact-pro h2{
      font-weight:700;
      color:#1f4e5f;
      }
      /* ===== CARD ===== */
      .contact-card{
      background:#fff;
      padding:25px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      transition:0.3s;
      }
      .contact-card:hover{
      transform:translateY(-5px);
      box-shadow:0 20px 40px rgba(0,0,0,0.1);
      }
      /* HIGHLIGHT CARD */
      .contact-card.highlight{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      }
      /* ITEMS */
      .contact-item{
      display:flex;
      gap:15px;
      margin-bottom:15px;
      align-items:flex-start;
      }
      .contact-item i{
      font-size:20px;
      color:#2e7d7f;
      }
      .contact-card.highlight i{
      color:#fff;
      }
      .contact-item small{
      color:#888;
      }
      .contact-item p{
      margin:0;
      font-weight:500;
      }
      /* ===== FORM ===== */
      .contact-form{
      background:#fff;
      padding:30px;
      border-radius:15px;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      }
      /* INPUT */
      .form-control{
      border-radius:10px;
      border:1px solid #ddd;
      padding:10px;
      transition:0.3s;
      }
      .form-control:focus{
      border-color:#2e7d7f;
      box-shadow:0 0 0 2px rgba(46,125,127,0.1);
      }
      /* BUTTON */
      .btn-send{
      background: linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      border:none;
      padding:10px 25px;
      border-radius:25px;
      transition:0.3s;
      }
      .btn-send:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 20px rgba(0,0,0,0.2);
      }
      footer{
      margin-bottom:0 !important;
      }
      /* BUTTON */
      #backToTop{
      position:fixed;
      bottom:25px;
      right:25px;
      width:50px;
      height:50px;
      border:none;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      opacity:0;
      visibility:hidden;
      transform:translateY(20px);
      transition:0.4s;
      z-index:999;
      }
      /* SHOW */
      #backToTop.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      }
      /* ICON */
      #backToTop i{
      position:absolute;
      font-size:18px;
      }
      /* SVG FIX */
      .progress-ring{
      position:absolute;
      top:0;
      left:0;
      }
      /* background circle */
      .progress-ring .bg{
      fill:none;
      stroke:rgba(255,255,255,0.2);
      stroke-width:3;
      }
      /* progress circle */
      .progress-ring .progress{
      fill:none;
      stroke:#00ffc8;
      stroke-width:3;
      stroke-linecap:round;
      transform:rotate(-90deg);
      transform-origin:50% 50%;
      transition:stroke-dashoffset 0.2s linear;
      }
      /* SECTION BACKGROUND */
      .section-features{
      padding:100px 0;
      background:linear-gradient(to bottom,#f4f7f9,#ffffff);
      }
      /* HEADER */
      .section-header h2{
      font-weight:700;
      color:#1f4e5f;
      }
      .section-header p{
      color:#666;
      max-width:600px;
      margin:auto;
      }
      /* CARD */
      .feature-card-pro{
      background:rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      padding:30px;
      border-radius:18px;
      text-align:center;
      transition:0.4s;
      border:1px solid rgba(255,255,255,0.4);
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      position:relative;
      overflow:hidden;
      }
      /* subtle gradient glow */
      .feature-card-pro::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent,rgba(0,255,200,0.1),transparent);
      opacity:0;
      transition:0.4s;
      }
      /* ICON WRAP */
      .icon-wrap{
      width:60px;
      height:60px;
      margin:auto;
      border-radius:50%;
      background:linear-gradient(135deg,#1f4e5f,#2e7d7f);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      margin-bottom:15px;
      transition:0.4s;
      }
      /* TEXT */
      .feature-card-pro h5{
      font-weight:600;
      margin-bottom:8px;
      }
      .feature-card-pro p{
      color:#555;
      font-size:14px;
      }
      /* HOVER EFFECT */
      .feature-card-pro:hover{
      transform:translateY(-10px) scale(1.02);
      box-shadow:0 20px 50px rgba(0,0,0,0.15);
      }
      .feature-card-pro:hover::before{
      opacity:1;
      }
      .feature-card-pro:hover .icon-wrap{
      transform:scale(1.1) rotate(5deg);
      }
      /* NAV ITEM */
.nav-item{
  position:relative;
  padding:8px 12px;
  color:#333;
  text-decoration:none;
  transition:0.3s;
}

/* underline base */
.nav-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,#1f4e5f,#2e7d7f);
  transition:0.3s;
}

/* hover */
.nav-item:hover::after{
  width:100%;
}

/* ACTIVE */
.nav-item.active{
  color:#1f4e5f;
  font-weight:600;
}

.nav-item.active::after{
  width:100%;
}

.theme-toggle{
    cursor: pointer;
    font-size: 18px;
    padding: 0px 10px;
    border-radius: 28px;
    transition: 0.3s;
}

.theme-toggle:hover{
  background:rgba(255,255,255,0.1);
}

*{
  transition:background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

    

   

    
     /* =========================
   🎯 DESIGN TOKENS
========================= */
:root{
  --bg-main:#f5f7f9;
  --bg-soft:#eef2f6;
  --bg-card:#ffffff;
  --bg-glass:rgba(255,255,255,0.6);

  --text-primary:#1f2d3d;
  --text-secondary:#6c757d;
  --text-inverse:#ffffff;

  --primary:#1f4e5f;
  --secondary:#2e7d7f;
  --accent:#00bcd4;

  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.12);

  --glass-blur:12px;
}

/* 🌙 DARK */
body[data-theme="dark"]{
  --bg-main:#020617;
  --bg-soft:#0b1220;
  --bg-card:#0f172a;
  --bg-glass:rgba(15,23,42,0.6);

  --text-primary:#f1f5f9;
  --text-secondary:#94a3b8;
  --text-inverse:#020617;

  --primary:#38bdf8;
  --secondary:#22c55e;
  --accent:#06b6d4;

  --border:#1e293b;
  --shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* =========================
   🌍 GLOBAL
========================= */
body{
  font-family:'Segoe UI',sans-serif;
  background:var(--bg-main);
  color:var(--text-primary);
}

/*p,small{
  color:var(--text-secondary);
}*/

*{
  transition:0.3s;
}

/* =========================
   🧱 LAYOUT
========================= */
.page-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* =========================
   🔝 TOPBAR
========================= */
.topbar-pro{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:var(--text-inverse);
}

body[data-theme="dark"] .topbar-pro{
  background:#020617;
}

/* =========================
   🧭 HEADER
========================= */
.header-pro{
  background:var(--bg-glass);
  backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--border);
}

.nav-item{
  color:var(--text-primary);
}

.nav-item.active{
  color:var(--primary);
}

.nav-item::after{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
}

/* =========================
   🎯 HERO
========================= */
.hero-pro{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}

body[data-theme="dark"] .hero-pro{
  background:linear-gradient(135deg,#020617,#0b1220);
}

/* =========================
   📦 CARDS
========================= */
.card,
.feature-card,
.feature-card-pro,
.about-card,
.contact-card,
.contact-form{
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  color:var(--text-primary);
}

/* =========================
   📄 SECTIONS
========================= */
.about-pro,
.contact-pro,
.faq-pro,
.section-features{
  background:var(--bg-soft);
}

/* =========================
   🧾 INPUTS
========================= */
.form-control,
input,
textarea,
select{
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border);
}

.form-control::placeholder{
  color:var(--text-secondary);
}

/* =========================
   🔘 BUTTONS
========================= */
.btn-login,
.btn-send{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:var(--text-inverse);
}

/* =========================
   🧊 GLASS
========================= */
.glass-info{
  background:var(--bg-glass);
  border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur));
}

/* =========================
   ❓ FAQ
========================= */
.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
}

/* =========================
   📞 CONTACT
========================= */
.contact-card.highlight{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:var(--text-inverse);
}

/* =========================
   🦶 FOOTER
========================= */
.footer-pro{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}

body[data-theme="dark"] .footer-pro{
  background:linear-gradient(135deg,#020617,#0b1220);
}


body[data-theme="dark"] #themeToggle i, body[data-theme="dark"] .top-item {
    color: #fff;
}

body[data-theme="dark"] .brand-text h5, body[data-theme="dark"] .about-title,
body[data-theme="dark"] .section-header h2, body[data-theme="dark"] .faq-header h2,
body[data-theme="dark"] .contact-pro h2 {
    color: var(--primary);
}

body[data-theme="dark"] .brand-text small, body[data-theme="dark"] .about-desc,
body[data-theme="dark"] .section-header p, body[data-theme="dark"] .feature-card-pro p,
body[data-theme="dark"] .faq-header p, body[data-theme="dark"] .faq-answer {
    color: #e0e0e0;
}

/* =========================
   ⬆ BACK TO TOP
========================= */
#backToTop{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}

.control-btn{
  transition:0.2s;
}

.control-btn:hover{
  transform:scale(1.1);
}

.control-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

/* Validation overrides */
.is-invalid {
  border-color: #dc3545 !important;
}
.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25) !important;
}
.register-wrapper1{
  margin:12px;
}
#registerModalClose{
  position: absolute;
    z-index: 99999;
}



.welcome-modal{
    border:none;
    border-radius:20px;
    overflow:hidden;
    max-width:500px;
    margin:auto;
}

.welcome-icon{
    width:70px;
    height:70px;
    margin:0 auto 15px;
    background:#eaf7f7;
    color:#23606b;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
}

.welcome-title{
    font-weight:700;
    color:#1f2937;
    margin-bottom:8px;
}

.welcome-subtitle{
    color:#6b7280;
    margin-bottom:25px;
}

.user-option-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    cursor:pointer;
    margin-bottom:15px;
    transition:all .25s ease;
    background:#fff;
}

.user-option-card:hover{
    border-color:#23606b;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(35,96,107,.12);
}

.option-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#eaf7f7;
    color:#23606b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.option-content{
    flex:1;
    text-align:left;
}

.option-content h6{
    margin:0;
    font-weight:600;
    color:#111827;
}

.option-content small{
    color:#6b7280;
}

.user-option-card .bi-chevron-right{
    color:#9ca3af;
    font-size:18px;
}
#userSelectionModalClose{
      position: absolute;
    right: 22px;
    top: 14px;
}
    

    
      /* =====================================
   FORGOT PASSWORD MODAL
===================================== */

.forgot-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
    padding:15px;
}

.forgot-modal .modal-body{
    padding:20px 30px 30px;
}

.otp-header{
    text-align:center;
    margin-bottom:25px;
}

.otp-icon{
    width:56px;
    height:56px;
    margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#0f5b66,#2f8a89);
    display:flex;
    align-items:center;
    justify-content:center;
}

.otp-icon i{
    font-size:28px;
    color:#fff;
}

.otp-header h3{
    font-size:28px;
    font-weight:700;
    color:#163847;
    margin-bottom:10px;
}

.otp-header p{
    font-size:16px;
    color:#6c757d;
    margin:0;
}

/* ======================
   FORM
====================== */

.forgot-modal .form-label{
    font-weight:600;
    color:#21495a;
    margin-bottom:8px;
}

.forgot-modal .form-control{
    /* height:56px; */
    border-radius:14px;
    border:1px solid #d7e1e5;
    font-size:18px;
}

.forgot-modal .input-group-text{
    border-radius:14px 0 0 14px;
    background:#f8fafb;
    border:1px solid #d7e1e5;
}

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

.forgot-modal .verify-btn{
    width:100%;
    height:36px;
    border:none;
    border-radius:14px;
    margin-top:15px;
    background:linear-gradient(
        90deg,
        #0f5b66,
        #2f8a89
    );
    color:#fff;
    font-weight:600;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
}

.forgot-modal .verify-btn:hover{
    color:#fff;
    opacity:.95;
}

.forgot-modal .resend-btn{
    width:100%;
    height:54px;
    margin-top:15px;
    border-radius:14px;
    border:1px solid #cfd8dc;
    background:#fff;
    color:#6c757d;
    font-weight:600;
}

.forgot-modal .resend-btn:not(:disabled){
    color:#0f5b66;
    border-color:#0f5b66;
}

/* ======================
   OTP BOXES
====================== */

.otp-container{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:20px 0;
}

.otp-input{
    width:60px;
    height:60px;
    border:2px solid #dce4e8;
    border-radius:16px;
    text-align:center;
    font-size:24px;
    font-weight:700;
}

.otp-input:focus{
    border-color:#2f8a89;
    outline:none;
    box-shadow:0 0 0 4px rgba(47,138,137,.15);
}

/* ======================
   TIMER
====================== */

.timer-wrapper{
    text-align:center;
    margin:25px 0;
}

.timer-circle{
    width:120px;
    height:120px;
    margin:0 auto 10px;
    border-radius:50%;
    border:6px solid #2f8a89;
    display:flex;
    align-items:center;
    justify-content:center;
}

#otpTimer{
    font-size:18px;
    font-weight:700;
    color:#184858;
}

.timer-wrapper small{
    display:block;
    color:#6c757d;
    font-size:15px;
}

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

#mobileSection{
    margin-top:20px;
}

#otpSection{
    margin-top:15px;
}

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

.otp-close{
    position:absolute;
    right:20px;
    top:20px;
    z-index:10;
}

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

@media(max-width:576px){

    .forgot-modal .modal-body{
        padding:20px;
    }

    .otp-header h3{
        font-size:32px;
    }

    .otp-input{
        width:50px;
        height:50px;
    }

    .timer-circle{
        width:100px;
        height:100px;
    }
}

/* ===================================
   FORGOT PASSWORD ONLY
=================================== */

#fpModalWrapper{
    padding-top:10px;
}

/* Header */

#fpModalWrapper .otp-header{
    text-align:center;
    margin-bottom:20px;
}

#fpModalWrapper .otp-icon{
    width:70px;
    height:70px;
    margin:0 auto 15px;
    border-radius:50%;
    background:linear-gradient(135deg,#0f5b66,#2f8a89);
    display:flex;
    align-items:center;
    justify-content:center;
}

#fpModalWrapper .otp-icon i{
    font-size:26px;
    color:#fff;
}

#fpModalWrapper .otp-header h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:6px;
    color:#173848;
}

#fpModalWrapper .otp-header p{
    font-size:14px;
    color:#6c757d;
    margin:0;
}

/* Labels */

#fpModalWrapper .form-label{
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
}

/* Input */

#fpModalWrapper .form-control{
    height:48px;
    border-radius:12px;
    font-size:16px;
}

#fpModalWrapper .input-group-text{
    height:48px;
}

/* OTP BOXES */

#fpModalWrapper .otp-row{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:15px 0;
}

#fpModalWrapper .otp-row input{
    width:48px;
    height:48px;
    border:2px solid #d8e1e5;
    border-radius:12px;
    text-align:center;
    font-size:20px;
    font-weight:700;
}

#fpModalWrapper .otp-row input:focus{
    border-color:#2f8a89;
    outline:none;
}

/* TIMER */

#fpModalWrapper .otp-timer{
    text-align:center;
    margin:15px 0;
}

#fpModalWrapper .otp-timer-circle{
    width:90px;
    height:90px;
    margin:auto;
    border:4px solid #2f8a89;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

#fpModalWrapper .otp-timer-circle span{
    font-size:18px;
    font-weight:700;
    color:#174858;
}

#fpModalWrapper .otp-timer small{
    display:block;
    margin-top:8px;
    color:#6c757d;
    font-size:13px;
}

/* Buttons */

#fpModalWrapper .fp-btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:12px;
    background:linear-gradient(
        90deg,
        #0f5b66,
        #2f8a89
    );
    color:#fff;
    font-weight:600;
    font-size:15px;
}

#fpModalWrapper .fp-btn:hover{
    color:#fff;
}

#fpModalWrapper .fp-resend{
    width:100%;
    height:46px;
    margin-top:10px;
    border-radius:12px;
    background:#fff;
    border:1px solid #d5dee2;
    color:#6c757d;
    font-weight:600;
}

/* Mobile Number Badge */

#fpModalWrapper .mobile-display{
    background:#f5f8f9;
    border:1px solid #dbe4e8;
    border-radius:12px;
    padding:10px 15px;
    font-weight:600;
    color:#184858;
    margin-bottom:15px;
}

/* Modal */

#forgotPasswordModal .modal-dialog{
    max-width:480px;
}

#forgotPasswordModal .modal-content{
    border:none;
    border-radius:20px;
}

#forgotPasswordModal .modal-body{
    padding:20px 25px;
}

/* Mobile */

@media(max-width:576px){

    #fpModalWrapper .otp-header h3{
        font-size:28px;
    }

    #fpModalWrapper .otp-row input{
        width:44px;
        height:44px;
    }

    #fpModalWrapper .otp-timer-circle{
        width:80px;
        height:80px;
    }
}

/* Mobile Number Input Group */

#forgotPasswordModal .input-group{
    display:flex;
    align-items:stretch;
}

#forgotPasswordModal .input-group-text{
    width:52px;
    min-width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px 0 0 12px;
    padding:0;
    font-size:18px;
    background:#f8fafb;
}

#forgotPasswordModal .form-control{
    /* height:52px; */
    border-radius:0 12px 12px 0;
    font-size:16px;
    padding-left:14px;
}

#forgotPasswordModal .input-group > .form-control,
#forgotPasswordModal .input-group > .input-group-text{
    border-color:#d8e1e5;
}


.fp-mobile-field{
    display:flex;
    align-items:center;
    height:44px;
    border:1px solid #d8e1e5;
    border-radius:12px;
    overflow:hidden;
}

.fp-mobile-field i{
    width:52px;
    text-align:center;
    font-size:18px;
    border-right:1px solid #d8e1e5;
    background:#f8fafb;
}

.fp-mobile-field input{
    border:none !important;
    box-shadow:none !important;
    height:100%;
}


.password-field{
    position:relative;
}

.password-field .toggle-password{
    width:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#6c757d;
    border-left:1px solid #d8e1e5;
    transition:.2s;
}

.password-field .toggle-password:hover{
    color:#0f5b66;
}

.password-field input{
    flex:1;
}

.fp-password-field{
    position:relative;
}

.fp-password-field .fp-pass-toggle{
    width:48px;
    min-width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-left:1px solid #d8e1e5;
    color:#6c757d;
    transition:all .25s ease;
}

.fp-password-field .fp-pass-toggle:hover{
    color:#0f5b66;
    background:#f8fafb;
}

.fp-password-field .fp-pass-toggle i{
    font-size:16px;
}

.fp-password-field input{
    flex:1;
}