html {
    scroll-behavior: smooth;
 }

body {
    font-family: "Exo 2", sans-serif;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
 }

 .s-lead {
    font-size: 1.25rem;
    font-weight: 450;
 }
 
 .multi-glow {
    color: #333;
    margin: 3rem;
    margin-bottom: 5rem !important;
    border-radius: 50%;
    font-size: 1.5em; /* Adjust the icon size */
    animation: glow 10s infinite alternate, breath 30s ease-in-out infinite;
 }

 hr.hexnode-dark,
 hr.hexnode-light {
    max-width: 30rem;
    padding: 0;
    text-align: center;
    border: none;
    border-top: solid 0.25rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid color;
    border-radius: 100%;
 }
 
 hr.hexnode-dark:after,
 hr.hexnode-light:after {
    position: relative;
    color: #fff; 
    top: -0.8em;
    display: inline-block;
    padding: 0 0.25em;
    content: "\e699";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2em;
 }

 hr.hexnode-light {
   border-color: #fff;
}

hr.hexnode-light:after {
   color: #fff;
   background-color: #0B132B;
}

hr.hexnode-dark {
   border-color: #0B132B;
}

hr.hexnode-dark:after {
   color: #0B132B;
   background-color: #fff;
}

hr.info-dark,
hr.info-light {
   max-width: 30rem;
   padding: 0;
   text-align: center;
   border: none;
   border-top: solid 0.25rem;
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid color;
   border-radius: 100%;
}

 hr.info-dark:after,
 hr.info-light:after {
    position: relative;
    top: -0.8em;
    display: inline-block;
    padding: 0 0.25em;
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2em;
 }
 
 hr.info-light {
   border-color: #fff;
}

hr.info-light:after {
   color: #fff;
   background-color: #0B132B;
}

hr.info-dark {
   border-color: #0B132B;
}

hr.info-dark:after {
   color: #0B132B;
   background-color: #fff;
}

hr.contact-dark,
hr.contact-light {
   max-width: 30rem;
   padding: 0;
   text-align: center;
   border: none;
   border-top: solid 0.25rem;
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid color;
   border-radius: 100%;
}

 hr.contact-dark:after,
 hr.contact-light:after {
    position: relative;
    top: -0.8em;
    display: inline-block;
    padding: 0 0.25em;
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2em;
 }
 
 hr.contact-light {
   border-color: #fff;
}

hr.contact-light:after {
   color: #fff;
   background-color: #0B132B;
}

hr.contact-dark {
   border-color: #0B132B;
}

hr.contact-dark:after {
   color: #0B132B;
   background-color: #fff;
}
 
 section {
    padding: 4rem 0;
 }
 
 section h2 {
    font-size: 2.25rem;
    line-height: 2rem;
 }
 
 @media (min-width: 992px) {
    section h2 {
       font-size: 3rem;
       line-height: 2.5rem;
    }
 }
 
 .btn-xl {
    padding: 1rem 1.75rem;
    font-size: 1.25rem;
 }
 
 .btn-social {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.25rem;
    line-height: 2rem;
 }
 
 .scroll-to-top {
    z-index: 1042;
    right: 1rem;
    bottom: 1rem;
    display: none;
 }
 
 .scroll-to-top a {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(33, 37, 41, 0.5);
    line-height: 3.1rem;
 }
 
 #mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
 }
 
 #mainNav .navbar-brand {
    color: #fff;
    font-weight: 800;
    font-family: "Exo 2", sans-serif !important;
 }
 
 #mainNav .navbar-brand-logo {
    color: #fff;
    font-weight: 800;
 }
 
 #mainNav .navbar-nav {
    margin-top: 1rem;
    letter-spacing: 0.0625rem;
 }
 
 #mainNav .navbar-nav li.nav-item a.nav-link {
    color: #fff;
 }
 
 #mainNav .navbar-nav li.nav-item a.nav-link:hover {
    color: #0B132B;
 }
 
 #mainNav .navbar-nav li.nav-item a.nav-link:active,
 #mainNav .navbar-nav li.nav-item a.nav-link:focus {
    color: #fff;
 }
 
 #mainNav .navbar-nav li.nav-item a.nav-link.active {
    color: #0B132B;
 }
 
 #mainNav .navbar-toggler {
    font-size: 80%;
    padding: 0.8rem;
 }
 
 @media (min-width: 992px) {
    #mainNav {
       padding-top: 1.5rem;
       padding-bottom: 1.5rem;
       -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
       transition: padding-top 0.3s, padding-bottom 0.3s;
    }
 
    #mainNav .navbar-brand {
       font-size: 2em;
       -webkit-transition: font-size 0.3s;
       transition: font-size 0.3s;
    }
 
    #mainNav .navbar-brand-logo {
       font-size: 2em;
       -webkit-transition: font-size 0.3s;
       transition: font-size 0.3s;
    }
 
    #mainNav .navbar-nav {
       margin-top: 0;
    }
 
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
       color: #fff;
       background: #0B132B;
    }
 
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active,
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus,
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
       color: #fff;
       background: #0B132B;
    }
 
    #mainNav.navbar-shrink {
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
    }
 
    #mainNav.navbar-shrink .navbar-brand {
       font-size: 1em;
    }
 }
 
 header.masthead {
    padding-top: calc(6rem + 72px);
    padding-bottom: 6rem;
 }
 
 header.masthead h1 {
    font-family: "Exo 2", sans-serif !important;
    font-size: 3rem;
    line-height: 3rem;
 }
 
 header.masthead h2 {
    font-size: 1.3rem;
    font-family: "Exo 2", sans-serif;
 }
 
 @media (min-width: 992px) {
    header.masthead {
       padding-top: calc(6rem + 106px);
       padding-bottom: 6rem;
    }
 
    header.masthead h1 {
       font-size: 4.75em;
       line-height: 4rem;
    }
 
    header.masthead h2 {
       font-size: 1.75em;
    }
 }
 
 .services {
    margin-bottom: -15px;
 }

 .services-item {
    margin-bottom: -15px;
 }
 
 .floating-label-form-group {
    position: relative;
    border-bottom: 1px solid #e9ecef;
 }
 
 .floating-label-form-group input,
 .floating-label-form-group textarea {
    font-size: 1.5em;
    position: relative;
    z-index: 1;
    padding-right: 0;
    padding-left: 0;
    resize: none;
    border: none;
    border-radius: 0;
    background: 0 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
 }
 
 .floating-label-form-group label {
    font-size: 0.85em;
    line-height: 1.764705882em;
    position: relative;
    z-index: 0;
    top: 2em;
    display: block;
    margin: 0;
    -webkit-transition: top 0.3s ease, opacity 0.3s ease;
    transition: top 0.3s ease, opacity 0.3s ease;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
 }
 
 .floating-label-form-group:not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #e9ecef;
 }
 
 .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
 }
 
 .floating-label-form-group-with-focus label {
    color: #0B132B;
 }
 
 form .row:first-child .floating-label-form-group {
    border-top: 1px solid #e9ecef;
 }
 
 .footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #1C2541;
    color: #fff;
 }
 
 .copyright {
    background-color: #0A1124;
 }
 
 a {
    color: #0B132B;
 }
 
 a:active,
 a:focus,
 a:hover {
    color: #0B132B;
 }
 
 .btn {
    border-width: 2px;
 }
 
 .bg-primary {
   background: linear-gradient(to bottom right, #0B132B 0%, #0B132B 70%, #1C2541 100%) !important;
}
 
 .bg-secondary {
    background-color: #1C2541 !important;
 }
 
 .text-primary {
    color: #0B132B !important;
 }
 
 .text-secondary {
    color: #1C2541 !important;
 }
 
 .btn-primary {
    background-color: #0B132B;
    border-color: #0B132B;
 }
 
 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
    background-color: #0B132B;
    border-color: #0B132B;
 }
 
 .btn-secondary {
    background-color: #1C2541;
    border-color: #1C2541;
 }
 
 .btn-secondary:active,
 .btn-secondary:focus,
 .btn-secondary:hover {
    background-color: #1a252f;
    border-color: #1a252f;
 }

 /* Breathing Effect and Animation */
 @keyframes breath {
    0%, 100% {
      transform: scale(0.94);
    }
    50% {
      transform: scale(1.06);
    }
 }
  
 /* Glowing Effect and Animation */
 @keyframes glow {
    0% {
      box-shadow: 0 0 10px 5px rgba(213, 45, 67, 0.5), 0 0 20px 7px rgba(68, 239, 242, 0.5), 0 0 25px 20px rgba(4, 8, 20, 0.5), 0 0 30px 25px rgba(125, 240, 159, 0.5), 0 0 35px 30px rgba(154, 255, 138, 0.5), 0 0 40px 35px rgba(247, 255, 122, 0.5);
    }
    20% {
      box-shadow: 5px 5px 15px 7px rgba(68, 239, 242, 0.5), -5px -5px 25px 10px rgba(125, 240, 159, 0.5), 10px 10px 30px 15px rgba(213, 45, 67, 0.5), -10px -10px 35px 20px rgba(4, 8, 20, 0.5), 15px 15px 40px 25px rgba(154, 255, 138, 0.5), -15px -15px 45px 30px rgba(247, 255, 122, 0.5);
    }
    40% {
      box-shadow: -10px -10px 20px 10px rgba(125, 240, 159, 0.5), 10px 10px 30px 15px rgba(213, 45, 67, 0.5), -5px -5px 25px 10px rgba(68, 239, 242, 0.5), 5px 5px 35px 20px rgba(4, 8, 20, 0.5), -15px -15px 40px 25px rgba(154, 255, 138, 0.5), 15px 15px 45px 30px rgba(247, 255, 122, 0.5);
    }
    60% {
      box-shadow: 10px 10px 15px 7px rgba(213, 45, 67, 0.5), -10px -10px 25px 10px rgba(4, 8, 20, 0.5), 5px 5px 20px 5px rgba(125, 240, 159, 0.5), -5px -5px 30px 15px rgba(68, 239, 242, 0.5), 15px 15px 35px 20px rgba(154, 255, 138, 0.5), -15px -15px 40px 25px rgba(247, 255, 122, 0.5);
    }
    80% {
      box-shadow: -5px -5px 10px 5px rgba(4, 8, 20, 0.5), 5px 5px 20px 7px rgba(154, 255, 138, 0.5), -10px -10px 25px 10px rgba(247, 255, 122, 0.5), 10px 10px 30px 15px rgba(125, 240, 159, 0.5), -15px -15px 35px 20px rgba(213, 45, 67, 0.5), 15px 15px 40px 25px rgba(68, 239, 242, 0.5);
    }
    100% {
      box-shadow: 0 0 10px 5px rgba(213, 45, 67, 0.5), 0 0 20px 7px rgba(68, 239, 242, 0.5), 0 0 25px 20px rgba(4, 8, 20, 0.5), 0 0 30px 25px rgba(125, 240, 159, 0.5), 0 0 35px 30px rgba(154, 255, 138, 0.5), 0 0 40px 35px rgba(247, 255, 122, 0.5);
    }
 }

 /* Responsive Logo */
 .logo-responsive {
    width: 100%;
    max-width: 200px; /* Adjust as needed */
    height: auto;
 }
 
 @media (min-width: 992px) {
    .logo-responsive {
       max-width: 300px; /* Adjust as needed */
    }
 }

 /* === Styles moved from index.html inline <style> block === */

 /* Apply Fonts */
 body {
    font-family: 'Exo 2', sans-serif; /* Body font */
    background-color: #f8f9fa; /* Bootstrap light gray background */
 }
 h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* Heading font */
 }

 /* Background Gradient for Cards */
 .bg-primary-gradient { /* Renamed to avoid conflict with Bootstrap's .bg-primary */
    background: linear-gradient(to bottom right, #0B132B 0%, #0B132B 70%, #1C2541 100%);
    border: none; /* Remove default card border */
 }

 /* Custom light text color utility */
 .text-custom-light {
    color: #E0E0E0; /* Light gray for primary text on dark background */
 }
 .text-custom-lighter {
    color: #B0B0B0; /* Lighter gray for secondary text/descriptions */
 }
 .text-custom-white {
     color: #FFFFFF; /* White for main headings */
 }

 /* Category Icon Container */
 .category-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 50%; /* Bootstrap class equivalent: rounded-circle */
    /* Background color applied via class */
 }
 .category-icon-container svg {
    width: 1.75em;
    height: 1.75em;
 }
 /* Icon background colors (using rgba for transparency) */
 .bg-icon-blue { background-color: rgba(96, 165, 250, 0.2); } /* blue-400 with 20% opacity */
 .bg-icon-green { background-color: rgba(74, 222, 128, 0.2); } /* green-400 with 20% opacity */
 .bg-icon-purple { background-color: rgba(192, 132, 252, 0.2); } /* purple-400 with 20% opacity */
 .bg-icon-yellow { background-color: rgba(250, 204, 21, 0.2); } /* yellow-400 with 20% opacity */
 .bg-icon-red { background-color: rgba(248, 113, 113, 0.2); } /* red-400 with 20% opacity */
 .bg-icon-indigo { background-color: rgba(129, 140, 248, 0.2); } /* indigo-400 with 20% opacity */
 .bg-icon-emerald { background-color: rgba(52, 211, 153, 0.2); } /* emerald-400 with 20% opacity */
 .bg-icon-rose { background-color: rgba(251, 113, 133, 0.2); } /* rose-400 with 20% opacity */
 .bg-icon-amber { background-color: rgba(251, 191, 36, 0.2); } /* amber-400 with 20% opacity */
 .bg-icon-cyan { background-color: rgba(103, 232, 249, 0.2); } /* cyan-300 with 20% opacity */
 .bg-icon-lime { background-color: rgba(163, 230, 53, 0.2); } /* lime-400 with 20% opacity */

 /* Section Title Icon Container */
 .section-title-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
 }
 .section-title-icon-container svg {
     width: 2em;
     height: 2em;
     color: #0d6efd; /* Bootstrap primary blue */
 }

 /* Service List Item Styling */
 .service-list { /* Added class to ul */
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
 }
 .service-list li {
    /* Using Bootstrap flex utilities directly on li */
    margin-bottom: 0.85rem;
    line-height: 1.6;
    color: #E0E0E0; /* Default list item text color */
 }
 .service-list li svg {
    width: 1.2em;
    height: 1.2em;
   /* margin-right applied using Bootstrap class me-3 */
    margin-top: 0.2em; /* Adjust vertical alignment slightly */
    flex-shrink: 0;
    color: #67e8f9; /* Default icon color (Tailwind cyan-300) */
 }

 /* Specific icon colors */
 .icon-blue { color: #60a5fa; } /* blue-400 */
 .icon-green { color: #4ade80; } /* green-400 */
 .icon-purple { color: #c084fc; } /* purple-400 */
 .icon-yellow { color: #facc15; } /* yellow-400 */
 .icon-red { color: #f87171; } /* red-400 */
 .icon-indigo { color: #818cf8; } /* indigo-400 */
 .icon-emerald { color: #34d399; } /* emerald-400 */
 .icon-rose { color: #fb7185; } /* rose-400 */
 .icon-amber { color: #fbbf24; } /* amber-400 */
 .icon-cyan { color: #67e8f9; } /* cyan-300 */
 .icon-lime { color: #a3e635; } /* lime-400 */

 /* Ensure cards in a row have same height */
 .card {
    height: 100%;
 }