* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Now Display', serif;
  }

  body {
      font-family: Arial, sans-serif;
      background-color: #f5e6b8;
      min-height: 100vh;
  }

  .diagram-mobile {
      width: 100%;
      margin-top: -100px
  }

  .herk {
      padding: 0;
      margin: 0;
      margin-top: 72px;
  }

  .herks {
      padding: 0;
      margin: 0;
      /* margin-top: 80px; */
  }

  .banner-image {
      width: 100%;
      height: auto;
      display: block;
  }

  /* navbar section start  */
  .navbar {
      background-color: white;
      padding: 15px 0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      transition: all 0.3s ease;
  }

  .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      position: relative;
  }

  .logo {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 24px;
      z-index: 1001;
  }

  .logo-circle {
      width: 40px;
      height: 40px;
      border: 3px solid #333;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      position: relative;
      background: white;
  }

  .logo-text {
      font-weight: bold;
      color: #333;
  }

  .logo-text .the {
      font-size: 12px;
      font-weight: normal;
      display: block;
      line-height: 1;
      margin-bottom: 2px;
  }

  .logo-text .core {
      font-size: 24px;
      font-weight: bold;
      line-height: 1;
  }

  .tagline {
      font-size: 10px;
      color: #666;
      font-weight: normal;
      margin-top: 2px;
      letter-spacing: 1px;
  }

  .logo-circle::before {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .nav-menu {
      display: flex;
      list-style: none;
      gap: 40px;
      align-items: center;
  }

  .nav-item {
      position: relative;
  }

  .nav-link {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: color 0.3s ease;
      padding: 10px 0;
  }

  .nav-link:hover {
      color: #666;
  }

  .schedule-btn {
      background-color: #2c3e50;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }

  .schedule-btn:hover {
      background-color: #34495e;
  }

  /* Mobile Menu Toggle */
  .mobile-menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      padding: 5px;
      z-index: 1001;
  }

  .mobile-menu-toggle span {
      width: 25px;
      height: 3px;
      background-color: #333;
      margin: 3px 0;
      transition: 0.3s;
      border-radius: 2px;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
      opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
  }

  /* Content for testing scroll */
  .content {
      padding: 40px 20px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .section {
      background: white;
      margin: 20px 0;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Mobile Responsive Styles */
  @media (max-width: 768px) {
      .nav-container {
          padding: 0 15px;
      }

      .mobile-menu-toggle {
          display: flex;
      }

      .nav-menu {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background-color: white;
          flex-direction: column;
          gap: 0;
          padding: 20px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, opacity 0.3s ease;
          opacity: 0;
          z-index: 999;
      }

      .nav-menu.active {
          max-height: 500px;
          opacity: 1;
      }

      .nav-item {
          width: 100%;
          text-align: center;
          border-bottom: 1px solid #eee;
          padding: 15px 0;
      }

      .nav-item:last-child {
          border-bottom: none;
      }

      .nav-link {
          font-size: 16px;
          padding: 15px 0;
          display: block;
          width: 100%;
      }

      .schedule-btn {
          margin-top: 10px;
          width: 100%;
          padding: 15px 24px;
      }

      .logo-text .core {
          font-size: 20px;
      }

      .tagline {
          font-size: 9px;
      }
  }

  @media (max-width: 480px) {
      .main-title {
          margin-bottom: 0px !important;
      }

      .content-left {
          padding-right: 1px !important;
          margin-bottom: 116px;
      }

      .diagram-mobile {
          width: 100%;
          margin-top: 0px !important;
      }

      .main-section {
          margin-bottom: 238px !important;
      }

      /* footer */

      .logo-footer {
          width: 216px !important;
      }

      .features-section {
          height: 1008px !important;
      }

      .hexagon-display {
          min-height: 200px !important;
      }

      /* footer close  */
      .nav-container {
          padding: 0 10px;
      }

      .logo-circle {
          width: 35px;
          height: 35px;
          margin-right: 8px;
      }

      .logo-text .core {
          font-size: 18px;
      }

      .logo-text .the {
          font-size: 10px;
      }

      .tagline {
          font-size: 8px;
      }

      .content {
          padding: 20px 10px;
      }

      .section {
          padding: 20px;
      }

      .brand-panel {
          padding: 0px;
          border-radius: 0px;
      }

      .map {
          padding: 0px !important;
          width: 390px !important;
          height: 294px !important;
      }

      .map-image {
          width: 100%;
      }

      .image-hex {
          width: 360px !important;
          /* margin-top: 254px; */
          /* margin-top: -58px; */
          margin-right: 100px;
          position: relative;
          left: 100px;
          margin-top: 244px !important;
      }

      .brand-image {
          display: none;
      }

      .brand-panel {
          border-radius: 0px !important;
          padding: 0px !important;
      }

      #features-section {
          display: none;
      }

      .banner-image {
          display: none;
      }

      .banner-images {
           width: 100% ; 
          /* width: auto; */
          /* height: 500px; */
          /* height: 1344px; */
          display: block;
          /* margin-bottom: 244px; */
      }

      .banner-images-mob {
          display: block;
          width: 390px;
      }

      .banner-image-amenties {
          width: 100%;
          height: auto;
          display: block;
      }

      .enquiry-form {
          padding-left: 0px !important;
          padding-right: 0px !important;
      }

      .form-input {
          width: 100% !important;
      }

      .address {
          margin-bottom: 0px !important;
      }

      .bottom-bar {
          font-size: 9px !important;
      }

  }

  @media screen and (min-width: 1024px) {
      .banner-images {
          display: none;
      }

      .banner-images-mob {
          display: none;
      }
  }

  /* Tablet Styles */
  @media (max-width: 1024px) and (min-width: 769px) {
      .nav-menu {
          gap: 25px;
      }

      .nav-link {
          font-size: 13px;
      }

      .schedule-btn {
          padding: 10px 20px;
          font-size: 13px;
      }
  }

  .map-image {
      width: 100%;
  }

  /* navnar section end   */

  /* Main Content Section */
  .main-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 80px 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* gap: 80px; */
      align-items: center;
      height: 640px;
  }

  .content-left {
      padding-right: 40px;
  }

  .main-title {
      font-size: 48px;
      font-weight: 700;
      color: #c8860d;
      margin-bottom: 40px;
      line-height: 56px;
  }

  .content-text {
      font-size: 18px;
      line-height: 26px;
      color: #333;
      font-weight: 400;
      margin-bottom: 30px;
      vertical-align: middle;

  }

  .content-text strong {
      font-weight: bold;
  }

  /* Brand Showcase Panel */
  .brand-panel {
      /* background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%); */
      border-radius: 20px;
      padding: 40px;
      position: relative;
      overflow: hidden;
  }

  .brand-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
          radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
          linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.03) 50%, transparent 51%);
      background-size: 30px 30px, 60px 60px;
  }

  .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      position: relative;
      z-index: 2;
  }

  .panel-logo {
      display: flex;
      align-items: center;
      color: white;
  }

  .panel-logo-circle {
      width: 35px;
      height: 35px;
      border: 2px solid white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      position: relative;
      background: white;
  }

  .panel-logo-circle::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
      border-radius: 50%;
  }

  .panel-logo-text .the {
      font-size: 10px;
      display: block;
      line-height: 1;
  }

  .panel-logo-text .core {
      font-size: 20px;
      font-weight: bold;
      line-height: 1;
  }

  .panel-tagline {
      font-size: 8px;
      margin-top: 2px;
      letter-spacing: 1px;
  }

  .opening-badge {
      background: linear-gradient(45deg, #d4af37, #ffd700);
      color: #333;
      padding: 12px 24px;
      border-radius: 25px;
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 1px;
      position: relative;
  }

  .opening-badge::before,
  .opening-badge::after {
      content: '✦';
      position: absolute;
      color: #d4af37;
      font-size: 12px;
  }

  .opening-badge::before {
      left: -15px;
      top: 50%;
      transform: translateY(-50%);
  }

  .opening-badge::after {
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
  }

  .brands-container {
      border: 2px dashed rgba(255, 255, 255, 0.3);
      border-radius: 15px;
      padding: 30px;
      position: relative;
      z-index: 2;
  }

  .brands-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
  }

  .brand-item {
      background: white;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
  }

  /* Brand specific colors */
  .yousta {
      background: #1e40af;
      color: white;
  }

  .blackberry {
      background: #000;
      color: white;
  }

  .cantabil {
      background: #4a5568;
      color: white;
  }

  .croma {
      background: #00bcd4;
      color: white;
  }

  .subway {
      background: #ffeb3b;
      color: #333;
  }

  .spencers {
      background: #ff6b35;
      color: white;
  }

  .regus {
      background: white;
      color: #333;
      border: 1px solid #ddd;
  }

  .dominos {
      background: #e31837;
      color: white;
  }

  .reliance {
      background: #0066cc;
      color: white;
  }

  .saibaba {
      background: #ff9800;
      color: white;
  }

  .levis {
      background: #c41e3a;
      color: white;
  }

  .puma {
      background: #000;
      color: white;
  }

  .wow-momo {
      background: #ffeb3b;
      color: #333;
  }

  .cafe-coffee-day {
      background: #8B4513;
      color: white;
      border-radius: 50%;
  }

  .burger-king {
      background: #ff6b35;
      color: white;
      border-radius: 50%;
  }

  .kfc {
      background: #e31837;
      color: white;
  }

  .mufti {
      background: #2c3e50;
      color: white;
  }

  .pvr {
      background: #ff6b35;
      color: white;
  }

  .barista {
      background: #8B4513;
      color: white;
      border-radius: 50%;
  }

  @media (max-width: 768px) {
      .main-section {
          grid-template-columns: 1fr;
          gap: 40px;
          padding: 40px 20px;
          /*margin-bottom:200px;*/
      }

      .main-title {
          font-size: 36px;
      }

      .brands-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  /* .map-section{
    height: 620px;
} */
  .map {
      height: 500px;
      width: 660px;
  }

  .features-section {
      background: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(255, 255, 255, 0.8)),
          url('Main\ Frame.svg');
      /* background-image: url('Main\ Frame.svg'); */
      background-size: cover, 50px 50px;
      padding: 80px 0;
      height: 660px;
      position: relative;
      overflow: hidden;
  }

  #features-section {
      background: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(255, 255, 255, 0.8));
      /* background-image: url('Main\ Frame.svg'); */
      background-size: cover, 50px 50px;
      /* padding: 80px 0; */
      position: relative;
      overflow: hidden;
  }

  .features-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 30% 40%, rgba(184, 134, 11, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
      pointer-events: none;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
  }

  /* Left Side - Circular Diagram */
  .diagram-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }

  .core-circle {
      width: 200px;
      height: 200px;
      background: white;
      border: 4px solid #333;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .core-text {
      text-align: center;
      font-weight: bold;
      color: #333;
      font-size: 28px;
      line-height: 1.2;
  }

  .feature-segment {
      position: absolute;
      background: #b8860b;
      color: white;
      font-weight: bold;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 0 15px 15px 0;
      padding: 20px 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      transform-origin: left center;
  }

  .segment-1 {
      top: -10px;
      left: 200px;
      width: 140px;
      height: 80px;
      transform: rotate(-15deg);
  }

  .segment-2 {
      top: 60px;
      left: 220px;
      width: 140px;
      height: 80px;
      transform: rotate(15deg);
  }

  .segment-3 {
      bottom: 60px;
      left: 220px;
      width: 140px;
      height: 80px;
      transform: rotate(-15deg);
  }

  .segment-4 {
      bottom: -10px;
      left: 200px;
      width: 140px;
      height: 80px;
      transform: rotate(15deg);
  }

  /* Feature Callouts */
  .feature-callout {
      position: absolute;
      background: #b8860b;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      white-space: nowrap;
  }

  .feature-callout::before {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: #b8860b;
      transform: rotate(45deg);
  }

  .callout-1 {
      top: 40px;
      right: 40px;
  }

  .callout-1::before {
      bottom: -4px;
      left: 20px;
  }

  .callout-2 {
      top: 150px;
      right: -20px;
  }

  .callout-2::before {
      top: 15px;
      left: -4px;
  }

  .callout-3 {
      bottom: 150px;
      right: -20px;
  }

  .callout-3::before {
      top: 15px;
      left: -4px;
  }

  .callout-4 {
      bottom: 40px;
      right: 40px;
  }

  .callout-4::before {
      top: -4px;
      left: 20px;
  }

  /* Dotted Lines */
  .dotted-line {
      position: absolute;
      border: 2px dotted #999;
      z-index: 1;
  }

  .line-1 {
      top: 80px;
      right: 180px;
      width: 80px;
      transform: rotate(-15deg);
  }

  .line-2 {
      top: 190px;
      right: 160px;
      width: 80px;
      transform: rotate(15deg);
  }

  .line-3 {
      bottom: 190px;
      right: 160px;
      width: 80px;
      transform: rotate(-15deg);
  }

  .line-4 {
      bottom: 80px;
      right: 180px;
      width: 80px;
      transform: rotate(15deg);
  }

  /* Right Side - Locations List */
  .locations-list {
      padding-left: 40px;
  }

  .location-item {
      margin-bottom: 14px;
      border-bottom: 2px dotted #ddd;
      padding-bottom: 25px;
  }

  .location-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
  }

  .location-number {
      font-size: 48px;
      font-weight: bold;
      color: #b8860b;
      display: inline-block;
      margin-right: 15px;
      vertical-align: top;
      line-height: 1;
  }

  .location-title {
      font-size: 24px;
      font-weight: bold;
      color: #b8860b;
      margin-bottom: 15px;
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;
  }

  .location-description {
      font-size: 16px;
      color: #666;
      line-height: 1.6;
      margin-left: 63px;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .container {
          grid-template-columns: 1fr;
          gap: 60px;
          padding: 0 20px;
      }

      .features-section {
          padding: 60px 0;
      }

      .core-circle {
          width: 160px;
          height: 160px;
      }

      .core-text {
          font-size: 22px;
      }

      .\gment {
          font-size: 14px;
          padding: 15px 20px;
          width: 120px;
          height: 60px;
      }

      .segment-1,
      .segment-4 {
          left: 160px;
      }

      .segment-2,
      .segment-3 {
          left: 180px;
      }

      .locations-list {
          padding-left: 0;
      }

      .location-number {
          font-size: 36px;
      }

      .location-title {
          font-size: 20px;
      }

      .location-description {
          margin-left: 51px;
      }
  }


  .enquiry-container {
      background: linear-gradient(135deg, #d4af37, #b8941f);
      padding: 20px;
      border-radius: 0;
      width: 100%;
      /* max-width: 1200px; */
      margin: 0 auto;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .enquiry-form {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      padding-left: 145px;
      padding-right: 145px;
  }

  .form-title {
      color: white;
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0.5px;
      white-space: nowrap;
      margin-right: 10px;
  }

  .form-group {
      flex: 1;
      min-width: 200px;
  }

  .form-input {
      width: 80%;
      padding: 15px 20px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      color: #333;
      background: white;
      outline: none;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .form-input::placeholder {
      color: #999;
      font-size: 16px;
  }

  .form-input:focus {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .submit-btn {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 2px solid white;
      padding: 15px 30px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      min-width: 150px;
  }

  .submit-btn:hover {
      background: white;
      color: #d4af37;
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  }

  .submit-btn:active {
      transform: translateY(0);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .enquiry-form {
          flex-direction: column;
          align-items: stretch;
          gap: 15px;
      }

      .form-title {
          text-align: center;
          margin-right: 0;
          margin-bottom: 10px;
          font-size: 24px;
      }

      .form-group {
          min-width: 100%;
      }

      .submit-btn {
          width: 100%;
          padding: 18px;
      }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
      .form-title {
          font-size: 24px;
      }

      .form-input {
          padding: 12px 16px;
          font-size: 15px;
      }

      .submit-btn {
          padding: 12px 25px;
          font-size: 15px;
      }
  }

  .property-showcase-container {
      display: flex;
      background: #072259;
      /* min-height: 100vh;/ */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .map-display-section {
      flex: 1;
      position: relative;
  }

  .interactive-map-wrapper {
      width: 100%;
      height: 100vh;
      position: relative;
      background: #072259;
      border-radius: 0 20px 20px 0;
      overflow: hidden;
  }

  .map-placeholder {
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><rect width="800" height="600" fill="%23e8f4f8"/><g stroke="%23b8d4da" stroke-width="1" fill="none"><path d="M0 0l800 600M800 0L0 600"/></g><text x="400" y="300" text-anchor="middle" fill="%236b7280" font-family="Arial" font-size="24">Interactive Map Area</text></svg>') center/cover;
      position: relative;
  }

  .property-info-card {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      max-width: 320px;
      z-index: 10;
  }

  .rating-display {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
  }

  .star-rating {
      background: #ff6b35;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      font-size: 14px;
  }

  .review-count {
      color: #666;
      font-size: 14px;
  }

  .property-address {
      font-size: 16px;
      color: #333;
      line-height: 1.4;
      margin-bottom: 15px;
  }

  .map-actions {
      display: flex;
      gap: 10px;
  }

  .view-larger-btn,
  .map-toggle-btn {
      padding: 8px 16px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      transition: all 0.3s ease;
  }

  .view-larger-btn:hover,
  .map-toggle-btn:hover {
      background: #f5f5f5;
      border-color: #ccc;
  }

  .location-marker {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: #dc2626;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg) translate(-50%, -50%);
      transform-origin: center;
  }

  .location-marker::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 16px;
      height: 16px;
      background: white;
      border-radius: 50%;
  }

  .advantages-panel {
      flex: 1;
      padding: 60px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .section-header {
      color: white;
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 40px;
      position: relative;
      font-family: 'Helvetica Now Display';
  }

  .section-header::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 105px;
      height: 2px;
      background: #fff;
  }

  .benefit-item {
      list-style: none;
  }

  .benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      /* margin-bottom: 25px; */
      color: white;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      /* padding: 15px 0; */
      /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
      transition: all 0.3s ease;
      font-family: 'Helvetica Now Display';
  }

  .benefit-item:hover {
      background: rgba(255, 255, 255, 0.05);
      padding-left: 15px;
      border-radius: 8px;
  }

  .benefit-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      /* background: rgba(255, 255, 255, 0.2); */
      border-radius: 50%;
      font-weight: bold;
      font-size: 16px;
      flex-shrink: 0;
      backdrop-filter: blur(10px);
  }

  .benefit-text {
      flex: 1;
  }

  .cta-button {
      background: #C69D3E;
      color: #fff;
      border: none;
      padding: 18px 40px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      font-family: 'Helvetica Now Display';
      cursor: pointer;
      margin-top: 40px;
      align-self: flex-start;
      transition: all 0.3s ease;
      /* box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3); */
  }

  .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(251, 191, 36, 0.4);
  }

 

  /* Responsive Design */
  @media (max-width: 1024px) {
      .property-showcase-container {
          flex-direction: column;
      }

      .map-display-section {
          height: 50vh;
      }

      .interactive-map-wrapper {
          border-radius: 0;
      }

      .advantages-panel {
          padding: 40px 30px;
      }

      .section-header {
          font-size: 32px;
      }

      .benefit-item {
          font-size: 16px;
      }
  }

  @media (max-width: 768px) {
      .property-info-card {
          max-width: 280px;
          padding: 15px;
      }

      .advantages-panel {
          padding: 30px 20px;
      }

      .section-header {
          font-size: 28px;
      }

      .benefit-item {
          font-size: 15px;
          gap: 15px;
      }

      .benefit-number {
          width: 30px;
          height: 30px;
          font-size: 14px;
      }
  }

  .map {
      padding: 30px;
  }


  .brand-showcase-wrapper {
      background: #C69D3E;
      padding: 80px 60px;
      /* min-height: 100vh;    */
      display: flex;
      align-items: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .onboarding-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      gap: 80px;
  }

  .content-section {
      flex: 1;
      max-width: 500px;
  }

  .main-heading {
      color: white;
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 30px;
      position: relative;
      font-family: 'Helvetica Now Display';
  }

  .main-heading::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 80px;
      height: 4px;
      background: white;
  }

  .subtitle-text {
      color: white;
      font-family: 'Helvetica Now Display';
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 30px;
      opacity: 0.9;
  }

  .description-text {
      color: white;
      font-family: 'Helvetica Now Display';
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 40px;
      opacity: 0.85;
  }

  .action-button {
      background: #072259;
      color: white;
      border: none;
      padding: 18px 35px;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      font-family: 'Helvetica Now Display';
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(30, 58, 138, 0.3);
  }

  .action-button:hover {
      background: #1e40af;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
  }

  .hexagon-display {
      flex: 1;
      position: relative;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .hex-pattern {
      position: relative;
      width: 500px;
      height: 430px;
  }

  .brand-hexagon {
      position: absolute;
      width: 140px;
      /* height: 140px; */
      /* background: #f4a261; */
      /* clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .brand-hexagon:hover {
      transform: scale(1.05);
      /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); */
  }

  .brand-hexagon.navy-hex {
      background: #1e3a8a;
  }

  /* .brand-hexagon.orange-hex {
            background: #f97316;
        } */

  .brand-content {
      text-align: center;
      color: white;
      font-weight: 600;
  }

  .brand-logo {
      width: 50px;
      height: 50px;
      background: white;
      border-radius: 50%;
      margin: 0 auto 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #1e3a8a;
      font-size: 12px;
  }

  .floor-label {
      font-size: 14px;
      font-weight: 600;
  }

  /* Hexagon Positioning */
  .hex-spencers {
      top: 0;
      right: 200px;
  }

  .hex-croma {
      top: 50px;
      right: 20px;
  }

  .hex-miraj {
      top: 100px;
      left: 50px;
  }

  .hex-core {
      top: 150px;
      left: 220px;
      width: 160px;
      height: 160px;
      background: white;
      z-index: 10;
  }

  .hex-core .brand-content {
      color: #1e3a8a;
  }

  .hex-core .brand-logo {
      background: #f97316;
      color: white;
      width: 60px;
      height: 60px;
  }

  .hex-reliance {
      top: 220px;
      right: 40px;
  }

  .hex-second-floor {
      top: 270px;
      left: 30px;
  }

  .hex-regus {
      bottom: 50px;
      left: 200px;
  }

  /* Brand specific styling */
  .spencers-logo {
      background: #ff6b35 !important;
      font-size: 10px;
  }

  .miraj-logo {
      background: #dc2626 !important;
      font-size: 10px;
  }

  .reliance-logo {
      background: #0066cc !important;
      font-size: 9px;
  }

  .regus-logo {
      background: #4f46e5 !important;
  }

  .second-floor-icon {
      background: white !important;
      color: #1e3a8a !important;
      font-size: 20px;
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
      .onboarding-container {
          gap: 60px;
      }

      .hex-pattern {
          width: 500px;
          height: 400px;
      }

      .brand-hexagon {
          width: 120px;
          height: 120px;
      }
  }

  @media (max-width: 968px) {
      .brand-showcase-wrapper {
          padding: 60px 40px;
      }

      .onboarding-container {
          flex-direction: column;
          gap: 50px;
      }

      .main-heading {
          font-size: 40px;
      }

      .subtitle-text {
          font-size: 18px;
      }
  }

  @media (max-width: 768px) {
      .brand-showcase-wrapper {
          padding: 40px 20px;
      }

      .main-heading {
          font-size: 32px;
      }

      .hex-pattern {
          width: 390px;
          height: 350px;
      }

      .brand-hexagon {
          width: 100px;
          height: 100px;
      }

      .brand-logo {
          width: 40px;
          height: 40px;
      }

      .floor-label {
          font-size: 12px;
      }
  }

  /* Animation */
  @keyframes float {

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

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

  .brand-hexagon {
      animation: float 3s ease-in-out infinite;
  }

  .brand-hexagon:nth-child(even) {
      animation-delay: 1.5s;
  }

  .brand-hexagon:nth-child(3n) {
      animation-delay: 0.8s;
  }





  /* footer  */
  .footer {
      background-color: #1a1a1a;
      color: white;
      padding: 40px 20px 20px;
      text-align: center;
      /* max-width: 1200px; */
      margin: 0 auto;
  }

  .authorized-text {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 2px;
      margin-bottom: 20px;
      color: #cccccc;
      font-family: 'Helvetica Now Display';
  }

  .logo-section {
      margin-bottom: 30px;
  }

  .logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
  }

  .logo-circle {
      width: 60px;
      height: 60px;
      border: 2px solid #d4af37;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      background: linear-gradient(135deg, #d4af37, #f4e16d);
  }

  .logo-text {
      font-size: 20px;
      font-weight: bold;
      color: #d4af37;
  }

  .company-name {
      font-size: 36px;
      font-weight: bold;
      color: #d4af37;
      margin-bottom: 5px;
      letter-spacing: 1px;
  }

  .tagline {
      font-size: 14px;
      color: #d4af37;
      font-weight: 500;
      letter-spacing: 1px;
      margin-bottom: 20px;
  }

  .mall-info {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
      color: #ffffff;
  }

  .address {
      font-size: 14px;
      color: #cccccc;
      margin-bottom: 30px;
  }

  .description {
      font-size: 12px;
      line-height: 1.6;
      font-weight: 500;
      font-style: normal;
      line-height: 25px;
      letter-spacing: 0.266px;
      color: #cccccc;
      max-width: 900px;
      margin: 0 auto 40px;
      text-align: justify;
      font-family: 'Helvetica Now Display';
  }

  .phone-section {
      margin-bottom: 30px;
  }

  .phone-number {
      font-size: 42px;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 0.697px;
      font-weight: 700;
      font-family: 'Helvetica Now Display';
      margin-bottom: 10px;
  }

  .call-text {
      font-size: 18px;
      color: #ffffff;
      display: inline;
      margin-right: 10px;
  }

  .copyright {
      font-size: 12px;
      color: #999999;
      border-top: 1px solid #333333;
      padding-top: 20px;
      margin-top: 20px;
  }

  .copyright a {
      color: #d4af37;
      text-decoration: none;
  }

  .copyright a:hover {
      text-decoration: underline;
  }

  @media (max-width: 768px) {
      .company-name {
          font-size: 28px;
      }

      .phone-number {
          font-size: 32px;
          font-family: 'Helvetica Now Display';
      }

      .description {
          text-align: left;
          padding: 0 10px;
      }
  }
  
  
  
  
  
  
  
  
  
  

/* modal  =======================================================*/

   button.trigger-btn {
      padding: 12px 24px;
      background: #2c3e50;
      color: white;
      border: none;
      border-radius: 4px;
      margin: 10px;
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
    }

    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-overlay.show {
      display: flex;
    }

    .modal-container {
      display: flex;
      max-width: 900px;
      width: 90%;
      height: 550px;
      background: white;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #D6A157;
      color: #333;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 18px;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .close-btn:hover {
      background: white;
      transform: rotate(90deg);
    }

    .property-section {
      flex: 1;
      background: url('MicrosoftTeams-image\ \(1\)\ 3.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .form-section {
      flex: 1;
      background-image: url('Background.jpg');
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .form-title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 30px;
      text-transform: uppercase;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-input {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: #fff;
      font-size: 0.95rem;
      color: #333;
    }

    .message-input {
      min-height: 80px;
      resize: vertical;
    }

    #submitBtn{
        width: 100%;
     border: 1px solid #D6A157 !important;
      color: #D6A157;
    }
    .submit-btn {
      padding: 12px;
      background: transparent; 
      border-radius: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 16px;
    }

    #submitBtn:hover {
      background: #D6A157;
      color: white;
    }

    .consent-section {
      display: flex;
      gap: 8px;
      font-size: 0.8rem;
      color: #666;
    }

    .consent-checkbox {
      width: 16px;
      height: 16px;
      margin-top: 2px;
    }

    @media (max-width: 768px) {
      .modal-container {
        flex-direction: column;
        height: auto;
      }
    }

    #title-section{
        color: #000 !important;
    }