h1,h2,h3,h4,p,a
{
    font-family: "Poppins", serif !important;
    padding:0;
    margin:0;
}
p
{
    margin-bottom:0 !important;
}

li
{
    font-family: "Poppins", serif !important;
}
.header-section
{
    background:#003366 !important;
    padding:25px 0 !important;
}
.nav-link
{
    color:#fff !important;
    text-transform:uppercase;
    letter-spacing:0.02em;
}
.nav-button
{
    background:#007acc !important;
    border-radius:10px;
    padding:10px 20px !important;
    font-weight:600;
    letter-spacing:0.02em;
}
.navbar-nav
{
    display:flex;
    gap:10px;
    align-items:center;
    align-content:center;

}
.navbar-brand
{
    font-weight:bold;
    font-size:20px !important;
    letter-spacing:0.05em;
    i
    {
        color:#66a3ff;
        font-style:normal;
    }
}
.section-hero
{
    background-image:url(../img/hero.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    background-position:center;
    height:70vh;
    position:relative;
    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;
    &:after
    {
        position:absolute;
        top:0;
        left:0;
        content:"";
        width:100%;
        height:100%;
        background:rgba(0, 80, 158, 0.5);
    }
    .hero-content
    {
        position:relative;
        z-index:1;
        text-align:center;
        width:80%;
        margin:0 auto;
        h2
        {
            color:#fff;
            font-size:60px;
            text-shadow:rgba(0,0,0,0.2) 0 0 4px;
        }
    }
    @media only screen and (max-width: 768px)
    {
        height:70vh;
        .hero-content
        {
            position:relative;
            z-index:1;
            text-align:center;
            width:80%;
            margin:0 auto;
            h2
            {
                color:#fff;
                font-size:30px;
                text-shadow:rgba(0,0,0,0.2) 0 0 4px;
            }
        }
    }
    
}
.section-about
{
    background:#fff !important;
    padding:10vh 0;
}
.section-about img
{
    border-radius:20px;
}
.section-about-content
{
    padding-left:20px;
}
@media only screen and (max-width: 768px)
{
    .section-about-content
    {
        margin-top:30px;
    }
}
.section-style
{

}
.section-style h2
{
    font-size:30px;
    padding-bottom:20px;
}
.section-style p
{
    font-size:16px;
    padding-bottom:15px;
}
.section-style p:last-child
{
    padding-bottom:0;
}
.btn-primary
{
    background:#007acc !important;
}
.section-services
{
    background:#cce0ff;
    padding:10vh 0;
}
.section-footer
{
    background:#003366;
    padding:20px 0;
}
@media only screen and (max-width: 768px)
{
    .section-footer
    {
        padding:20px 30px;
    }
}

.services-offered
{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    @media only screen and (max-width: 768px)
    {
        grid-template-columns:repeat(1, 1fr);
    }

    grid-gap:20px;
    margin-top:30px;
}
.center-button
{
    margin-top:30px;
    text-align:center;
}
.services-offered .service-box 
{
    background: #f8f9fa;
    padding:30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.services-offered .service-box h4
{
    font-size:20px;
    padding-bottom:20px;
    
    font-weight:600;
}
.services-offered .service-box ul
{
    padding:0;
    margin:0 20px;
}
.services-offered .service-box ul li
{
    padding-bottom:5px;
    font-size:16px;
    opacity:0.8;
}
.services-offered .service-box .service-icon
{
    margin-bottom:20px;
}
.services-offered .service-box .service-icon img
{
    width:50px;
}


/* About Us */
.hero-section
{
    background:#66a3ff url(../img/about-hero.jpg) no-repeat center;
    background-size:cover;
    padding:7vh 0;
    position:relative;
    &:after
    {
        position:absolute;
        top:0;
        left:0;
        content:"";
        width:100%;
        height:100%;
        background:rgba(0, 80, 158, 0.9);
    }
    h1,h2,h3,h4,p
    {
        position:relative !important;
        z-index:1 !important;
        color:#fff;
    }
}


/* Section Focus areas */
.section-focus-areas
{
    background:#cce0ff;
    padding:10vh 0;
    .focus-areas
    {
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-gap:20px;
        @media only screen and (max-width: 768px)
        {
            grid-template-columns:repeat(1, 1fr);
        } 
        .focus-box
        {
            background: #f8f9fa;
            padding:30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            h4
            {
                font-size:20px;
                padding-bottom:10px;
            }
            p
            {
               font-size:16px;
               opacity:0.8;
            }

        }
    }
}

.section-white
{
    background:#fff !important;
    .service-box
    {
        border:1px solid rgba(0, 51, 102, 0.2);
    }
}


.section-disclaimer
{
    background:#fff;
    padding:7vh 0;
}



/* Reset: include padding & border in width */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  :root {
    --gap: 16px;         /* space between popup and button */
    --btn-h: 56px;       /* will be updated by JS */
    --card-w: 360px;     /* popup width */
  }

  body {
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    background: #f5f7fb;
  }

  /* Contact Me Button */
  .contact-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-height: 48px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(135deg, #0d6efd, #0957d0);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 10px 20px rgba(13,110,253,.25);
    transition: transform .2s, box-shadow .2s;
    z-index: 1002;
  }
  .contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(13,110,253,.28);
  }

  /* Popup */
  .popup {
    position: fixed;
    right: 20px;
    bottom: calc(20px + var(--btn-h) + var(--gap));
    width: min(92vw, var(--card-w));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    padding: 22px;
    display: none;
    z-index: 1001;
    animation: rise .28s ease both;
    overflow: hidden;   /* prevent scrollbars */
  }
  @keyframes rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* Header */
  .popup h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #222;
  }

  /* Close button */
  .popup .close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    padding: 4px;
    border-radius: 8px;
  }
  .popup .close:hover {
    background: #f1f3f9;
    color: #111;
  }

  /* Form fields */
  .field {
    margin-top: 12px;
  }
  .label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
  }
  .input, .select {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #d5d9e2;
    background: #f9fafb;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .input:focus, .select:focus {
    outline: none;
    border-color: #0d6efd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
  }

  /* Submit button */
  .submit {
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, #0d6efd, #0957d0);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 20px rgba(13,110,253,.22);
    transition: transform .2s, box-shadow .2s;
  }
  .submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(13,110,253,.25);
  }

  /* Mobile responsive */
  @media (max-width: 480px) {
    .popup {
      right: max(12px, env(safe-area-inset-right));
      left:  max(12px, env(safe-area-inset-left));
      width: auto;
    }
  }