/* ===== BASE STYLES ===== */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    :root {
      --color-text: #0e1e35;
      --color-text-light: #6b7280;
      --color-text-muted: #9ca3af;
      --color-accent: #64748b;
      --color-accent-dark: #0e1e35;
      --color-primary: #475569;
      --color-bg: #ffffff;
      --color-bg-alt: #f8fafc;
      --color-bg-dark: #0e1e35;
      --color-border: #e2e8f0;
      --font-main: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    body {
      margin: 0;
      font-family: var(--font-main);
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text);
      background: var(--color-bg);
      background-image: url(images/bg/main-bg.jpg);
      background-size: 100%;
      font-weight: 300;
      
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .container-xl {
      max-width: 1600px;
      margin: 0 auto;
    }
    
    h1, h2, h3, h4 {
      line-height: 1.25;
      margin: 0 0 16px 0;
    }
    
    h1 { font-size: 2.5rem; font-weight: 700; }
    h2 { font-size: 1.875rem; font-weight: 600; }
    h3 { font-size: 1.25rem; font-weight: 500; }

    .b-600 {
      font-weight: 600;
    }
    .b-800 {
      font-weight: 800;
    }

    h1,h2,h3,h4,h5,h6 {
      font-family: "Merriweather", sans-serif;
    }
    
    p { margin: 0 0 16px 0; }
    
    a { color: var(--color-accent-dark); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .eyebrow {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #e8edf6;
      margin-bottom: 0.75rem;
      display: block;
    }
    
    .italic {
      font-style: italic;
    }
    /* ===== HEADER ===== */
    .header {
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-border);
      padding: 16px 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .logo {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-text);
      display: flex;
      align-items: center;
    }
    
    .logo span { color: #8c8c8c;}
    .logo:hover { text-decoration: none; }
    
    .logo-img {
      height: 44px !important;
      width: auto !important;
      display: block;
    }
    
    .logo-tagline {
      font-size: 12px;
      font-weight: 500;
      padding-left: 10px;
      border-left: solid 1px #8b8b8b;
      margin-left: 10px;
      font-family: 'Merriweather';
      font-style: italic;
    }
    
    .nav {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    
    .nav a {
      color: var(--color-text-light);
      font-size: 0.9375rem;
      font-weight: 500;
      transition: color 0.2s;
      border-bottom: solid 2px transparent;
    }
    
    .nav a:hover, .nav a.active {
      color: var(--color-text);
      text-decoration: none;
      border-bottom: solid 2px var(--color-text);
    }
    
    .nav-cta {
      background: var(--color-text);
      color: white !important;
      padding: 10px 20px;
      border-radius: 6px;
    }
    
    .nav-cta:hover {
      background: var(--color-accent-dark);
    }
    
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    /* ===== HERO WITH SLIDESHOW ===== */
    .hero {
      position: relative;
      background: var(--color-bg-alt);
      overflow: hidden;
    }
    
    .hero-slideshow {
      position: relative;
      width: 100%;
      height: 95vh;
      overflow: hidden;
    }
    
    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
    }
    
    .hero-slide.active {
      opacity: 1;
    }
    
    .hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    
    /* Subtle gradient overlay for text legibility */
    .hero-slideshow::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: rgb(8 18 35 / 48%);
      pointer-events: none;
    }
    
    /* Slideshow indicators */
    .hero-indicators {
      position: absolute;
      bottom: 9vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
    }
    
    .hero-indicator {
      width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    border: none;
    padding: 0;
    }
    
    .hero-indicator:hover {
      opacity: 0.7;
    }
    
    .hero-indicator.active {
      opacity: 1;
      transform: scale(1.25);
    }
    
    .hero-content {
      position: relative;
      padding: 48px 0 72px;
      z-index: 5;
      float: left;
      text-align: left;
      transform: translate(10%, 50%);
    }
    
    .hero-content h1 {
      max-width: 720px;
      margin: 0 auto 20px;
      color: #fff;
      font-style: italic;
    }
    
    .subtitle {
      font-size: 1.125rem;
    color: #fff;
    max-width: 640px;
    margin: 30px 0;
    }
    
    .hero-ctas {
      display: flex;
      gap: 16px;
      justify-content: start;
      flex-wrap: wrap;
    }
    
    .img-responsive {
      width: 100%;
      display: block;
    }
    .border-container,
    .border-container-alt {
      padding: 20px;
      position: relative;
      z-index: 1;
    }
    .border-container:before,
    .border-container-alt:before {
      position: absolute;
      content: "";
      border: solid 3px #cdaf72;
      width: 87%;
      height: 99%;
      left: -10px;
      z-index: -1;
      top: 0;
  }
  .border-container-alt:before{
    left: 55px;
  }
    /* ===== BUTTONS ===== */
    .btn {
      display: inline-block;
      padding: 14px 28px;
      font-size: 0.9375rem;
      font-weight: 500;
      border-radius: 3px;
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }
    
    .btn:hover { text-decoration: none; }
    
    .btn-primary {
      background: #192a48;
      color: #e8edf6;
    }
    
    .btn-primary:hover {
      background: var(--color-accent-dark);
    }
    
    .btn-secondary {
      background: #ebebeb;
      color: var(--color-text);
      border: 1px solid var(--color-border);
    }
    
    .btn-secondary:hover {
      border-color: var(--color-accent);
      background: var(--color-bg);
    }
    
    .btn-light {
      background: white;
      color: var(--color-text);
    }
    
    .btn-light:hover {
      background: var(--color-bg-alt);
    }
    
    
    /* ===== EYEBROW TEXT ===== */
	.eyebrow {
	  font-size: 0.875rem;
	  font-weight: 600;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	  color: var(--color-accent);
	  margin-bottom: 0.75rem;
	  display: block;
	}

	.eyebrow a {
	  color: var(--color-accent);
	  text-decoration: none;
	}

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

	/* ===== PAGE HEADER ===== */
	.page-header {
	 
	  padding: 64px 0;
	}

  .page-header h1 {
    margin-bottom: 16px;
    font-style: italic;
}




    
    
    
    
    
    /* ===== SECTIONS ===== */
    .section {
      padding: 100px 0;
      clear: both;
    }
    
    .section-alt {
      background: var(--color-bg-alt);
    }
    
    .section-dark {
      background: var(--color-bg-dark);
      color: white;
      position: relative;
  
    }
    .section-dark:before{

    background-image: url(images/bg/textured.jpg);
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: .15;
    background-size: 50%;
    }

    .section-dark .container{
      position: relative;
      z-index: 1;
    }
    
    .section-dark h2 {
    color: #cdaf72;
}
    .section-dark p {
      color: rgba(255,255,255,0.8);
    }

    .section-bg-image {
      background-image: url(images/bg/about-bg.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    
    .text-light {
      color: #ccc!important;
    }
    .as-block{
      display: block;
    }
    .m-md-y {
      margin: 20px 0;;
    }
    .fa-sm:before{
      font-size: 18px;
      padding-right: 5px;
    }
    .fa-sm.text-success:before{
      color: #38a169!important;
    }
    .fa-sm.text-error:before {
      color: #e53e3e!important;
   
    }
    .fa-lg:before{
        font-size: 40px;

    }
    
    /* ===== TWO COLUMN LAYOUT ===== */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .two-col-half {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 64px;
      align-items: center;
    }
    
    /* ===== CARDS ===== */
    .card {
      background: rgb(255 255 255 / 50%);
      border: 1px solid var(--color-border);

      padding: 32px;
    }
    .card.no-style{
      box-shadow: none;
      border-radius: 0;
    }
    .card .badge {
      width: 60px;
      font-size: 30px;
      margin-bottom: 1rem;
      display: inline-block;
      padding: 7px 10px;
      background: #cdaf72;
      border-radius: 100px;
      height: 60px;
      text-align: center;
      color: #fff;
    }
    .card.bg-primary {
      background:#112546;
      border: 0;
      transition: ease-in all .3s;
    }
    .card.bg-primary:hover{
      background:#142c56;
    }
   
    .bg-white-50 {
      background: rgb(255 255 255 / 50%);
    }
    .card.no-style.bg-white-50{
        transition: ease-in all .3s;
    }
    .card.no-style.bg-white-50:hover{
      background:#fff;
  }
    .card.bg-primary .feature-list li {
      border-bottom:  solid #2d3a4d;
      color: #b2bcd1;
      font-weight: 300;
    }

    .card-wide h3{
      font-weight: 700;
      font-size: 24px;
    }
    
    .card h3 {
      margin-bottom: 12px;
    }

    .section-dark .card h3 {
      color: #333;
      font-weight: bold;
    }
    
    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    
    /* ===== FEATURE LIST ===== */
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .feature-list .fa:before{
      color: #0f294d;
    }
    
    .feature-list li {
      padding: 12px 0;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text-light);
    }
    
    .feature-list li:last-child {
      border-bottom: none;
    }
    
/* ===== STATS GRID ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat-item {
  padding: 24px;
}
.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.9375rem;
  color: var(--color-text-light);
}
/* ===== INTEGRATION GRID ===== */
.integration-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.integration-item {
  border: #1f3150 solid 1.5px;
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 0.9375rem;
  color: #1f3150;
  border-radius: 100px;
  font-weight: 500;
  background: #f8f8f8;
}
    /* ===== LOGO WALL ===== */
    .logo-wall {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px 48px;
      margin-top: 32px;
      position: relative;
      z-index: 1;
    }
    
    .logo-wall-item {
      color: var(--color-text-light);
      font-weight: 500;
      opacity: 0.7;
      cursor: pointer;
    }
    .logo-wall-item img{
        width: 150px;
    }

    .logo-wall-item:hover img {
       filter: brightness(0) invert(1);
    } 
    
    /* ===== TESTIMONIAL ===== */
    .testimonial {
      background: #ffffff;
    border-left: 3px solid var(--color-accent);
    padding: 32px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 10px #e1e1e1;
    }
    
    .testimonial blockquote {
      margin: 0 0 16px 0;
      font-style: italic;
      color: var(--color-text);
    }
    
    .testimonial cite {
      font-style: normal;
      color: var(--color-text-light);
      font-size: 0.875rem;
    }
    
/* ===== JOURNEY STEPS ===== */
.journey-step-number {
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.25rem;
}
/* ===== SUBPAGE NAV ===== */
.subpage-nav {
  display: flex;
  gap: 12px;
}
.subpage-nav a {
  display: block;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-radius: 6px;
  color: var(--color-text);
  font-weight: 500;
  transition: background 0.2s;
}
.subpage-nav a:hover {
  background: #1a283d;
  text-decoration: none;
}
/* ===== FORMS ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--font-main);
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}
    /* ===== FOOTER ===== */
    .footer {
      background: var(--color-bg-dark);
      color: rgba(255,255,255,0.7);
      padding: 64px 0 32px;
    }
    
    .footer h4 {
      color: white;
      margin-bottom: 16px;
      font-size: 1rem;
    }
    
    .footer a {
      color: rgba(255,255,255,0.7);
      display: block;
      margin-bottom: 8px;
    }
    
    .footer a:hover {
      color: white;
    }
    
    .footer-inner {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
    }
    
    .footer-tagline {
      font-size: 1.125rem;
      color: white;
      font-weight: 500;
      margin-bottom: 0.5rem;
    }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: 48px;
      padding-top: 24px;
      text-align: center;
      font-size: 0.875rem;
    }

    .flex{
      display: flex;
    }
    .flex-stretch{
      display: flex;
    }
    .flex-stretch > div{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .justify-center {
      align-items: center;
    }
    
    .font-size-md {
      font-size: 16px;

    }
    .font-size-lg {
      font-size: 32px;

    }

    .p-xs-r {
      padding-right: 5px;
  }
    .p-0-t{
      padding-top: 0;
    }
    .p-lg{
      padding: 40px;
    }
    .p-sm-r{
      padding-right: 10px;
    }
    .text-primary {
      color:  #0f294d;
    }
    .text-highlight {
      color:  #cdaf72;
    }
    .fa.text-highlight:before {
      color:  #cdaf72;
    }

    .bdr-radius-sm {
      border-radius: 8px;
      overflow: hidden;
    }
    
    /* ===== UTILITY CLASSES ===== */
    .text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
    .mb-md { margin-bottom: 24px; }
    .mb-lg { margin-bottom: 48px; }
    .mt-md { margin-top: 24px; }
    .mt-lg { margin-top: 48px; }
    .mt-xl { margin-top: 100px; }
    
    .visible-smxs {
        display: none;
      }
      .text-dark {
        color: #0f294d;
      }

      /*NEW*/
.bg-primary {
  background: #202a4f;
  color: #cdaf72;
}
.flex.grid-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* spacing between cards */
}
.flex.grid-4 > div{
  flex: 0 0 calc(25% - 24px); /* 4 columns */
}
.no-shadow{
  box-shadow: none;
}
.p-xl-y {
  padding-top: 60px;
  padding-bottom: 60px;
}
.p-lg-x {
  padding-left: 30px;
  padding-right: 30px;
}


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

    @media (min-width: 1920px) {
      .container {
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 24px;
        font-size: 20px;
      }
      .container.card{
          padding:40px;
      }
      .container-xl {
        max-width: 1920px;
      }
      .hero-content { 
        transform: translate(10%, 100%);
      }
      .card-wide h3 {
        font-size: 1.875rem;
      }
      .priscilla-image img{
        width: 93%;
      }
      .property-card img{
        height: 360px;

      }
      
    }
    @media (max-width: 1080px) {
      .section{
        padding:50px;
      }
      
      .as-block-smxs {
        display: block;
      }
      .p-0-t-smxs {
        padding-top: 0;
      }
      .p-0-b-smxs {
        padding-bottom: 0;
      }
      .p-sm-x-smxs{
        padding-left: 10px;
        padding-right: 10px;
      }
      .p-0-smxs {
        padding: 0;
      }
      .m-0-b-smxs {
        margin-bottom: 0;
      }
      .m-md-b-smxs {
        margin-bottom: 20px;
      }
      
      .section-bg-image {
        background: none !important;
        height: auto !important;
       }
       .section-bg-image:before{
         display: none;
       }
      .p-sm-y-smxs {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .p-md-y-smxs {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      .p-lg-y-smxs {
        padding-top: 80px;
        padding-bottom: 80px;
      }

      .hidden-smxs {
        display: none;
      }
      .visible-smxs {
        display: block;
      }
      .two-col, .two-col-half {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      
      .card-grid {
        grid-template-columns: 1fr;
      }
      
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0!important;
        background: none!important;
      }
      .stat-item {
        background: #fff;
      }
      .footer-inner {
        grid-template-columns: 1fr 1fr;
      }

      .hero-slideshow {
        height: 50vh;
      }
      .hero-slideshow::after {
        display: none;
      }
       .hero-indicators {
        bottom:20px;
      }
      .logo-tagline {
        display: none;
      }
      .flex.grid-4 > div{
        flex: 0 0 calc(50% - 24px); /* 4 columns */
      }
   
      .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 24px;
        border-bottom: 1px solid var(--color-border);
        gap: 16px;
      }
      .nav.active {
        display: flex;
      }
       .nav-toggle {
        display: block;
        font-size: 40px;
        position: relative;
        top: -2px;
        right: -15px;
      }
      .journey-step {
        display: block;
        padding: 0 40px;
        clear: both;
        float: left;
        width: 100%;
       }
       
      .journey-step-number {
        float: left;
       }
       
       .journey-step-content {
        float: left;
        width: 90%;
        padding-left: 20px;
        padding-bottom: 40px;
       } 
       .journey-step-image {
        height: auto;
        padding: 10px 0;
       }
       .border-container-alt {
        float: none;
        margin: 40px;
        display: block;
        clear: both;
      }
      .border-container-alt:before {
        left: 80px;
      }
      
 }


@media (max-width: 768px) {
        .section {
          padding: 40px 20px !important;
 
      }
      h1 { font-size: 2rem; }
      h2 { font-size: 1.5rem; }
     
      .m-md-b-xs {
        margin-bottom: 20px;
      }
      
      .logo-wall {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-top: 0;
        align-items: center;
    }
     

      
     .stats-grid {
         grid-template-columns: 1fr 1fr;
      }
      
      .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      
      

      .flex.grid-4 > div{
        flex: 0 0 calc(100%); 
      }
      .journey-step {
        padding: 0;
        text-align: center;
      }
      .journey-step-number {
        margin: 0 0 20px;
        float: none;
        margin: 0 auto 30px;
      }
      .journey-step-content {
        float: left;
        width: 90%;
        padding-left: 20px;
        padding-bottom: 40px;
      }
      .border-container-alt {
        margin: 20px;
      }
      .border-container-alt:before {
         left: 40px;
       }
       .journey-step-image {
        padding: 0;
       }

    }