:root {
  --bg: #0b0c0c;
  --muted: #9aa0a6;
  --card: #0f1115;
  --ink: #e8eaed;
  --line: #2a2f36;
  --primary: #01eb5a;
  --accent: #F7931E;
  --danger: #ef4444;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* header css*/
.top {
  width: 100%;
  display: flex;
  gap: 90px;
  justify-content: space-around;
  padding: 20px;
  background-color: #001233;
  color: white;
}


.read-more {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: 15px;

}

.read-more p {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;

}

.call {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 30px;
  width: 34%;
}

.read-more i {
  color: #fc8b02;
}

.call i {
  color: #fc8b02;
}

.call p {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-weight: 700;
}

.more {
  background-color: transparent;
  border: 1px solid #fc8b03;
  color: #fc8b03;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  min-height: 90px;
  padding: 10px 70px;
  flex-wrap: wrap;
  background: #6e63635d;
  position: absolute;


}

/* Hamburger Menu Button */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  position: absolute;
  right: 325px;
  top: 56%;
  transform: translateY(-50%);
  z-index: 1001;
}

.hamburger span {
  width: 20px;
  height: 3px;
  background-color: #F7931E;
  margin: 5px 0;
  transition: 0.3s;
  display: block;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(45deg) translate(-8px, -8px);
}

header h1 {
  font-size: 20px
}

.image {
  width: 16%;
  /* text-align: start; */
  border-right: 1px solid #c4c4c4;
}

.image img {
  width: 100%
}

/* Navbar Dropdown Styles */
.navbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  width: 64% !important;
}
@media (max-width: 1200px){
  header{
    padding: 20px 10px !important;
  }
}
@media (max-width: 1024px) {
  header {
    padding: 15px 20px !important;
  }

  .image {
    height: 100%;
    border: none;
  }

  .image img {
    width: 150px !important;
  }

  .navbar {
    gap: 15px;
  }

  .nav-menu {
    gap: 9px;
  }
}

@media (max-width: 1024px) {
  .top {
    display: none;
  }

  header {
    padding: 10px;
    align-items: center;
    gap: 0;
    position: relative;
    display: flex;
    justify-content: space-evenly;

  }

  .image {
    width: 50%;
    margin-left: -90px;

  }

  .image img {
    width: 70%;
  }

  .hamburger {
    display: flex;
  }

  .navbar {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 2px solid #F7931E;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1000;

  }

  .navbar.active {
    max-height: 500px;
    overflow-y: auto;
  }

  .nav-menu {
    width: 100%;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .nav-item {
    flex: 1 1 100%;
    width: 100%;
  }

  .nav-item.dropdown .nav-link {
    font-size: 14px;
    padding: 12px 20px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #2a2f36;
  }

  .dropdown-menu {
    position: static;
    background: #0a0a0a;
    border: none;
    border-radius: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .dropdown-menu.active {
    max-height: 500px;
    overflow-y: auto;
    background-color: rgb(242, 243, 252);
    width: 100%;
  }

  .dropdown-item {
    color: #ffffff;
    text-decoration: none;
    padding: 0;
    display: block;
    transition: all 0.2s ease;
    font-size: 14px;
  }

  .nav-link {
    padding: 0 !important;
  }

  .dropdown-item:last-child {
    border-bottom: none;

  }

  .dropdown-item:hover {
    background: #F7931E;
    color: #0b0c0c;
    font-weight: 600;
  }
}

@media (max-width: 780px) {
  header {
    padding: 10px 10px;
    gap: 0;
  }

  .image {
    width: 25%;
  }

  .hamburger {
    right: 10px;
    bottom: -26px;
  }

  .hamburger span {
    width: 20px;
    height: 2.5px;
  }

  .navbar {
    max-height: 0;

  }

  #navbar {
    width: 100% !important;
  }

  .navbar.active {
    max-height: 400px;
    width: 100%;
    padding: 20px;
  }

  .nav-menu {
    width: 100%;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
  }

  .nav-item {
    flex: 1 1 100%;
    width: 100%;
  }

  .nav-item.dropdown .nav-link {
    font-size: 13px;
    padding: 12px 15px;
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    max-height: 0;
    overflow: hidden;
  }

  .dropdown-menu.active {
    max-height: 400px;
    overflow-y: auto;
  }

  .dropdown-item {
    padding: 10px 35px;
    font-size: 13px;
  }

  .btn-enquire {
    display: block !important;
  }
}

@media (max-width: 420px) {
  header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .hamburger {
    right: 5px;
    bottom: -26px;
  }

  .image {
    width: 70%;
  }

}

@media (max-width: 375px) {
  header {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .image {
    width: 0%;
  }
}

/* Navbar Dropdown Styles */
.navbar {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 0;
  width: 70% !important;
}

.nav-menu {
  display: flex;
  gap: 9px;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-item.dropdown .nav-link {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fd8b03;
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;

}

.nav-item.dropdown .nav-link::after {
  content: '▼';
  font-size: 10px;
  transition: transform 0.3s ease;
}

.nav-item.dropdown .nav-link[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 280px;
  display: none;
  flex-direction: column;
  margin-top: 1px;
  z-index: 1000;
}

.flip-controls {
  margin-top: 6px;
  display: flex;
  justify-content: end;
}

.dropdown-menu.active {
  display: flex;

}

.dropdown-item {
  color: #fd8b03;
  text-decoration: none;
  padding: 5px 16px;
  display: block;
  transition: all 0.2s ease;
  font-weight: 900;
  font-size: 16px;
}

.dropdown-item:active {
  color: #001233;
}

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

.dropdown-item:hover {
  background: transparent;
  color: #fc8b02;
  font-weight: 700;
}

/* Mega menu for Home Loan */
.nav-item.mega-dropdown .dropdown-menu {
  min-width: 680px;
  display: none;
  padding: 16px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.nav-item.mega-dropdown .dropdown-menu.active {
  display: flex;
}

.nav-item.mega-dropdown .dropdown-item {
  width: 220px;
  padding: 8px 12px;
  color: #fd8b03;
  background: transparent;
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 780px) {
  .nav-item.mega-dropdown .dropdown-menu {
    min-width: 100%;
    padding: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 400px;
    overflow-y: auto;
  }

  .nav-item.mega-dropdown .dropdown-item {
    width: 100%;
    padding: 10px 35px;
    font-size: 13px;
  }
}

.nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
}

.nav-item.mega-dropdown .dropdown-item {
  width: 198px;
  padding: 5px 0px;
  color: #fd8b03;
  background: transparent;
  font-weight: 700;
  font-size: 16px;
}

.btn-enquire {
  background: #fc8b02;
  color: white;
  padding: 13px 30px 13px 30px;
  border: none;
  border-radius: 5px;
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
}

@media (min-width: 200px) and (max-width: 1024px) {
  .btn-enquire {
    display: block !important;
  }
}



.nav-link {
  color: #fd8b03;
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;
}

.nav-link:active {
  color: #001233;
}

/* header css */
.container {
  max-width: 1260px;
  width: 100%;
  margin: 30px auto;
  padding: 0 18px
}

/* Positioning context for external controls that should align to panels */
.container {
  position: relative;
}

h1 {
  font-size: 26px;
  margin: 0 0 16px
}

.muted {
  color: var(--muted)
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  padding: 18px;
  margin-bottom: 18px;
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 12px
}

/* Ensure debts list rows align with other form controls
   - add horizontal padding to match .row
   - make each debt-row align inputs to the bottom so placeholders line up
*/
#debtsList {
  padding: 0 10px;
}

.debt-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.debt-row label {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding-left: 6px;
  color: white !important;
}

.debt-row input,
.debt-row select {
  width: 100%;
}

@media(min-width:760px) {
  .row.cols-2 {
    grid-template-columns: 1fr 1fr
  }

  .row.cols-3 {
    grid-template-columns: repeat(3, 1fr)
  }

  .row.cols-4 {
    grid-template-columns: repeat(4, 1fr)
  }

  /* Ensure label blocks in multi-column rows share a common baseline so inputs align */
  .row.cols-2 label,
  .row.cols-3 label,
  .row.cols-4 label {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    color: white !important;
  }

  .row.cols-2 label>input,
  .row.cols-2 label>select,
  .row.cols-3 label>input,
  .row.cols-3 label>select,
  .row.cols-4 label>input,
  .row.cols-4 label>select {
    margin-top: auto;
    color: white !important;
  }

  /* Extra specificity for number inputs that sometimes render taller (e.g. % fields)
     Force the control to sit at the bottom of the label flex column and avoid
     any unexpected top margin that pushes it out of alignment. */
  .row.cols-2 label input[type="number"],
  .row.cols-3 label input[type="number"],
  .row.cols-4 label input[type="number"] {
    margin-top: auto !important;
    align-self: flex-end !important;
    box-sizing: border-box;
  }

}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: white !important;
}

input,
select {
  appearance: textfield;
  border: 1px solid var(--accent);
  background: #041730;
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 12px;
  width: 100%;
  font-size: 15px;
  font-family: inherit;
}

input[readonly] {
  background: #0b0d12;
  opacity: .9
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #0b0d12;
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 14px
}

.seg button {
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer
}

.seg button.active {
  background: #0a0c10;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
}

.right {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;

}

.btn-outline {
  background: #00993b;
  border: 1px solid var(--line);
  color: var(--ink)
}

.btn-primary {
  background: #00993b;
  color: #000000
}

.btn-success {
  background: var(--accent);
  color: #01eb5a
}

.left-panel {
  position: relative;
  min-height: 495px;
}

.state-pill {
  display: block;
  padding: 16px 14px;
  width: 100%;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: #081f39;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 12px;
  cursor: pointer;
}

.state-select-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.state-select-label select {
  background: #04182f;
  color: #e8eaed;
  border: 1px solid #F7931E;
  border-radius: 8px;
  height: 40px;
  cursor: pointer;
}

.state-name {
  font-weight: 700;
  color: #ffffff;
  margin-top: 6px;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.5s;
  text-transform: uppercase !important;
  font-size: 19px !important;
}

.statee {
  font-weight: 700;
  color: #ffffff;
  margin-top: 6px;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.5s;
  text-transform: uppercase !important;
  font-size: 19px !important;
  background: transparent !important;
  border: none !important;
}

.statee:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px;
  padding-left: 5px;
}

.muted {
  background-color: #0d2a50;
  border: 1px solid #333;
  padding: 10px;
  border-radius: 8px;
  /* min-height: 180px; */
  width: 100%;
  margin: 0;
}

.state-name:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding-left: 5px;
}

.muted {
  border: none !important;
}

.step {
  text-align: center;
  padding: 10px 0px;
}

.step-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 19px;
  margin: 6px 0 10px;
  padding: 0px 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  /* positioning context for external flip-controls */
}

/* allow grid children to shrink below their content width so they don't force overflow */
.grid-3>* {
  min-width: 0;
}

@media(min-width:980px) {
  .grid-3 {
    grid-template-columns: 32% 34% 32%;
    align-items: start;
  }
}

.big-panel {
  grid-column: 1 / -1;
}

@media(min-width:980px) {
  .big-panel {
    grid-column: 2 / span 2;
  }
}

/* Force mobile-like single-column layout for widths <= 1000px
   so the calculator stacks like it does under 464px. This keeps
   desktop (over 1000px) layout unchanged. */
@media (max-width: 1000px) {
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .hero h1 {
    margin-top: 5px !important;
  }

  .big-panel {
    grid-column: 1 / -1 !important;
  }

  .left-panel {
    width: 100% !important;
  }

  /* Ensure dashboard card doesn't exceed its container and can shrink */
  #dashboardCard {
    max-width: 100%;
    box-sizing: border-box;
    /* padding: 20px 16px !important; */
    /* overflow: hidden; */
  }

  .top-image-wrapper {
    width: 100%;
    height: 250px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 50px !important;
    background-color: #0b1b33;
    flex-direction: row;
  }

  .top-image-wrapper img {
    width: 120px;
  }

  .dash-col,
  .card {
    min-width: 0;
  }

  /* Constrain large images or elements inside panels */
  #dashboardCard img,
  .dash img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .welcome-message-static {
    width: 40% !important;
    min-width: 100% !important;
  }

  /* ensure flip control flows below the stacked panels */
  .grid-3 .flip-controls {
    position: static;
    margin-top: 8px;
  }
}


.top-image-wrapper {
  height: 293px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;

}

/* Dashboard internal columns */
.dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px
}

/* Flip control styles */
.flip-controls {
  margin-top: 6px;
}

/* Position flip control outside the right panel bottom-right */
.grid-3 .flip-controls {
  /* removed fixed absolute placement; button is positioned by script */
  position: static;
}

/* Ensure flip button keeps a usable width and doesn't collapse */
.flip-controls button,
.flip-controls .btn {
  min-width: 110px;
  padding: 10px 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#disclaimer {
  font-size: 13px;
  color: #b6b6b6;
  margin-top: 0px;
  line-height: 1.5;
  background: #5a8eff00 !important;
  padding: 15px;
}

.repayment-result-item {
  color: white !important;
}

/* Flip implementation notes:
   - Each face (front/back) will have backface-visibility hidden so that the
     rotated face is not visible when it's turned away.
   - We leave the actual DOM swap to JS (only one face exists at a time), and
     rotate the container `#dashboardCard` to animate the flip. The back face
     itself is pre-rotated so it reads correctly when the container is rotated.
*/
#dashboardCard {
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 35px 40px;
}

#dashboardCard.flipped {
  padding: 0;
}

#dashboardCard.flip-transition {
  transition: transform 650ms ease-in-out !important;
}

#dashboardCard.flipped {
  transform: rotateY(180deg);
}

/* Face helper: ensure the face content does not hide when parent is rotated */
.panel-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.back-holder {
  /* Back face is rotated so when the parent is rotated 180deg it appears upright.
     Changed from absolute overlay to a flow element so the back content can
     determine page height (prevents internal scrolling inside the box).
  */
  transform: rotateY(180deg);
  z-index: 2;
  background: #fff;
  overflow: visible;
  border-radius: 16px;
  box-sizing: border-box;
  display: none;
  /* hidden by default; shown when flipped via parent class */
}

.back-holder::-webkit-scrollbar {
  width: 4px;
}

.back-holder::-webkit-scrollbar-track {
  background: #fff;
}

.back-holder::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.back-holder::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.front-holder {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  box-sizing: border-box;
}

/* When the dashboard is flipped, show the back content in the document flow
   and hide the front content so the visible face determines the page height.
   This ensures scrolling happens on the page (body) rather than inside a
   fixed-height panel. */
#dashboardCard.flipped .back-holder {
  display: block;
}

#dashboardCard.flipped .front-holder {
  display: none;
}

/* When not flipped ensure front is visible and back is hidden. */
#dashboardCard .front-holder {
  display: block;
}

#dashboardCard .back-holder {
  display: none;
}

/* Page transition animations (opacity-only to avoid layout shifts) */
@keyframes fadeOutOpacity {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.page-fade-out {
  animation: fadeOutOpacity 0.28s ease-out forwards;
  pointer-events: none;
  will-change: opacity;
}

.page-fade-in {
  animation: fadeInOpacity 0.28s ease-in forwards;
  will-change: opacity;
}

@media(min-width:980px) {
  .dash {
    display: grid;
    grid-template-columns: 30% 32% 30%;
    gap: 16px;
  }

  .dash-col {
    padding-right: 16px;
    /* border-right: 1px dashed #2a3139;  */
    background-color: #000000 !important;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .dash-col:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

/* Black background sections */
#summary,
#details,
#results {
  background-color: #00000000 !important;
  /* border: 1px solid #333; */
  padding: 0px;
  border-radius: 8px;
}

/* Updated: Move headings outside the black boxes */
.dash-col-header {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 0 8px;
}

.dash-col-content {
  background-color: #0d2a50;
  border: none;
  padding: 10px;
  border-radius: 8px;
  /* min-height: 180px; */
  width: 100%;
}

.col-title {
  margin-bottom: 6px !important;
  margin-left: 5px !important;
}

.results h3 {
  margin: .2rem 0 .25rem;
  font-size: 13px;
  color: var(--muted)
}

.results .big {
  font-size: 18px;
  font-weight: 700;
  color: #eaf2ff;
  text-align: left;
  overflow-wrap: anywhere;
}

.green {
  color: var(--accent)
}

.red {
  color: var(--danger)
}

.disclaimer {
  border: 1px dashed var(--line);
  background: #020b18;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 30px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  margin: 24px 0 0 auto;
  padding: 11px 25px;
  font-size: 12px;
  font-weight: 600;
  background: #041730;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--accent);
  transition: background 0.2s;

}

.cta-btn img {
  width: 10%;
}

.cta-btn:hover {
  background: #ff961e;
  color: #fff
}

.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, #23303e 25%, #2a2f36 75%, transparent);
  border: 0;
  margin: 18px 0
}

.alert {
  border: 1px solid #7a2b2b;
  background: #2b0f10;
  color: #ffdcdc;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 18px;
}

.italic {
  font-style: italic;
  font-size: 12px;
  color: var(--muted)
}

.dash-col {
  min-width: 0
}

.step4-block {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.step4-label {
  color: white;
  font-weight: 700;
  margin-bottom: 4px;
}

.step4-text {
  font-size: 13px;
  color: var(--ink)
}

.left-panel {
  padding: 0;
  border: 3px solid #F7931E;
  background-color: #041830;
}

.row {
  padding: 0px 10px !important
}

#dashboardCard {
  border: 3px solid #F7931E !important;
  background-color: #001334;
  display: flex;
  flex-direction: column;
}

.dash-col {
  color: #cfcfcf
}

.disclaimer {
  border: none;
  background: #0d2a50;
}



.cost-breakdown {
  background-color: #001403 !important;
  color: rgb(228, 228, 228);
}

.row-main {
  border: 2px solid green;
  display: flex;
  flex-wrap: wrap;
}

input[type="text"] {
  appearance: textfield;
  border: 1px solid var(--accent);
  background: #19253b;
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 12px;
  width: 100%;
  font-family: inherit;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--accent)
}

input[type="number"] {
  appearance: textfield;
  border: 1px solid var(--line);
  background: #000000;
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 12px;
  width: 100%;
}

input[type="number"]:focus {
  outline: none;
  background-color: #041730;
  border-color: var(--accent);
}

input[type="number"] {
  background-color: #041730;
  border: 1px solid var(--accent);
}

input[type="text"] {
  background-color: #041730;
}

.col-title {
  color: #00993b;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
}

/* --- Enhanced Select Dropdown Styling --- */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #041730;
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: 12px 40px 12px 14px;
  border-radius: 12px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(1.1em + 2px), calc(100% - 16px) calc(1.1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:focus {
  border-color: var(--accent);
  outline: none
}

select:hover {
  border-color: var(--accent)
}

option {
  background: #000c02;
  color: var(--ink);
  font-size: 14px;
  padding: 10px
}

select::-ms-expand {
  display: none
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  background: transparent;
  border: none;
  padding: 0;
}

.seg .row {
  flex: 1 1 150px;
  margin-bottom: 0
}

.seg select {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #F7931E;
  background-color: #051830;
  color: var(--ink);
  appearance: none;
  cursor: pointer;
}

.seg select:hover,
.seg select:focus {
  border-color: var(--accent);
  outline: none
}

.btn {
  background-color: #041730 !important;
  color: white;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}


.btn:hover {
  background-color: #041730;
  color: #ffffff;
  transform: scale(1.05);
}

.seg button.active {
  background-color: var(--accent);
  color: #000;
  box-shadow: 0 0 15px var(--accent);
}

.btn img {
  width: 10px !important;
  height: 16px !important;
  vertical-align: middle;
}

/* Calculate button specific styling */
button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}

/* Add to your existing CSS */
/* Welcome Message Animation */
.welcome-message {
  opacity: 0;
  transform: translateY(20px);
  animation: welcomeFadeIn 1s ease-out forwards;
}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-message h2 {
  color: #00993b;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  animation: titleSlideIn 0.8s ease-out 0.3s forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.welcome-message p {
  animation: textFadeIn 0.8s ease-out 0.6s forwards;
  opacity: 0;
}

@keyframes textFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* LMI Summary Styles */
.lmi-summary {
  background: #000000;
  border-radius: 10px;
  padding: 16px;
  border: 0.5px solid rgb(61, 61, 61);
  margin-top: 10px;
}

.lmi-summary p {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

.lmi-summary p:last-child {
  margin-bottom: 0;
}

.lmi-summary strong {
  color: var(--primary);
}

/* Add to your existing CSS */
/* Welcome Message Animation - Only on initial load */
.welcome-message-initial {
  opacity: 0;
  transform: translateY(20px);
  animation: welcomeFadeIn 1s ease-out forwards;
  height: 100% !important;
  max-height: 900px !important;


  margin-top: -53px !important;
  margin-bottom: -68px !important;
}

.welcome-message-initial1 img {
  height: 97%;
}

.welcome-message-initial1 {
  opacity: 0;
  transform: translateY(20px);
  animation: welcomeFadeIn 1s ease-out forwards;
  width: 90%;
  height: 500px;

  border-radius: 18px;
  grid-row: 1px !important;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
  padding: 0px !important;

}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.welcome-message-initial {
  animation: textFadeIn 0.8s ease-out 0.6s forwards;
  opacity: 0;
  color: white;
  width: 100%;
}




@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}



@keyframes textFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Static welcome message (no animation) */

.welcome-message-static h2 {
  color: #ffffff;
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 700;
}

/* LMI Summary Styles */
.lmi-summary {
  background: #000000;
  border-radius: 10px;
  padding: 16px;
  border: 0.5px solid rgb(61, 61, 61);
  margin-top: 10px;
}

.lmi-summary p {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

.lmi-summary p:last-child {
  margin-bottom: 0;
}

.lmi-summary strong {
  color: var(--primary);
}

/* NEW: Repayment Scenarios Styles */
.repayment-scenarios-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin: 20px 0 0 0;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.repayment-scenarios-btn:hover {
  background: #0d2a50;
  transform: translateY(-1px);
}

.repayment-scenarios-btn img {
  width: 11px;
  height: 14px;
  transition: transform 0.3s ease;
}

.repayment-scenarios-btn.open img {
  transform: rotate(180deg);

}

.repayment-scenarios-calculator {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  background: #000000;
  border-radius: 12px;
  border: 1px solid #333;
  margin-top: 10px;
  opacity: 0;
  transition: all 0.2s;
}

.repayment-scenarios-calculator.open {
  max-height: 800px;
  transition: max-height 0.5s ease-in;
  opacity: 1;
}



.repayment-input-group {
  margin-bottom: 20px;
}

.repayment-input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}

.repayment-input-group input {
  background: #030f01;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 8px;
  width: 100%;
  font-size: 14px;
}

.repayment-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .repayment-results {
    grid-template-columns: 1fr 1fr;
  }

}

.repayment-result-card {
  background: #001403;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #333;
}

.repayment-result-card h4 {
  color: #00993b;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

.repayment-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.repayment-result-item:last-child {
  margin-bottom: 0;
}

.repayment-result-value {
  font-weight: 700;
  color: var(--ink);
}

.repayment-savings {
  color: var(--accent) !important;
}

.repayment-note {
  margin-top: 15px;
  padding: 12px;
  background: #0b0d12;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.repayment-results {
  display: flex;
  flex-direction: column;
}

.repayment-note {
  display: none;
}

.repayment-results {
  margin-bottom: 10px !important;
}

.repayment-calc-content {
  padding: 10px;
}

/* Enhanced Repayment Scenarios Styles */
.repayment-input-group {
  margin-bottom: 20px;
}

.repayment-input-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 480px) {
  .repayment-input-row {
    grid-template-columns: 1fr 1fr;
  }

}

.repayment-input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.repayment-input-group input,
.repayment-input-group select {
  background: #030f01;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 8px;
  width: 100%;
  font-size: 14px;
  transition: all 0.2s ease;
}

.repayment-input-group input:focus,
.repayment-input-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 153, 59, 0.1);
}

.repayment-input-group select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.repayment-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}



.repayment-result-card {
  background: #001403;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #333;
}

.repayment-result-card h4 {
  color: #00993b;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

.repayment-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.repayment-result-item:last-child {
  margin-bottom: 0;
}

.repayment-result-value {
  font-weight: 700;
  color: var(--ink);
}

.repayment-savings {
  color: var(--accent) !important;
}

.repayment-note {
  margin-top: 15px;
  padding: 12px;
  background: #0b0d12;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.repayment-note strong {
  color: var(--primary);
}

.new-calculator {
  width: 100%;
  transition: opacity 0.3s ease;
}

.new-calculator.hidden {
  display: none !important;
}

.new-calculator.visible {
  display: block;
}

.welcome-message-static {
  width: 70%;
  min-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  max-height: 500px !important;

  margin-top: -30px !important;
  margin-bottom: -90px !important;


}

.welcome-message-static img {
  height: 90%;
}

.welcome-message-initial {
  width: 100%;
  min-width: 655px;
  height: 198px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


}

@media (max-width: 425px) {
  * {
    font-family: 'Rajdhani', sans-serif;
  }


  /* Hero Section */


  .hero h1 {
    font-size: 34px !important;
    font-weight: 600 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 660px) {
  .commercial-page-container .btn-wrap {
    flex-direction: column;
  }

  .welcome-message-initial1 {
    opacity: 0;
    transform: translateY(20px);
    animation: welcomeFadeIn 1s ease-out forwards;
    width: 100%;
    text-align: center;
    border-radius: 18px;
    grid-row: 1px !important;

  }


}

.faq-item.active .faq-answer {
  margin-top: 12px;
  opacity: 1 !important;
}

#dashboardCard.flip-transition {
  transition: transform 360ms ease-in-out;
  min-height: 246px;
}


@media screen and (max-width: 480px) {
  .welcome-message-static {
    width: 100%;
    min-width: 10px !important;
  }

  .welcome-message-initial {
    width: 100%;
    min-width: 10px !important;
    margin: 0px !important;
  }
}

.welcome-message-initial h2 {
  width: 100%;
  text-align: center !important;
  justify-content: center !important;
  font-size: 28px;
  font-weight: 700 !important;
  opacity: 1 !important;
  color: #ffffff !important;
  animation: titleSlideIn 0.8s ease-out 0.3s forwards !important;
  transform: translateX(-20px) !important;
  line-height: 1px;
  margin-top: 20px;
}

.welcome-message-initial1 p {
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.007);
  font-size: large;
}

.welcome-message-static h2 {
  width: 150px;
  text-align: center;
  font-size: 25px;
  font-weight: 700 !important;
  opacity: 1 !important;
  color: #ffffff !important;

}

.welcome-message-static p {
  width: 100%;
  font-size: large !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.007);
}

input#extraRepaymentAmount {
  background-color: #061830;
}

select#extraRepaymentFrequency {
  background-color: #061830;
}

input#extraRepaymentAmount:focus,
select#extraRepaymentFrequency:focus {
  outline: none;
  border: 1px solid #F7931E;

}

.lmi-summary strong {
  color: #F7931E;
}

.lmi-summary {
  background-color: #0d2a50 !important;
}

.col-title {
  color: #ffffff;
}

.repayment-result-card {
  background-color: #061830;
}

.repayment-result-card h4 {
  color: #ffffff;
}

.cost-breakdown {
  background-color: #061830 !important;
}

.repayment-calc-content {
  background-color: #0d2a50 !important;
}

.nh-exp-row {
  padding: 0px 10px !important;
}

/* Commercial Page Container Styles */
.commercial-page-container {
  padding: 0;
  color: #0b1b33;
  box-sizing: border-box;
  width: 100%;
}

.commercial-page-container h1,
.commercial-page-container h2 {
  color: #ff8a00;
  margin-bottom: 15px;
  margin-top: 20px;
}

.commercial-page-container h1 {
  font-size: 24px;
}

.commercial-page-container h2 {
  font-size: 18px;
}

.commercial-page-container p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.commercial-page-container ul {
  padding-left: 20px;
  margin-bottom: 30px;
}

.commercial-page-container ul li {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.commercial-page-container strong {
  font-weight: 700;
}

.commercial-page-container .divider {
  border-top: 1px dashed #cfcfcf;
  margin: 30px 0;
}

.commercial-page-container .btn-wrap {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.commercial-page-container .btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.commercial-page-container .btn-dark {
  background: #0b1b33;
  color: #fff;
}

.commercial-page-container .btn-orange {
  background: #ff8a00;
  color: #fff;
}

.commercial-page-container .btn:hover {
  opacity: 0.9;
}

.faq {
  border: none;
  padding: 8px 0;
  margin-top: 8px;
}

.faq-question {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #0b1b33;
  position: relative;
  padding-right: 36px;
}

.faq-question::before {
  content: "+";
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #ff8a00;
  font-size: 22px;
  width: 34px;
  display: inline-block;
  text-align: center;
  line-height: 1;
}

.faq.open .faq-question::before {
  content: "-";
}

.faq-answer {
  margin-top: 15px;
  font-size: 14px;
  color: #333;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition: max-height 260ms cubic-bezier(.2, .9, .2, 1), opacity 200ms ease, padding-top 200ms ease;
  box-sizing: border-box;
}

.faq.open .faq-answer {
  opacity: 1;
}

/* sections */
.section1 {
  background-image: linear-gradient(rgba(25, 29, 48, 0.55), rgba(0, 0, 0, 0.55)), url('/assests/background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #e6eef8;
  padding-top: 8%;
  padding-bottom: 2%;
}

.about-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.about-container {
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

}

/* LEFT CONTENT */
.divider {
  margin: 40px 0;
}

.about-content {
  padding: 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
}

.about-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #001333;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.about-tag::before {
  content: "";
  width: 4px;
  height: 14px;
  background-color: #ff8a00;
}

.about-content h2 {
  font-size: 58px;
  line-height: 1em;
  letter-spacing: -2px;
  color: #001333;
  margin-bottom: 22px;
  font-weight: 600;
}

.about-content p {
  font-size: 17px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-btn {
  align-self: flex-start;
  font-size: 16px;
  margin-top: 20px;
  padding: 14px 36px;
  letter-spacing: 0.3px;
  background-color: #ff8a00;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.about-btn:hover {
  background-color: #e67900;
}

/* RIGHT IMAGE */
.about-image {
  display: flex;
  justify-content: center;
  align-items: start;

  /* height: 100%; */
  width: 52%;
  height: 450px;
}

.about-image img {
  width: 100%;
  height: 500px;

  object-fit: cover;
}

/* RESPONSIVE FLEX */
@media (max-width: 991px) {
  .about-container {
    flex-direction: column;
    gap: 40px;
    padding: 0px;
  }

  .about-content,
  .about-image {
    width: 100%;
    height: auto;
  }

  .about-image img {
    height: 300px;
  }

  .about-content h2 {
    font-size: 36px;
    letter-spacing: -2px !important;
    margin-left: 0;

  }

  .about-section {
    padding: 50px 20px;
  }

}

.commercial-page-container h1 {
  color: #ff8a00;
  margin-bottom: 12px;
  text-align: start !important;
}

.main-contents {
  padding: 20px !important;

}

/* why section */
.why-section {
  padding: 0px 0px 100px 0px;
  background: #ffffff;
  font-family: 'Segoe UI', sans-serif;
}

.why-container {
  margin: 0;
  padding: 0 70px;
  display: flex;
  align-items: stretch;
  gap: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* LEFT IMAGE */
.why-image-left {
  width: 30%;
  display: flex;
  align-items: flex-start;


}

.why-image-left img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* CONTENT */
.why-content {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.why-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #001333;
  letter-spacing: 1px;
}

.why-tag::before {
  content: "";
  width: 4px;
  height: 14px;
  background: #ff8a00;
}

/* ITEM */
.why-item {
  display: flex;
  gap: 20px;
}

/* ICON IMAGE BOX */
.why-icon {
  width: 48px;
  height: 48px;

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

  flex-shrink: 0;
}

.why-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.why-text h3 {
  font-size: 36px;
  font-weight: 600;
  color: #001333;
  margin-bottom: 10px;
  line-height: 1.3em;
}

.why-text p {
  font-size: 18px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 8px;
}

.why-text a {
  font-size: 16px;
  color: #ff8a00;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.5s !important;
}

.why-text a:hover {
  transform: translateY(-3px) !important;
}

/* RIGHT IMAGE */
.why-image-right {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;

  gap: 20px;

}

.image2 {
  width: 130px !important;
  margin-right: 30px;
  height: 120px !important;

}

.why-image-right img {
  width: 300px;
  object-fit: cover;
  height: 330px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .why-image-left {
    display: none;
  }

  .why-container {
    flex-direction: column;
    justify-content: start !important;
    align-items: start !important;
    padding: 0;
  }

  .why-text h3 {
    letter-spacing: -0.2px !important;
  }

  .why-section {
    padding: 10px 20px;
  }

  .why-image-left,
  .why-image-right,
  .why-content {
    width: 100% !important;
  }

  .why-image-right img {
    width: 100% !important;
  }

  .image2 {
    display: none !important;
  }
}

/* service section */
.services-section {
  padding: 0px 0px 100px 0px;
  background: #ffffff;
  font-family: 'Segoe UI', sans-serif;
}

.services-container {
  width: 100%;
  margin: auto;
  padding: 0 70px;
}

/* HEADER */
.services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

.services-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #001333;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.services-tag::before {
  content: "";
  width: 4px;
  height: 14px;
  background: #ff8a00;
}

.services-header h2 {
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -3px;
  color: #0a1a44;
}

/* BUTTON */
.services-btn {
  padding: 14px 30px;
  background: #ff8a00;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 6px;
  white-space: nowrap;
}

.services-btn:hover {
  background: #e67900;
}

/* CARDS */
.services-cards {
  display: flex;
  gap: 40px;
}

.service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;

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

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card h3 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #001333;
  margin-bottom: 14px;
}

.service-card p {
  font-size: 18px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 16px;
}

.service-card a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ff8a00;
  text-decoration: none;
  transition: all 0.5s;
}

.service-card a:hover {
  transform: translatey(-3px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .services-header {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }

  .btn-group {
    display: flex;
    flex-direction: column;
  }

  .service-card h3 {
    letter-spacing: -0.2px;

  }

  .services-header h2 {
    letter-spacing: -0.2px;
    line-height: 0.9em;
  }

  .services-cards {
    flex-direction: column;
  }

  .services-section {
    padding: 50px 20px;
  }

  .services-container {
    padding: 0;
  }
}

/* work section */
.work-section {
  width: 100%;
  padding: 0px 70px 100px 0px;
  background: #ffffff;

}

.work-container {
  width: 100%;
  padding: 0px 70px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 60px;

}

/* IMAGE */
.work-image {
  width: 70%;
  padding: 40px 40px 40px 0px;
  background-image: linear-gradient(rgb(248, 248, 255), rgb(255, 255, 255));
}

.work-image img {
  width: 100%;
  height: 370px;
  object-fit: cover;

}

/* CONTENT */
.work-content {
  width: 60%;
  display: flex;
  flex-direction: column;

}

.work-label {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #001333;
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}

.work-label::before {
  content: "";
  width: 4px;
  height: 100%;
  background: #f7941d;
  position: absolute;
  left: 0;
  top: 0;
}

.work-content h2 {
  font-size: 58px;
  line-height: 1em;
  letter-spacing: -3px;
  font-weight: 600;
  color: #001333;
  margin-bottom: 20px;
}

.work-content p {
  font-size: 18px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 16px;
}

.work-content .bold-text {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.33em;
  letter-spacing: -0.3px;
  color: #001333;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .work-container {
    flex-direction: column;
    align-items: start;

    width: 100%;
    padding: 0;
  }

  .work-section {

    padding: 50px 20px;
  }


  .work-content h2 {
    font-size: 32px;
    letter-spacing: 0.7px;
  }

  .work-content {
    width: 100%;
    margin: 0;
    padding: 20px 20px 0px 20px;
    box-shadow: 0 12px 30px rgba(11, 44, 93, 0.377);

  }

  .work-image {
    width: 100%;
    padding: 0px 0px 0px 0px;
  }

  .work-image img {
    height: 320px;
  }
}

/* test morials */
.testimonials-section {
  padding: 0px 70px 100px 70px;
  background: #ffffff;
  font-family: Arial, sans-serif;
}

.testimonials-container {
  width: 100%;
  text-align: center;
}

/* HEADER */
.section-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #001333;
  padding-left: 14px;
  position: relative;
}

.section-label::before {
  content: "";
  width: 4px;
  height: 100%;
  background: #f7941d;
  position: absolute;
  left: 0;
  top: 0;
}

.testimonials-header h2 {
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1em;
  color: #001333;
  margin: 12px 0;
}

.testimonials-header p {
  font-size: 18px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  max-width: 700px;
  margin: auto;
}

/* CARDS */
.testimonials-cards {
  display: flex;
  gap: 40px;
  margin-top: 60px;

}

.testimonial-card {
  background: #f5f7fb;
  padding: 32px;
  border-radius: 12px;
  flex: 1;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

/* QUOTE IMAGE */


/* USER IMAGE */
.user-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 20px;
  object-fit: cover;
  margin-bottom: 12px;
}

.testimonial-card h4 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.33em;
  letter-spacing: -0.3px;
  color: #001333;
}

.role {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33em;
  letter-spacing: 0.3px;
  color: #f7941d;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}

.testimonial-text {
  font-size: 24px;
  font-weight: 500;
  font-style: italic;

  line-height: 1.6em;
  color: #001333;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .testimonials-cards {
    flex-direction: column;
  }

  .testimonials-section {
    padding: 50px 20px;
  }

  .testimonials-header h2 {
    font-size: 32px;
    letter-spacing: -0.2px;
    line-height: 0.9em;
  }
}

/* blog section */
.blog-section {
  padding: 50px 70px;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.blog-container {
  width: 100%;
  margin: auto;
  padding-top: 5%;
}

/* HEADER */
.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.section-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #001333;
  padding-left: 14px;
  position: relative;
}

.section-label::before {
  content: "";
  width: 4px;
  height: 100%;
  background: #f7941d;
  position: absolute;
  left: 0;
  top: 0;
}

.blog-header h2 {
  font-size: 58px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -3px;
  color: #001333;
  margin-top: 10px;
}


.blog-btn {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  background: #ff9800;
  color: #fff;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
}

.blog-btn:hover {
  background: #e68900;
}

/* CARDS */
.blog-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  gap: 30px;
}

.blog-card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
}

.blog-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 18px;
}

.blog-card h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.3em;
  color: #001333;
  margin-bottom: 10px;
}

.blog-meta {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5px;
  letter-spacing: 0.3px;
  color: #999;
  text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .blog-section {
    padding: 50px 20px;
  }

  .blog-header {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .blog-cards {
    flex-direction: column;
    gap: 20px;
  }

  .blog-card {
    flex: 1 1 100%;
    min-width: auto;
  }

  .blog-header h2 {
    font-size: 32px;
    letter-spacing: -0.2px;
    line-height: 0.9em;
  }
}

/* MODAL & ARTICLE DETAIL (blog) */
.blog-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 9999;
}

.blog-modal-content {
  background: #fff;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  border-radius: 8px;
  position: relative;
  padding: 20px 28px;
}

.blog-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1001;
  background: #ff9800;
  border: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, background 0.12s ease;
}

.blog-modal-close:hover {
  transform: scale(1.06);
  background: #e68900;
}

.blog-modal-close:focus {
  outline: 3px solid rgba(255, 152, 0, 0.22);
}

.blog-detail-article {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.blog-detail-image {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 6px;
}

.blog-detail-header h1 {
  font-size: 32px;
  margin: 0;
  color: #001333;
}

.blog-detail-meta {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.blog-detail-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #222;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.blog-detail-view {
  padding: 0px;
}

.blog-detail-button {
  display: flex;
  justify-content: flex-end;
  align-items: end !important;
  padding: 0;
}

.blog-back-btn {
  display: inline-block;
  margin-bottom: 18px;
  background: #ff9800;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

@media (max-width: 900px) {
  .blog-detail-image {
    height: 220px;
  }

  .blog-modal-content {
    padding: 16px;
  }

  .blog-detail-view {
    padding: 20px;
  }

  .blog-modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* notice banner */
.notice-section {

  display: flex;
  ;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 0px 0px 100px 0px;
}

/* Content box */
.notice-content {
  width: 100%;
  text-align: center;
  color: #001333;
  padding: 91px 0px;
  background-image: url("/assests/background-gradient.jpeg");
  background-position: center;
  background-size: cover;

}

.notice-content h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.33px;
  letter-spacing: -0.3px;
  margin-bottom: 30px;
}

.notice-content p {
  font-size: 18px;
  color: #001333;
  font-weight: 500;
  line-height: 1.8;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .notice-content p {
    width: 100%;
  }

  .notice-content {
    padding: 90px 20px;
  }
}

/* footer css */
footer {
  width: 100%;
  background-color: #fafafa;
  padding: 50px 30px 0px 30px;
  /* margin-top: 130px; */
  border-top: 1px solid #001b3a;
}

.footer-content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-con {
  width: 95%;
  padding: 70px 70px 70px 70px;
  display: flex;
  background-color: #f3f6fa;
  border-radius: 5px;
  gap: 60px;
  margin-top: -140px;
  z-index: 999;
}

.newsletter h3 {
  width: 20%;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #0a1931;
  border-left: 5px solid #fc8c03;
}

.newsletter h1 {
  width: 90%;
  color: #0a1931;
  font-weight: 600;
  font-size: 58px;
  line-height: 1em;
  letter-spacing: -3px;
  margin-top: 15px;
}

.newsletter p {
  width: 100%;
  color: #061124;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}

.foot-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.foot-form input {
  border-radius: 4px;
  padding: 20px 0px;
  background-color: transparent;
  border: 1px solid #c4c4c4;
}

.foot-form :placeholder-shown {
  padding-left: 16px;
  font-weight: 800;
  color: #6c7583;
}

.foot-form button {
  background-color: #fc8c03;
  color: #fff;
  padding: 13px 0px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.foot-form button:hover {
  transform: translateY(-8px);
}

.footer-log {
  width: 100%;
  margin-top: 100px;
  padding: 0px 70px 90px 70px;
  display: flex;
  border-bottom: 1px solid #2e3a4e;

}

.fink {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fink p {
  color: #001b3a;
  width: 85%;
  font-weight: 500;
  font-size: 18px;
}

.footer-menu {
  width: 20%;
}

.footer-menu h1 {
  color: #001b3a;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 20px;
  width: 10px;
  border-left: 5px solid #fd8b02;
  padding-left: 10px;
  width: 60%;
}

.footer-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu ul li a {
  text-decoration: none;
  color: #001b3a;
  font-size: 18px;
  font-weight: 600;
}

.footer-menu ul li a:active {
  color: #fc8c03;
}

.footer-menu ul li a:hover {
  color: #fc8c03;
}

.footer-menu p {
  padding-bottom: 13px;
  color: #001b3a;
  font-weight: 600;
  font-size: 16px;
}

.ic {
  display: flex;
  gap: 10px;
}

.contact-icons {
  display: flex;
  gap: 13px;
}

.contact-icons a {
  width: 14%;
  padding: 5px 0px;
  color: #0a1931;
  background-color: #fc8c03;
  border-radius: 4px;
  text-align: center;
}

.copyright {
  padding: 0;
}

.copyright p {
  width: 100%;
  text-align: center;
  color: #001b3a;
  padding: 0px;
  font-weight: 600;
  font-size: 18px;
  margin-top: 20px;
  padding-bottom: 20px;
}

.copyright p a {
  color: #001b3a;
  text-decoration: none;
}

/* ========== RESPONSIVE FOOTER ========== */

/* Tablets (768px to 1024px) */
@media(max-width: 1024px) {
  .footer-con {
    width: 90%;
    padding: 50px 40px 50px 40px;
    gap: 40px;
    flex-direction: column;
  }

  .newsletter h1 {
    font-size: 40px;
    letter-spacing: -0.2px;
  }

  .foot-form {
    flex-direction: row;
    gap: 12px;
  }

  .foot-form input {
    width: 70%;
    padding: 15px 0px;
  }

  .foot-form button {
    width: 30%;
    padding: 15px 0px;
  }

  .footer-log {
    padding: 0px 40px 60px 40px;
    gap: 30px;
  }

  .fink {
    width: 40%;
  }

  .footer-menu {
    width: 25%;
  }

  #dashboardCard {
    min-height: auto;
  }
}

/* Mobile (max 768px) */
@media(max-width: 768px) {
  footer {
    padding: 40px 15px 0px 15px;
    margin-top: 80px;
  }

  .left-panel {
    min-height: auto;
  }

  .main-contents {
    padding: 20px !important;
  }

  .footer-con {
    width: 95%;
    padding: 30px 20px 30px 20px;
    gap: 25px;
    margin-top: -80px;
    flex-direction: column;
  }

  .newsletter h1 {
    font-size: 28px;
    width: 100%;
  }

  .newsletter p {
    font-size: 15px;
  }

  .foot-form {
    flex-direction: column;
    gap: 10px;
  }

  .foot-form input,
  .foot-form button {
    width: 100%;
    padding: 15px 0px;
    font-size: 16px;
  }

  .footer-log {
    flex-direction: column;
    padding: 0px 15px 50px 15px;
    gap: 40px;
    border-bottom: 1px solid #2e3a4e;
  }

  .fink {
    width: 100%;
  }

  .fink p {
    width: 100%;
    font-size: 16px;
  }

  .footer-menu {
    width: 100%;
  }

  .footer-menu h1 {
    font-size: 18px;
  }

  .footer-menu ul li a {
    font-size: 16px;
  }

  .footer-menu p {
    font-size: 14px;
  }

  .contact-icons a {
    width: 20%;
    padding: 8px 0px;
    font-size: 14px;
  }

  .copyright p {
    font-size: 14px;
    margin-top: 15px;
    padding-bottom: 15px;
  }
}

/* Small Mobile (max 480px) */
@media(max-width: 480px) {
  footer {
    padding: 30px 20px 0px 20px;
    margin-top: 60px;
  }

  .footer-con {
    width: 100%;
    padding: 20px 15px 20px 15px;
    margin-top: -60px;
  }

  .newsletter h3 {
    font-size: 13px;
  }

  .newsletter h1 {
    font-size: 22px;
  }

  .newsletter p {
    font-size: 14px;
  }

  .footer-log {
    padding: 0px 10px 40px 10px;
    gap: 30px;
  }

  .footer-menu h1 {
    font-size: 16px;
  }

  .footer-menu ul li a {
    font-size: 14px;
  }

  .contact-icons a {
    width: 25%;
    font-size: 12px;
  }

  .copyright p {
    font-size: 12px;
    padding-bottom: 10px;
  }
}

/* footer css */

/* email popup*/
#emailModal .modal-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

#emailModal .modal-content {
  background: #ffffff !important;
  padding: 20px !important;
  border-radius: 15px !important;
  max-width: 460px !important;
  width: 100% !important;
  box-shadow: 0 12px 30px rgba(3, 10, 30, 0.18) !important;
  border: 3px solid orange !important;
  font-family: inherit !important;
}

#emailModal input[type="text"],
#emailModal input[type="email"] {
  width: 100% !important;
  padding: 15px 10px !important;
  border: 2px solid orange !important;
  border-radius: 8px !important;
  color: black !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: inherit !important;
  outline: none !important;
  transition: box-shadow 160ms ease, border-color 160ms ease !important;
}

.icond {
  font-size: 40px !important;
  padding: 10px 10px 10px 10px !important;
  color: #fc8b01;
}
.blog-detail-image{
  margin-top: 100px !important;
}