:root {
            --mainblue: #171749;
            --mainpink: #e73451;
        }
        @font-face {
            font-family: 'HalyardFontReg'; /* Choose a unique name for your font */
            src: url('../assets/halyard/halyard_display_regular.otf') format('otf'); /* Path to your font files */
            font-weight: normal; /* Define font weight if applicable (e.g., normal, bold, 400, 700) */
            font-style: normal; /* Define font style if applicable (e.g., normal, italic) */
        }  
        *{
            font-family: 'HalyardFontReg',sans-serif;
            
        }      
        body { 
            scroll-behavior: smooth; 
            font-family: 'HalyardFontReg',sans-serif;
        }
        h1,h2,h3,h4,h5,h6{
            font-family: 'HalyardFontReg',sans-serif;
        }
        .modal-content {
            background: url('../media/modal-bg-soft.svg');
            background-size: cover;
            background-position: center;
            border-radius: 1rem;
        }
       

        .btn-mainblue {
            background-color: var(--mainblue);
            color: #fff;
        }

        .btn-mainpink{
            background-color: var(--mainpink);
            color: #fff;
        }

        .text-mainpink{
            color: var(--mainpink) !important;
            font-family: 'HalyardFontReg',sans-serif;
        }

        .text-mainblue {
                 color: var(--mainblue) !important;
                 font-family: 'HalyardFontReg',sans-serif;
        }
        .hero {
            background: url("../media/hero.jpg") center/cover no-repeat;
             padding: 160px 0; /* increase padding */
            min-height: 85vh; /* Add this line */
            color: #fff;
        }
        .section-title {
            font-weight: 700;
            margin-bottom: 20px;
        }
        .service-card:hover {
            transform: translateY(-6px);
            transition: 0.3s ease;
        }
        .impact-list i {
            color: #E73451;
            font-size: 1.3rem;
        }
.photo{
      width:220px; height:220px;           /* smaller than reference */
      border-radius:50%;
      object-fit:cover;
      display:block; margin:0 auto 12px;
      border:1px solid var(--k-mist);
      box-shadow:0 10px 22px rgba(0,14,76,.08);
      background:#fff;
    }        
.frame7-wrap{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 534 / 634;   /* keeps same proportions as Frame7 */
  background: #fff;
  overflow: hidden;
}

/* shared triangle styles */
.tri{
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Top-left big triangle (points down) */
.tri-top-left{
  left: 0;
  top: 0;
  width: 70%;
  height: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Bottom-left big triangle (points up) */
.tri-bottom-left{
  left: 0;
  bottom: 0;
  width: 70%;
  height: 50%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Middle-right triangle (points right) */
.tri-mid-right{
  right: 5%;
  top: 5%;
  width: 100%;
  height: 100%;
  clip-path: polygon(70% 0, 100% 50%, 0 100%);
}

/* SVG overlay for outlines + red triangles */
.overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
footer {
   background: #000E4C;
   color: #fff;
   padding: 40px 0;
}
.service-card {
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}

.service-card .btn {
    margin-top: auto;
    align-self: center;
    display: block;
    width: 75%;
    border-radius: .75rem .75rem 0 0;
    padding: 10px 0;
}