body {
          font-family: 'Poppins', sans-serif;
          scroll-behavior: smooth;
      }

      .gradient-bg {
          background: linear-gradient(135deg, #0061a8 0%, #003b6f 100%);
      }

      .service-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .nav-link {
          position: relative;
      }

      .nav-link::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -2px;
          left: 0;
          background-color: #0061a8;
          transition: width 0.3s ease;
      }

      .nav-link:hover::after {
          width: 100%;
      }

      .hero-wave {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          overflow: hidden;
          line-height: 0;
      }

      .hero-wave svg {
          position: relative;
          display: block;
          width: calc(100% + 1.3px);
          height: 80px;
      }

      .hero-wave .shape-fill {
          fill: #FFFFFF;
      }

      *,
      ::before,
      ::after {
          --tw-border-spacing-x: 0;
          --tw-border-spacing-y: 0;
          --tw-translate-x: 0;
          --tw-translate-y: 0;
          --tw-rotate: 0;
          --tw-skew-x: 0;
          --tw-skew-y: 0;
          --tw-scale-x: 1;
          --tw-scale-y: 1;
          --tw-pan-x: ;
          --tw-pan-y: ;
          --tw-pinch-zoom: ;
          --tw-scroll-snap-strictness: proximity;
          --tw-gradient-from-position: ;
          --tw-gradient-via-position: ;
          --tw-gradient-to-position: ;
          --tw-ordinal: ;
          --tw-slashed-zero: ;
          --tw-numeric-figure: ;
          --tw-numeric-spacing: ;
          --tw-numeric-fraction: ;
          --tw-ring-inset: ;
          --tw-ring-offset-width: 0px;
          --tw-ring-offset-color: #fff;
          --tw-ring-color: rgb(59 130 246 / 0.5);
          --tw-ring-offset-shadow: 0 0 #0000;
          --tw-ring-shadow: 0 0 #0000;
          --tw-shadow: 0 0 #0000;
          --tw-shadow-colored: 0 0 #0000;
          --tw-blur: ;
          --tw-brightness: ;
          --tw-contrast: ;
          --tw-grayscale: ;
          --tw-hue-rotate: ;
          --tw-invert: ;
          --tw-saturate: ;
          --tw-sepia: ;
          --tw-drop-shadow: ;
          --tw-backdrop-blur: ;
          --tw-backdrop-brightness: ;
          --tw-backdrop-contrast: ;
          --tw-backdrop-grayscale: ;
          --tw-backdrop-hue-rotate: ;
          --tw-backdrop-invert: ;
          --tw-backdrop-opacity: ;
          --tw-backdrop-saturate: ;
          --tw-backdrop-sepia: ;
          --tw-contain-size: ;
          --tw-contain-layout: ;
          --tw-contain-paint: ;
          --tw-contain-style:
      }

      ::backdrop {
          --tw-border-spacing-x: 0;
          --tw-border-spacing-y: 0;
          --tw-translate-x: 0;
          --tw-translate-y: 0;
          --tw-rotate: 0;
          --tw-skew-x: 0;
          --tw-skew-y: 0;
          --tw-scale-x: 1;
          --tw-scale-y: 1;
          --tw-pan-x: ;
          --tw-pan-y: ;
          --tw-pinch-zoom: ;
          --tw-scroll-snap-strictness: proximity;
          --tw-gradient-from-position: ;
          --tw-gradient-via-position: ;
          --tw-gradient-to-position: ;
          --tw-ordinal: ;
          --tw-slashed-zero: ;
          --tw-numeric-figure: ;
          --tw-numeric-spacing: ;
          --tw-numeric-fraction: ;
          --tw-ring-inset: ;
          --tw-ring-offset-width: 0px;
          --tw-ring-offset-color: #fff;
          --tw-ring-color: rgb(59 130 246 / 0.5);
          --tw-ring-offset-shadow: 0 0 #0000;
          --tw-ring-shadow: 0 0 #0000;
          --tw-shadow: 0 0 #0000;
          --tw-shadow-colored: 0 0 #0000;
          --tw-blur: ;
          --tw-brightness: ;
          --tw-contrast: ;
          --tw-grayscale: ;
          --tw-hue-rotate: ;
          --tw-invert: ;
          --tw-saturate: ;
          --tw-sepia: ;
          --tw-drop-shadow: ;
          --tw-backdrop-blur: ;
          --tw-backdrop-brightness: ;
          --tw-backdrop-contrast: ;
          --tw-backdrop-grayscale: ;
          --tw-backdrop-hue-rotate: ;
          --tw-backdrop-invert: ;
          --tw-backdrop-opacity: ;
          --tw-backdrop-saturate: ;
          --tw-backdrop-sepia: ;
          --tw-contain-size: ;
          --tw-contain-layout: ;
          --tw-contain-paint: ;
          --tw-contain-style:
      }

      /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          border-width: 0;
          border-style: solid;
          border-color: #e5e7eb
      }

      ::after,
      ::before {
          --tw-content: ''
      }

      :host,
      html {
          line-height: 1.5;
          -webkit-text-size-adjust: 100%;
          -moz-tab-size: 4;
          tab-size: 4;
          font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          font-feature-settings: normal;
          font-variation-settings: normal;
          -webkit-tap-highlight-color: transparent
      }

      body {
          margin: 0;
          line-height: inherit
      }

      hr {
          height: 0;
          color: inherit;
          border-top-width: 1px
      }

      abbr:where([title]) {
          -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
          font-size: inherit;
          font-weight: inherit
      }

      a {
          color: inherit;
          text-decoration: inherit
      }

      b,
      strong {
          font-weight: bolder
      }

      code,
      kbd,
      pre,
      samp {
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
          font-feature-settings: normal;
          font-variation-settings: normal;
          font-size: 1em
      }

      small {
          font-size: 80%
      }

      sub,
      sup {
          font-size: 75%;
          line-height: 0;
          position: relative;
          vertical-align: baseline
      }

      sub {
          bottom: -.25em
      }

      sup {
          top: -.5em
      }

      table {
          text-indent: 0;
          border-color: inherit;
          border-collapse: collapse
      }

      button,
      input,
      optgroup,
      select,
      textarea {
          font-family: inherit;
          font-feature-settings: inherit;
          font-variation-settings: inherit;
          font-size: 100%;
          font-weight: inherit;
          line-height: inherit;
          letter-spacing: inherit;
          color: inherit;
          margin: 0;
          padding: 0
      }

      button,
      select {
          text-transform: none
      }

      button,
      input:where([type=button]),
      input:where([type=reset]),
      input:where([type=submit]) {
          -webkit-appearance: button;
          background-color: transparent;
          background-image: none
      }

      :-moz-focusring {
          outline: auto
      }

      :-moz-ui-invalid {
          box-shadow: none
      }

      progress {
          vertical-align: baseline
      }

      ::-webkit-inner-spin-button,
      ::-webkit-outer-spin-button {
          height: auto
      }

      [type=search] {
          -webkit-appearance: textfield;
          outline-offset: -2px
      }

      ::-webkit-search-decoration {
          -webkit-appearance: none
      }

      ::-webkit-file-upload-button {
          -webkit-appearance: button;
          font: inherit
      }

      summary {
          display: list-item
      }

      blockquote,
      dd,
      dl,
      figure,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      hr,
      p,
      pre {
          margin: 0
      }

      fieldset {
          margin: 0;
          padding: 0
      }

      legend {
          padding: 0
      }

      menu,
      ol,
      ul {
          list-style: none;
          margin: 0;
          padding: 0
      }

      dialog {
          padding: 0
      }

      textarea {
          resize: vertical
      }

      input::placeholder,
      textarea::placeholder {
          opacity: 1;
          color: #9ca3af
      }

      [role=button],
      button {
          cursor: pointer
      }

      :disabled {
          cursor: default
      }

      audio,
      canvas,
      embed,
      iframe,
      img,
      object,
      svg,
      video {
          display: block;
          vertical-align: middle
      }

      img,
      video {
          max-width: 100%;
          height: auto
      }

      [hidden]:where(:not([hidden=until-found])) {
          display: none
      }

      .container {
          width: 100%
      }

      @media (min-width: 640px) {
          .container {
              max-width: 640px
          }
      }

      @media (min-width: 768px) {
          .container {
              max-width: 768px
          }
      }

      @media (min-width: 1024px) {
          .container {
              max-width: 1024px
          }
      }

      @media (min-width: 1280px) {
          .container {
              max-width: 1280px
          }
      }

      @media (min-width: 1536px) {
          .container {
              max-width: 1536px
          }
      }

      .fixed {
          position: fixed
      }

      .relative {
          position: relative
      }

      .z-10 {
          z-index: 10
      }

      .mx-auto {
          margin-left: auto;
          margin-right: auto
      }

      .mb-1 {
          margin-bottom: 0.25rem
      }

      .mb-10 {
          margin-bottom: 2.5rem
      }

      .mb-16 {
          margin-bottom: 4rem
      }

      .mb-2 {
          margin-bottom: 0.5rem
      }

      .mb-3 {
          margin-bottom: 0.75rem
      }

      .mb-4 {
          margin-bottom: 1rem
      }

      .mb-6 {
          margin-bottom: 1.5rem
      }

      .mb-8 {
          margin-bottom: 2rem
      }

      .ml-1 {
          margin-left: 0.25rem
      }

      .ml-2 {
          margin-left: 0.5rem
      }

      .mr-2 {
          margin-right: 0.5rem
      }

      .mr-3 {
          margin-right: 0.75rem
      }

      .mr-4 {
          margin-right: 1rem
      }

      .mt-12 {
          margin-top: 3rem
      }

      .mt-4 {
          margin-top: 1rem
      }

      .block {
          display: block
      }

      .inline-block {
          display: inline-block
      }

      .flex {
          display: flex
      }

      .inline-flex {
          display: inline-flex
      }

      .grid {
          display: grid
      }

      .hidden {
          display: none
      }

      .h-10 {
          height: 2.5rem
      }

      .h-12 {
          height: 3rem
      }

      .h-16 {
          height: 4rem
      }

      .h-20 {
          height: 5rem
      }

      .h-4 {
          height: 1rem
      }

      .h-48 {
          height: 12rem
      }

      .h-5 {
          height: 1.25rem
      }

      .h-6 {
          height: 1.5rem
      }

      .h-8 {
          height: 2rem
      }

      .w-10 {
          width: 2.5rem
      }

      .w-12 {
          width: 3rem
      }

      .w-16 {
          width: 4rem
      }

      .w-20 {
          width: 5rem
      }

      .w-4 {
          width: 1rem
      }

      .w-5 {
          width: 1.25rem
      }

      .w-6 {
          width: 1.5rem
      }

      .w-8 {
          width: 2rem
      }

      .w-full {
          width: 100%
      }

      .max-w-2xl {
          max-width: 42rem
      }

      .max-w-md {
          max-width: 28rem
      }

      .shrink-0 {
          flex-shrink: 0
      }

      .grid-cols-1 {
          grid-template-columns: repeat(1, minmax(0, 1fr))
      }

      .grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .flex-col {
          flex-direction: column
      }

      .flex-wrap {
          flex-wrap: wrap
      }

      .items-start {
          align-items: flex-start
      }

      .items-center {
          align-items: center
      }

      .justify-center {
          justify-content: center
      }

      .justify-between {
          justify-content: space-between
      }

      .gap-2 {
          gap: 0.5rem
      }

      .gap-4 {
          gap: 1rem
      }

      .gap-8 {
          gap: 2rem
      }

      .space-x-4> :not([hidden])~ :not([hidden]) {
          --tw-space-x-reverse: 0;
          margin-right: calc(1rem * var(--tw-space-x-reverse));
          margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
      }

      .space-x-8> :not([hidden])~ :not([hidden]) {
          --tw-space-x-reverse: 0;
          margin-right: calc(2rem * var(--tw-space-x-reverse));
          margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
      }

      .space-y-4> :not([hidden])~ :not([hidden]) {
          --tw-space-y-reverse: 0;
          margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
          margin-bottom: calc(1rem * var(--tw-space-y-reverse))
      }

      .space-y-6> :not([hidden])~ :not([hidden]) {
          --tw-space-y-reverse: 0;
          margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
          margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
      }

      .overflow-hidden {
          overflow: hidden
      }

      .rounded {
          border-radius: 0.25rem
      }

      .rounded-full {
          border-radius: 9999px
      }

      .rounded-lg {
          border-radius: 0.5rem
      }

      .rounded-md {
          border-radius: 0.375rem
      }

      .border {
          border-width: 1px
      }

      .border-2 {
          border-width: 2px
      }

      .border-gray-300 {
          --tw-border-opacity: 1;
          border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
      }

      .border-white {
          --tw-border-opacity: 1;
          border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
      }

      .bg-blue-100 {
          --tw-bg-opacity: 1;
          background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
      }

      .bg-blue-800 {
          --tw-bg-opacity: 1;
          background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1))
      }

      .bg-gray-50 {
          --tw-bg-opacity: 1;
          background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
      }

      .bg-gray-800 {
          --tw-bg-opacity: 1;
          background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
      }

      .bg-green-100 {
          --tw-bg-opacity: 1;
          background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1))
      }

      .bg-white {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
      }

      .bg-gradient-to-r {
          background-image: linear-gradient(to right, var(--tw-gradient-stops))
      }

      .from-blue-600 {
          --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
      }

      .from-blue-700 {
          --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
      }

      .from-blue-800 {
          --tw-gradient-from: #1e40af var(--tw-gradient-from-position);
          --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
      }

      .to-blue-400 {
          --tw-gradient-to: #60a5fa var(--tw-gradient-to-position)
      }

      .to-blue-500 {
          --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)
      }

      .to-blue-600 {
          --tw-gradient-to: #2563eb var(--tw-gradient-to-position)
      }

      .p-4 {
          padding: 1rem
      }

      .p-6 {
          padding: 1.5rem
      }

      .p-8 {
          padding: 2rem
      }

      .px-2\.5 {
          padding-left: 0.625rem;
          padding-right: 0.625rem
      }

      .px-4 {
          padding-left: 1rem;
          padding-right: 1rem
      }

      .px-6 {
          padding-left: 1.5rem;
          padding-right: 1.5rem
      }

      .py-0\.5 {
          padding-top: 0.125rem;
          padding-bottom: 0.125rem
      }

      .py-12 {
          padding-top: 3rem;
          padding-bottom: 3rem
      }

      .py-16 {
          padding-top: 4rem;
          padding-bottom: 4rem
      }

      .py-2 {
          padding-top: 0.5rem;
          padding-bottom: 0.5rem
      }

      .py-3 {
          padding-top: 0.75rem;
          padding-bottom: 0.75rem
      }

      .pb-20 {
          padding-bottom: 5rem
      }

      .pb-4 {
          padding-bottom: 1rem
      }

      .pt-24 {
          padding-top: 6rem
      }

      .text-center {
          text-align: center
      }

      .text-2xl {
          font-size: 1.5rem;
          line-height: 2rem
      }

      .text-3xl {
          font-size: 1.875rem;
          line-height: 2.25rem
      }

      .text-4xl {
          font-size: 2.25rem;
          line-height: 2.5rem
      }

      .text-lg {
          font-size: 1.125rem;
          line-height: 1.75rem
      }

      .text-sm {
          font-size: 0.875rem;
          line-height: 1.25rem
      }

      .text-xl {
          font-size: 1.25rem;
          line-height: 1.75rem
      }

      .text-xs {
          font-size: 0.75rem;
          line-height: 1rem
      }

      .font-bold {
          font-weight: 700
      }

      .font-medium {
          font-weight: 500
      }

      .font-semibold {
          font-weight: 600
      }

      .italic {
          font-style: italic
      }

      .text-blue-800 {
          --tw-text-opacity: 1;
          color: rgb(30 64 175 / var(--tw-text-opacity, 1))
      }

      .text-gray-400 {
          --tw-text-opacity: 1;
          color: rgb(156 163 175 / var(--tw-text-opacity, 1))
      }

      .text-gray-500 {
          --tw-text-opacity: 1;
          color: rgb(107 114 128 / var(--tw-text-opacity, 1))
      }

      .text-gray-600 {
          --tw-text-opacity: 1;
          color: rgb(75 85 99 / var(--tw-text-opacity, 1))
      }

      .text-gray-700 {
          --tw-text-opacity: 1;
          color: rgb(55 65 81 / var(--tw-text-opacity, 1))
      }

      .text-gray-800 {
          --tw-text-opacity: 1;
          color: rgb(31 41 55 / var(--tw-text-opacity, 1))
      }

      .text-green-700 {
          --tw-text-opacity: 1;
          color: rgb(21 128 61 / var(--tw-text-opacity, 1))
      }

      .text-white {
          --tw-text-opacity: 1;
          color: rgb(255 255 255 / var(--tw-text-opacity, 1))
      }

      .text-yellow-400 {
          --tw-text-opacity: 1;
          color: rgb(250 204 21 / var(--tw-text-opacity, 1))
      }

      .opacity-90 {
          opacity: 0.9
      }

      .shadow-md {
          --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
          --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow-sm {
          --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
          --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .transition {
          transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
          transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
          transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 150ms
      }

      .duration-300 {
          transition-duration: 300ms
      }

      .hover\:bg-blue-700:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
      }

      .hover\:bg-gray-100:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
      }

      .hover\:bg-white:hover {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
      }

      .hover\:text-blue-800:hover {
          --tw-text-opacity: 1;
          color: rgb(30 64 175 / var(--tw-text-opacity, 1))
      }

      .hover\:text-white:hover {
          --tw-text-opacity: 1;
          color: rgb(255 255 255 / var(--tw-text-opacity, 1))
      }

      .hover\:underline:hover {
          -webkit-text-decoration-line: underline;
          text-decoration-line: underline
      }

      .focus\:border-blue-500:focus {
          --tw-border-opacity: 1;
          border-color: rgb(59 130 246 / var(--tw-border-opacity, 1))
      }

      .focus\:outline-none:focus {
          outline: 2px solid transparent;
          outline-offset: 2px
      }

      .focus\:ring-2:focus {
          --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
          --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
      }

      .focus\:ring-blue-500:focus {
          --tw-ring-opacity: 1;
          --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))
      }

      @media (min-width: 640px) {
          .sm\:flex-row {
              flex-direction: row
          }

          .sm\:space-x-4> :not([hidden])~ :not([hidden]) {
              --tw-space-x-reverse: 0;
              margin-right: calc(1rem * var(--tw-space-x-reverse));
              margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
          }

          .sm\:space-y-0> :not([hidden])~ :not([hidden]) {
              --tw-space-y-reverse: 0;
              margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
              margin-bottom: calc(0px * var(--tw-space-y-reverse))
          }
      }

      @media (min-width: 768px) {
          .md\:mb-0 {
              margin-bottom: 0px
          }

          .md\:inline-block {
              display: inline-block
          }

          .md\:flex {
              display: flex
          }

          .md\:hidden {
              display: none
          }

          .md\:w-1\/2 {
              width: 50%
          }

          .md\:grid-cols-2 {
              grid-template-columns: repeat(2, minmax(0, 1fr))
          }

          .md\:flex-row {
              flex-direction: row
          }

          .md\:py-24 {
              padding-top: 6rem;
              padding-bottom: 6rem
          }

          .md\:pb-32 {
              padding-bottom: 8rem
          }

          .md\:pl-10 {
              padding-left: 2.5rem
          }

          .md\:pr-10 {
              padding-right: 2.5rem
          }

          .md\:pt-32 {
              padding-top: 8rem
          }

          .md\:text-4xl {
              font-size: 2.25rem;
              line-height: 2.5rem
          }

          .md\:text-5xl {
              font-size: 3rem;
              line-height: 1
          }

          .md\:text-xl {
              font-size: 1.25rem;
              line-height: 1.75rem
          }
      }

      @media (min-width: 1024px) {
          .lg\:grid-cols-3 {
              grid-template-columns: repeat(3, minmax(0, 1fr))
          }

          .lg\:grid-cols-4 {
              grid-template-columns: repeat(4, minmax(0, 1fr))
          }
      }

      /*  */
      .logo {
          display: block;
          width: 200px;
          height: auto;
      }

      /* ≥576px (small) */
      @media screen and (min-width: 576px) {
          .logo {
              width: 180px;
          }
      }

      /* ≥768px (medium) */
      @media screen and (min-width: 768px) {
          .logo {
              width: 270px;
          }
      }

      /* ≥992px (large) */
      @media screen and (min-width: 992px) {
          .logo {
              width: 300px;
          }
      }

      /* ≥1200px (x‐large) */
      @media screen and (min-width: 1200px) {
          .logo {
              width: 400px;
          }
      }