/**
 * Theme Name:        Thazhini Theme
 * Description:       A custom made theme for Thazhini Research and Consultants.
 * Version:           1.0.1
 * Author:            Kaviraj K
 */

@layer reset, theme, base, layout, modules, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: unset;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer theme {
  :root {
    --brand-color: #009966;

    /*Background Colors */
    --background-color-1: #f9fafb;
    --background-color-2: #f3f4f6;
    --background-color-3: #e5e7eb;
    --background-color-4: #d1d5dc;
    --background-color-5: #99a1af;
    --background-color-6: #6a7282;
    --background-color-7: #4a5565;
    --background-color-8: #364153;
    --background-color-9: #1e2939;
    --background-color-10: #101828;
    --background-color-11: #030712;
    --background-color-white: #ffffff;
    --background-color-black: #000000;

    /* Foreground Colors */
    --foreground-color-1: #f9fafb;
    --foreground-color-2: #f3f4f6;
    --foreground-color-3: #e5e7eb;
    --foreground-color-4: #d1d5dc;
    --foreground-color-5: #99a1af;
    --foreground-color-6: #6a7282;
    --foreground-color-7: #4a5565;
    --foreground-color-8: #364153;
    --foreground-color-9: #1e2939;
    --foreground-color-10: #101828;
    --foreground-color-11: #030712;
    --foreground-color-white: #ffffff;
    --foreground-color-black: #000000;

    /* Brand Colors */
    --emerald-color-1: #ecfdf5;
    --emerald-color-2: #d0fae5;
    --emerald-color-3: #a4f4cf;
    --emerald-color-4: #5ee9b5;
    --emerald-color-5: #00d492;
    --emerald-color-6: #00bc7d;
    --emerald-color-7: #009966;
    --emerald-color-8: #007a55;
    --emerald-color-9: #006045;
    --emerald-color-10: #004f3b;
    --emerald-color-11: #002c22;

    /* RGBA Colors */
    --rgba-background-color-10-95: rgba(16, 24, 40, 0.95);

    /* Other Colors */
    --red-color-7: #e7000b;
    --orange-color-7: #f54900;
    --purple-color-7: #9810fa;

    /* Font Family */
    --font-main: "Outfit", sans-serif;
    --font-heading: "Outfit", sans-serif;

    /* Border radius custom variables */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-4xl: 32px;

    /* Container width, Accent color and color schema */
    --column-width: 1240px;
    accent-color: var(--brand-color);
    color-scheme: light;
  }
}

@layer global {
  :root {
    font-size: clamp(1rem, 0.4rem + 0.8svw, 1.1rem);
  }

  body {
    font-family: var(--font-main);
    background-color: var(--background-color-white);
    color: var(--foreground-color-6);
    font-style: normal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
  }

  .stack > * + * {
    margin-block-start: 1.5rem;
  }
}

@layer layout {
  #page {
    display: grid;
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }

  #page > header,
  #page > main,
  #page > footer {
    grid-column: span 1;
  }
}

@layer modules {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--foreground-color-11);
    font-weight: 600;
  }

  h1 {
    font-size: 1.875rem;
    line-height: 1.4;
  }

  h2 {
    font-size: 1.563rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  h4 {
    font-size: 1.563rem;
    line-height: 1.2;
  }

  h5 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  h6 {
    font-size: 1rem;
    line-height: 1.25;
  }

  @media (min-width: 768px) {
    h1 {
      font-size: 1.875rem;
    }

    h2 {
      font-size: 1.563rem;
    }

    h3 {
      font-size: 1.25rem;
    }

    h4 {
      font-size: 1.563rem;
    }

    h5 {
      font-size: 1.25rem;
    }

    h6 {
      font-size: 1rem;
    }
  }

  @media (min-width: 1024px) {
    h1 {
      font-size: 2.25rem;
    }

    h2 {
      font-size: 2.2rem;
    }

    h3 {
      font-size: 1.5rem;
    }

    h4 {
      font-size: 1.563rem;
    }

    h5 {
      font-size: 1.25rem;
    }

    h6 {
      font-size: 1rem;
    }
  }

  /* Mobile Button Styles */

  .button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
  }

  .button--primary {
    background-color: var(--brand-color);
    color: var(--foreground-color-white);
    transition: all 0.1s ease-in;
  }

  .button--primary:hover,
  .button--primary:focus {
    filter: drop-shadow(0px 0px 10px var(--brand-color));
  }

  .button--secondary {
    background-color: transparent;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
  }

  .button--secondary:hover,
  .button--secondary:focus {
    border: 1px solid transparent;
    background-color: var(--background-color-3);
    filter: drop-shadow(0px 0px 10px var(--background-color-white));
  }

  /* Mobile Header Styles */
  header {
    background-color: var(--background-color-10);
  }

  .header__container {
    margin: 0 auto;
    max-inline-size: var(--column-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;

    .header__site-title {
      img {
        inline-size: 112px;
        block-size: 86px;
      }
    }

    .menu {
      position: relative;

      .menu__toggle {
        text-indent: 10rem;
        overflow: hidden;
        inline-size: 2rem;
        block-size: 2rem;
        border: none;
        border-radius: var(--radius-xs);
        transition: all 0.2s ease;
      }

      .menu__toggle::after {
        content: "\2630";
        text-indent: 0rem;
        font-weight: bold;
        position: absolute;
        top: 0.25rem;
        left: 0;
        right: 0;
        color: var(--brand-color);
      }

      .menu__container {
        display: none;
        position: fixed;
        top: 9.375rem;
        right: 0;
        inline-size: 100svw;
        block-size: 100svh;
        margin-inline: auto;
        margin-block-start: unset;
        background-color: var(--background-color-2);
        padding: 4rem 1.5rem;
        list-style: none;

        li > a {
          text-decoration: none;
          cursor: pointer;
          color: var(--foreground-color-10);
          display: flex;
          justify-content: center;
          align-items: center;
          padding-block: 1rem;
          border-bottom: 1px dashed var(--background-color-4);
        }

        li > a:hover {
          color: var(--brand-color);
          border-bottom: 2px solid var(--brand-color);
        }

        li.is-active {
          a {
            color: var(--brand-color);
          }
        }

        li > a:after {
          content: "\276F";
          margin-inline-start: auto;
          color: var(--brand-color);
        }

        li > a > i {
          padding-inline-end: 0.313rem;
        }
      }
    }

    .menu.is-active {
      .menu__toggle::after {
        top: 0.3rem;
        content: "\2716";
        color: var(--red-color-7);
      }
      .menu__container {
        display: block;
      }
    }
  }

  /* Tablet Header Style */

  @media (min-width: 768px) {
    header {
    }

    .header__container {
      padding-inline: 2rem;

      .header__site-title {
        img {
        }
      }
      .menu {
        .menu__toggle {
        }

        .menu__container {
        }
      }
    }
  }

  /* Desktop Header Style */

  @media (min-width: 1024px) {
    header {
    }

    .header__container {
      padding-inline: 2.5rem;

      .header__site-title {
        img {
          transform: scale(1);
        }
      }

      .menu {
        flex: 1;

        .menu__toggle {
          display: none;
        }

        .menu__container {
          position: static;
          padding: unset;
          display: flex;
          justify-content: end;
          align-items: center;
          gap: 2rem;
          block-size: unset;
          inline-size: unset;
          background-color: unset;
          margin-block-end: unset;

          li + li {
            margin-block-start: unset;
          }

          li > a {
            text-decoration: none;
            padding-block: 1rem;
            color: var(--foreground-color-4);
            padding-block-end: 0.5rem;
            border: none;
            font-size: 0.875rem;
            font-weight: 500;
            border-bottom: 2px solid transparent;
          }

          li > a::after {
            content: none;
          }
        }
      }
    }
  }

  /* Mobile Hero Styles */

  .hero {
    background-color: var(--background-color-10);
    background-image: linear-gradient(
        to right,
        var(--background-color-9) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, var(--background-color-9) 1px, transparent 1px);
    background-size: 100px 100px;
  }

  .hero__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;

    .hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1.5rem;

      .hero__heading {
        color: var(--foreground-color-2);
        font-size: 2.5rem;
        margin-block: unset;

        span {
          color: var(--brand-color);
        }
      }

      .hero__para-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 1rem;

        .hero__para-one {
          color: var(--foreground-color-4);
          margin-block: unset;
        }

        .hero__para-two {
          color: var(--foreground-color-4);
          margin-block: unset;
        }
      }

      .hero__btn-container {
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 1rem;

        a {
          flex: 100%;
          text-align: center;
        }
      }

      .hero__sign-up-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        block-size: 100svh;
        inline-size: 100svw;
        background-color: var(--emerald-color-1);
        z-index: 10;
        padding: 1rem;
        justify-content: stretch;
        align-items: center;

        .hero__sign-up-form-container {
          flex: 1;
          position: relative;
          padding: 3rem 1rem 1rem 1rem;
          background-color: var(--background-color-10);
          border-radius: var(--radius-md);
          display: flex;
          justify-content: stretch;
          align-items: stretch;
          gap: 1rem;

          .hero__sign-up-overlay-close-btn {
            cursor: pointer;
            text-indent: 10rem;
            overflow: hidden;
            block-size: 2rem;
            inline-size: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            border: none;
            background-color: var(--background-color-white);
          }

          .hero__sign-up-overlay-close-btn::after {
            content: "\2716";
            text-indent: 0rem;
            position: absolute;
            top: 0.25rem;
            left: 0;
            right: 0;
            color: var(--red-color-7);
          }

          .hero__sign-up-form-holder {
            flex: 1;
            span {
              color: var(--foreground-color-white);
              font-size: 1.5rem;
            }

            p {
              color: var(--foreground-color-5);
              max-inline-size: 15rem;
            }
          }

          .hero__sign-up-form-media {
            display: none;
            justify-content: center;
            align-items: center;
            img {
              object-fit: cover;
              inline-size: 15rem;
              block-size: 15rem;
              max-inline-size: 100%;
              border-radius: var(--radius-md);
            }
          }
        }
      }

      .hero__sign-up-overlay.is-active {
        display: flex;
      }
    }

    .hero__media {
      canvas {
        margin: 0 auto;
      }
    }
  }

  /* Tablet Hero Styles */

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

    .hero__container {
      padding: 5rem 2rem;
      flex-direction: row;
      gap: 2rem;

      .hero__content {
        flex: 1;

        .hero__sign-up-overlay {
          padding: 3rem;
          justify-content: center;

          .hero__sign-up-form-container {
            flex: unset;
            padding: 3rem 2rem 2rem 2rem;

            .hero__sign-up-form-media {
              display: flex;
            }
          }
        }
      }

      .hero__media {
        flex: 1;
      }
    }
  }

  /* Desktop Hero Styles */

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

    .hero__container {
      padding: 7rem 2.5rem;

      .hero__content {
        .hero__btn-container {
          flex-wrap: nowrap;
        }

        .hero__sign-up-overlay {
          /* padding-inline: 20%; */

          .hero__sign-up-form-container {
            padding: 3rem 2rem 2rem 2rem;
          }
        }
      }
    }
  }

  /* Mobile Logos Style */

  .logos {
  }

  .logos__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem 2rem;
    overflow: hidden;

    .logos__heading {
      text-align: center;
      margin-block-start: unset;
      margin-block-end: 3rem;

      span {
        color: var(--brand-color);
      }
    }

    .logos__media {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 1rem;
      img {
        transform: scale(0.5);
        cursor: pointer;
      }
    }
  }

  /* Tablet Logos Style */

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

    .logos__container {
      padding: 5rem 2rem 2.5rem;
    }
  }

  /* Desktop Logos Style */

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

    .logos__container {
      padding: 3.5rem 2.5rem 3.5rem;
    }
  }

  /* Mobile Milestone Styles */
  .milestone {
  }

  .milestone__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    .milestone__media {
      display: flex;
      justify-content: stretch;
      align-items: stretch;
      img {
        border-radius: var(--radius-md);
        margin: 0 auto;
        object-fit: cover;
        max-inline-size: 100%;
        block-size: 30rem;
        inline-size: 25rem;
      }
    }

    .milestone__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1rem;

      .milestone__heading {
        margin-block: unset 3rem;
        text-align: center;
        span {
          color: var(--brand-color);
        }
      }

      .milestone__list {
        padding-inline-start: unset;
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 0.875rem;

        li {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1rem;

          i {
            padding: 0.775rem;
            border-radius: var(--radius-md);
            background-color: var(--emerald-color-2);
            color: var(--brand-color);
          }

          p {
            margin-block: unset;
          }
        }
      }

      .milestone__btn {
        text-align: center;
      }
    }
  }

  /* Tablet Milestone Style */

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

    .milestone__container {
      padding: 2.5rem 2rem 5rem;

      flex-direction: row;

      .milestone__media {
        flex: 1;
      }

      .milestone__content {
        flex: 1;

        .milestone__heading {
          text-align: start;
          margin-block-start: unset;
        }

        .milestone__btn {
          align-self: self-start;
        }
      }
    }
  }

  /* Desktop Milestone Style */
  @media (min-width: 1024px) {
    .milestone {
    }

    .milestone__container {
      padding: 3.5rem 2.5rem 3.5rem;
      gap: 4rem;
    }
  }

  /* Mobile Focus Area Style */
  .focus-area {
    background-color: var(--background-color-1);
  }

  .focus-area__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .focus-area__intro {
      .focus-area__intro-heading {
        margin-block-start: unset;
        margin-block-end: 3rem;
        text-align: center;

        span {
          color: var(--brand-color);
        }
      }
    }

    .focus-area__cards-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1.5rem;

      .focus-area__card {
        flex: 1;
        border: 1px solid var(--background-color-3);
        padding: 1rem;
        border-radius: var(--radius-md);
        background-color: var(--background-color-white);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
        cursor: pointer;
        transition: all 0.2s ease-in;
        box-shadow: 0px 0px 14px var(--background-color-3);

        .focus-area__card-media {
          color: var(--brand-color);
          padding: 0.875rem;
          background-color: var(--emerald-color-3);
          border-radius: 50%;
        }

        .focus-area__card-heading {
          margin-block: unset;
          color: var(--foreground-color-10);
        }

        .focus-area__card-list {
          padding-inline-start: unset;
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          gap: 1rem;
          margin-block: unset;

          li {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.875rem;

            i {
              color: var(--brand-color);
            }

            p {
              margin-block: unset;
            }
          }
        }

        .focus-area__card-features {
          padding-inline-start: unset;
          margin-block: unset;
          list-style: none;
          border-top: 1px solid var(--background-color-3);
          padding-block-start: 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          align-self: stretch;
          margin-block-start: auto;
          transition: all 0.1s ease-in;

          li {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            i {
              color: var(--brand-color);
            }

            p {
              font-size: 0.875rem;
              margin-block: unset;
            }
          }
        }
      }

      .focus-area__card:hover,
      .focus-area__card:focus {
        background-color: var(--brand-color);
        transform: translateY(-14px);
        border: 1px solid var(--brand-color);
        box-shadow: none;
        filter: drop-shadow(0px 0px 10px var(--brand-color));

        .focus-area__card-media {
          color: var(--foreground-color-white);
          background-color: var(--brand-color);
        }

        .focus-area__card-heading {
          color: var(--foreground-color-white);
        }

        .focus-area__card-list {
          li {
            i {
              color: var(--foreground-color-white);
            }

            p {
              color: var(--foreground-color-white);
            }
          }
        }

        .focus-area__card-features {
          border-top: 1px solid var(--background-color-white);

          li {
            i {
              color: var(--foreground-color-white);
            }

            p {
              color: var(--foreground-color-white);
            }
          }
        }
      }
    }
  }

  /* Tablet Focus Area Style */

  @media (min-width: 768px) {
    .focus-area {
    }

    .focus-area__container {
      padding: 5rem 2rem;

      .focus-area__cards-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;

        .focus-area__card {
          flex: 45%;
          justify-content: start;
        }
      }
    }
  }

  /* Desktop Focus Area Style */

  @media (min-width: 1024px) {
    .focus-area {
    }

    .focus-area__container {
      padding: 4rem 2.5rem;

      .focus-area__cards-container {
        .focus-area__card {
          flex: 30%;
          padding: 1.5rem;

          .focus-area__card-heading {
            font-size: 1.25rem;
          }
        }
      }
    }
  }

  /* Mobile style */
  .canvas {
    background-color: var(--background-color-10);
    background-image: linear-gradient(
        to right,
        var(--background-color-9) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, var(--background-color-9) 1px, transparent 1px);
    background-size: 100px 100px;
  }

  .canvas__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
    position: relative;

    .canvas__heading {
      margin-block-start: unset;
      margin-block-end: 3rem;
      text-align: center;
      color: var(--foreground-color-white);

      span {
        color: var(--brand-color);
      }
    }

    .canvas__3d-media {
      canvas {
        margin: 0 auto;
      }
    }

    .canvas__time-log {
      position: absolute;
      font-size: 12px;
      font-family: sans-serif;
      padding: 5px;
      border-radius: 3px;
      background-color: rgba(200, 200, 200, 0.1);
      color: lavender;
      bottom: 10px;
      right: 10px;
    }
  }

  /* Tablet style */
  @media (min-width: 768px) {
    .canvas {
    }

    .canvas__container {
      padding: 5rem 2rem;

      .canvas__heading {
      }

      .canvas__3d-media {
      }
    }
  }

  /* Desktop style */
  @media (min-width: 1024px) {
    .canvas {
    }

    .canvas__container {
      padding: 4rem 2.5rem;
      .canvas__heading {
      }

      .canvas__3d-media {
      }
    }
  }

  /* Mobile Team Style */
  .team {
  }

  .team__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .team__heading {
      text-align: center;
      margin-block-start: unset;
      margin-block-end: 3rem;
      span {
        color: var(--brand-color);
      }
    }

    .team__cards-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1.5rem;

      .team__card {
        flex: 1;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: stretch;
        transition: all 0.1s ease-in;

        img {
          flex: 1;
          border-radius: var(--radius-md);
          object-fit: cover;
        }

        .team__card-info {
          position: absolute;
          left: 1rem;
          right: 1rem;
          bottom: 1rem;
          background-color: var(--background-color-4);
          padding-block: 1rem;
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.5rem;

          h3 {
            margin-block: unset;
          }

          p {
            margin-block: unset;
            color: var(--brand-color);
            font-size: 0.875rem;
          }
          .team__card-social-links {
            display: flex;
            justify-content: stretch;
            align-items: stretch;
            gap: 1rem;
            display: none;

            img {
              padding: 0.5rem;
              background-color: var(--brand-color);
            }
          }
        }
      }

      .team__card:hover,
      .team__card:focus {
        .team__card-info {
          .team__card-social-links {
            display: flex;
          }
        }
      }
    }
  }
  /* Tablet Team Style */
  @media (min-width: 768px) {
    .team {
    }

    .team__container {
      padding: 5rem 2rem;

      .team__cards-container {
        flex-direction: row;

        .team__card {
          img {
          }
        }
      }
    }
  }

  /* Desktop Team Style */

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

    .team__container {
      padding: 4rem 2.5rem;

      .team__cards-container {
        .team__card {
          max-inline-size: 30rem;
          max-block-size: 36rem;

          img {
          }
        }
      }
    }
  }
  /* Mobile Partners Style */
  .partners {
    background-color: var(--background-color-1);
  }

  .partners__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .partners__heading {
      text-align: center;
      margin-block-start: unset;
      margin-block-end: 3rem;
      span {
        color: var(--brand-color);
      }
    }

    .partners__media {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1rem;

      img {
        padding: 3rem;
        border: 1px solid var(--background-color-3);
        border-radius: var(--radius-md);
        background-color: var(--background-color-2);
        cursor: pointer;
        transition: all 0.1s ease-in;
      }

      img:hover {
        transform: scale(1.1);
      }
    }
  }
  /* Tablet Partners Style */

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

    .partners__container {
      padding: 5rem 2rem;

      .partners__media {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        img {
          padding: 2rem;
        }
      }
    }
  }

  /* Desktop Partners Style */

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

    .partners__container {
      padding: 4rem 2.5rem;
    }
  }

  /* Mobile Faqs Style */
  .faqs {
  }

  .faqs__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .faqs__heading {
      margin-block-start: unset;
      margin-block-end: 3rem;
      text-align: center;

      span {
        color: var(--brand-color);
      }
    }

    .faqs__card-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1rem;

      .faqs__card {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        border: 1px solid var(--background-color-3);
        border-radius: var(--radius-md);
        background-color: var(--background-color-1);
        transition: all 0.1s ease-in;

        .faqs__question-container {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.875rem 0.875rem;
          border-radius: var(--radius-md);
          cursor: pointer;

          .faqs__question {
            margin-block: unset;
          }

          .faqs__question:hover,
          .faqs__question:focus {
            color: var(--brand-color);
          }

          .faqs__question-icon {
            margin-inline-start: auto;
          }
          .faqs__question-icon::after {
            content: "\002B";
            font-weight: bold;
            font-size: 1.5rem;
            color: var(--foreground-color-10);
          }
        }

        .faqs__question-container:hover,
        .faqs__question-container:focus {
          .faqs__question {
            color: var(--brand-color);
          }

          .faqs__question-icon::after {
            color: var(--brand-color);
          }
        }

        .faqs__answer {
          padding: 0.875rem 0.875rem;
          display: none;
        }
      }

      .faqs__card.is-active {
        .faqs__question-container {
          border-bottom: 1px solid var(--background-color-3);

          .faqs__question {
            color: var(--brand-color);
          }

          .faqs__question-icon::after {
            content: "\2212";
            color: var(--brand-color);
          }
        }
        .faqs__answer {
          display: block;
        }
      }
    }
  }

  /* Tablet Faqs Style */
  @media (min-width: 768px) {
    .faqs {
    }

    .faqs__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Faqs Style */
  @media (min-width: 1024px) {
    .faqs {
    }

    .faqs__container {
      padding: 4rem 2.5rem;

      .faqs__card-container {
        .faqs__card {
          .faqs__question-container {
            .faqs__question {
              font-size: 1.25rem;
            }
          }
        }
      }
    }
  }

  /* Mobile Service Style */
  .services {
    background-color: var(--background-color-1);
  }

  .services__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
    position: relative;

    .services__heading {
      text-align: center;
      margin-block-start: unset;
      margin-block-end: 3rem;
      span {
        color: var(--brand-color);
      }
    }

    .services__card-container {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 1.5rem;

      .services__card {
        background-color: var(--background-color-white);
        flex: 100%;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 1rem;
        border: 1px solid var(--background-color-3);
        border-radius: var(--radius-md);
        box-shadow: 0px 0px 14px var(--background-color-3);
        cursor: pointer;
        transition: all 0.1s ease-in;

        .services__card-heading {
          margin-block: unset;
        }

        .services__card-list {
          padding-inline-start: unset;
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          gap: 0.875rem;

          li {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 0.875rem;

            i {
              color: var(--brand-color);
              padding: 0.325rem;
              background-color: var(--emerald-color-3);
              border-radius: var(--radius-md);
            }

            p {
              margin-block: unset;
            }
          }
        }

        .services__card-feature-container {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .services__card-feature-one,
          .services__card-feature-two {
            padding-inline-start: unset;
            list-style: none;
            margin-block: unset;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            gap: 0.875rem;

            li {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 0.5rem;

              i {
                color: var(--brand-color);
              }

              p {
                margin-block: unset;
              }
            }
          }
        }

        .services__card-divider-one,
        .services__card-divider-two {
          hr {
            border: none;
            border-top: 1px solid var(--background-color-3);
          }
        }

        .services__card-divider-two {
          margin-block-start: auto;
        }

        .services__card-btn {
          align-self: stretch;
        }
      }

      .services__card:hover,
      .services__card:focus {
        border: 1px solid var(--brand-color);
        box-shadow: 0px 0px 8px var(--brand-color);
      }
    }

    .services__overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      block-size: 100svh;
      inline-size: 100svw;
      background-color: var(--background-color-10);
      background-image: linear-gradient(
          to right,
          var(--background-color-9) 1px,
          transparent 1px
        ),
        linear-gradient(
          to bottom,
          var(--background-color-9) 1px,
          transparent 1px
        );
      background-size: 100px 100px;
      justify-content: center;
      align-items: center;
      z-index: 10;

      .services__overlay-container {
        display: flex;
        justify-content: center;
        align-items: center;

        .services__overlay-form {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 1.5rem;
          padding: 3rem 1rem;

          .services__overlay-close-btn {
            text-indent: 10rem;
            overflow: hidden;
            inline-size: 2rem;
            block-size: 2rem;
            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
            margin-inline-start: auto;
            background-color: var(--background-color-white);
            border-radius: var(--radius-sm);
          }

          .services__overlay-close-btn::after {
            content: "\2716";
            text-indent: 0rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0.18rem;
            color: var(--red-color-7);
            cursor: pointer;
          }

          span {
            color: var(--brand-color);
            font-size: 1.5rem;
            text-align: center;
            margin: 0 auto;
            font-weight: bold;
          }
        }
      }
    }
    .services__overlay.is-active {
      display: flex;
    }
  }

  /* Tablet Service Style */
  @media (min-width: 768px) {
    .services {
    }

    .services__container {
      padding: 5rem 2rem;

      .services__card-container {
        gap: 2rem;

        .services__card {
          flex: 46% 0 0;
        }
      }
    }
  }

  /* Desktop Service Style */
  @media (min-width: 1024px) {
    .services {
    }

    .services__container {
      padding: 4rem 2.5rem;

      .services__card-container {
        .services__card {
          flex: 30% 0 0;
          padding: 2rem 1.25rem;
        }
      }
    }
  }

  /* Mobile Blog Style */
  .blog {
  }

  .blog__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .blog__heading {
      margin-block-start: unset;
      margin-block-end: 3rem;
      text-align: center;

      span {
        color: var(--brand-color);
      }
    }

    .blog__cards-container {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 1rem;

      .blog__card {
        flex: 100%;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        transition: all 0.1s ease-in;

        .blog__card-media {
          display: flex;
          justify-content: stretch;
          align-items: stretch;
          flex: 30%;

          img {
            object-fit: cover;
            border-top-left-radius: var(--radius-md);
            border-top-right-radius: var(--radius-md);
            max-inline-size: 100%;
            block-size: auto;
          }
        }

        .blog__card-content {
          padding: 1rem;
          border-bottom-left-radius: var(--radius-md);
          border-bottom-right-radius: var(--radius-md);
          background-color: var(--background-color-2);

          .blog__card-date {
            color: var(--brand-color);
          }

          .blog__card-heading {
            margin-block: 1rem;
          }

          .blog__card-para {
          }

          .blog__card-link {
            color: var(--foreground-color-10);
          }
        }
      }

      .blog__card:hover,
      .blog__card:focus {
        .blog__card-content {
          background-color: var(--brand-color);

          .blog__card-date {
            color: var(--foreground-color-white);
          }

          .blog__card-heading {
            color: var(--foreground-color-white);
          }

          .blog__card-para {
            color: var(--foreground-color-white);
          }

          .blog__card-link {
            color: var(--foreground-color-white);
          }
        }
      }
    }
  }

  /* Tablet Blog Style */
  @media (min-width: 768px) {
    .blog {
    }

    .blog__container {
      padding: 5rem 2rem;

      .blog__cards-container {
        gap: 2rem;

        .blog__card {
          flex: 45%;
        }
      }
    }
  }

  /* Desktop Blog Style */
  @media (min-width: 1024px) {
    .blog {
    }

    .blog__container {
      padding: 4rem 2.5rem;

      .blog__cards-container {
        gap: 3rem;
        .blog__card {
          .blog__card-media {
            flex: 35%;

            img {
              block-size: 20rem;
              inline-size: 40rem;
            }
          }

          .blog__card-content {
            flex: 60%;
          }
        }
      }
    }
  }

  /* Mobile Not Found Style */
  .not-found {
  }

  .not-found__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .not-found__heading {
      font-size: 4rem;
      text-align: center;
    }

    .not-found__para {
      text-align: center;
    }

    .not-found__btn-container {
      display: flex;
      justify-content: center;
      align-items: center;

      .not-found__btn {
        display: inline-block;
        margin-inline: auto;
      }
    }
  }

  /* Mobile Featured Projects Style */
  .featured-project {
    background-color: var(--background-color-10);
  }

  .featured-project__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .featured-project__heading {
      margin-block-start: unset;
      margin-block-end: 3rem;
      text-align: center;
      color: var(--foreground-color-white);

      span {
        color: var(--brand-color);
      }
    }

    .featured-project__cards-container {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 3rem;

      .featured-project__card {
        flex: 100%;

        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        border-top: 8px solid var(--brand-color);
        border-radius: var(--radius-md);

        .featured-project__card-media {
          flex: 30%;
          display: flex;
          justify-content: stretch;
          align-items: stretch;

          img {
            object-fit: cover;
            max-inline-size: 100%;
            block-size: auto;
          }
        }

        .featured-project__card-content {
          flex: 65%;
          background-color: var(--background-color-9);
          padding-block-end: 1rem;
          border-bottom-left-radius: var(--radius-md);
          border-bottom-right-radius: var(--radius-md);

          .featured-project__card-heading {
            padding-inline: 1rem;
            color: var(--brand-color);
          }

          .featured-project__card-para {
            padding-inline: 1rem;
            color: var(--foreground-color-5);
          }

          .featured-project__card-list {
            padding-inline-start: unset;
            list-style: none;
            padding-inline: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 1rem;

            li {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0.875rem;

              i {
                color: var(--brand-color);
                padding: 0.325rem;
                background-color: var(--emerald-color-3);
                border-radius: var(--radius-md);
              }

              p {
                margin-block: unset;
                color: var(--foreground-color-5);
              }
            }
          }
        }
      }
    }
  }

  /* Tablet Featured Projects Style */

  @media (min-width: 768px) {
    .featured-project {
    }

    .featured-project__container {
      padding: 5rem 2rem;
      .featured-project__heading {
      }

      .featured-project__cards-container {
        .featured-project__card {
          .featured-project__card-heading {
          }

          .featured-project__card-para {
          }

          .featured-project__card-list {
            li {
            }
          }
        }
      }
    }
  }

  /* Desktop Featured Projects Style */
  @media (min-width: 1024px) {
    .featured-project {
    }

    .featured-project__container {
      padding: 4rem 2.5rem;
      .featured-project__heading {
      }

      .featured-project__cards-container {
        .featured-project__card {
          flex-direction: row;

          .featured-project__card-media {
            flex: 35%;
            img {
              border-top-right-radius: unset;
              border-bottom-left-radius: var(--radius-md);
            }
          }

          .featured-project__card-content {
            flex: 60%;
            border-bottom-left-radius: unset;
            border-top-right-radius: var(--radius-md);
            padding: 2rem;

            .featured-project__card-heading {
            }

            .featured-project__card-para {
            }

            .featured-project__card-list {
              li {
              }
            }
          }
        }
      }
    }
  }

  /* Mobile Newsletter Style */
  .newsletter {
  }

  .newsletter__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 2rem 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;

    .newsletter__content {
      padding-block: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1rem;

      .newsletter__content-prefix {
      }

      .newsltter__heading {
        margin-block: unset;
        text-align: start;

        span {
          color: var(--brand-color);
        }
      }

      .newsletter__para {
        margin-block: unset;
      }

      .newsletter__signup-form {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.25rem;
      }

      .newsletter__working-hours {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0.5rem;

        .newsletter__working-hours-heading {
          margin-block: unset;
          margin-block-start: 1.5rem;
        }

        .newsletter__working-hours-para {
          margin-block: unset;
        }
      }
    }

    .newsletter__appointment-container {
      flex: 1;
      padding-block: 2rem;
      background-color: var(--background-color-10);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      padding: 1rem;
      border-radius: var(--radius-md);

      span {
        margin-inline: auto;
        font-size: 1.5rem;
        color: var(--foreground-color-white);
        padding-block: 2rem 1.5rem;
      }

      .newsletter__appointment-form {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0.875rem;

        fieldset {
          border: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 0.5rem;
          margin-inline: unset;
          padding: unset;

          label {
            padding-inline: 0rem;
            color: var(--foreground-color-5);
          }

          input:not(input[type="checkbox"]),
          input:not(input[type="radio"]) {
            padding: 0.425rem;
            border-radius: var(--radius-sm);
          }

          textarea {
            padding: 0.425rem;
            border-radius: var(--radius-sm);
          }
        }
      }
    }
  }

  /* Tablet Newsletter Style */

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

    .newsletter__container {
      padding: 2rem 2rem;
      flex-direction: row;

      .newsletter__content {
        flex: 40%;
      }

      .newsletter__appointment-container {
        flex: 50%;
        padding: 2rem;

        .newsletter__appointment-form {
        }
      }
    }
  }

  /* Desktop Newsletter Style */

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

    .newsletter__container {
      padding: 2rem 2.5rem;
      flex-direction: row;

      .newsletter__content {
        flex: 45%;
      }

      .newsletter__appointment-container {
        flex: 45%;

        .newsletter__appointment-form {
        }
      }
    }
  }

  /* Mobile Reviews Style */
  .reviews {
    background-color: var(--background-color-1);
  }

  .reviews__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .reviews__intro {
      margin-block-end: 3rem;

      .reviews__heading {
        margin-block-start: unset;
        margin-block-end: 1rem;
        text-align: start;

        span {
          color: var(--brand-color);
        }
      }

      .reviews__intro-para {
        margin-block: unset;
      }
    }

    .reviews__cards-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 1.5rem;

      .reviews__card {
        background-color: var(--background-color-3);
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
        border-radius: var(--radius-md);

        .reviews__card-media {
          img {
            border-radius: 75%;
            object-fit: cover;
            max-inline-size: 50%;
            inline-size: 5rem;
            block-size: 5rem;
            margin-inline-end: auto;
          }
        }

        .reviews__card-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 1rem;

          .reviews__card-rating {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 1rem;

            .reviews__card-rating-star {
              flex: 1;
              display: flex;
              justify-content: start;
              align-items: stretch;
              gap: 0.25rem;

              img {
                object-fit: cover;
                max-inline-size: 100%;
                block-size: auto;
                transform: scale(0.8);
              }
            }

            .reviews__card-rating-value {
            }
          }

          .reviews__card-heading {
            color: var(--foreground-color-10);
            font-size: 1.25rem;
            font-weight: bold;
          }

          .reviews__card-para {
            margin-block: unset;
          }

          .reviews__card-reviewer {
          }
        }
      }
    }
  }

  /* Tablet Reviews Style */

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

    .reviews__container {
      padding: 5rem 2rem;

      .reviews__cards-container {
        flex-direction: row;
        justify-content: center;

        .reviews__card {
          flex: 45% 0 0;
        }
      }
    }
  }

  /* Desktop Reviews Style */

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

    .reviews__container {
      padding: 4rem 2.5rem;

      .reviews__cards-container {
        flex-direction: row;
        justify-content: center;

        .reviews__card {
          flex: 30%;
        }
      }
    }
  }

  /* Mobile Who we are style */
  .who-we-are {
  }

  .who-we-are__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .who-we-are__intro-container {
      .who-we-are__intro-heading {
        margin-block-start: unset;
        margin-block-end: 1.5rem;

        span {
          color: var(--brand-color);
        }
      }

      .who-we-are__intro-para {
      }
    }
  }
  /* Tablet Who we are style */
  @media (min-width: 768px) {
    .who-we-are {
    }
    .who-we-are__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Who we are style */
  @media (min-width: 1024px) {
    .who-we-are {
    }
    .who-we-are__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile About Features Style */
  .about-features {
    background-color: var(--background-color-10);
  }

  .about-features__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .about-features__cards-container {
      background-color: var(--background-color-10);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1.5rem;

      .about-features__card:nth-child(1) {
        border-top: 5px solid var(--brand-color);
      }

      .about-features__card:nth-child(2) {
        border-top: 5px solid var(--orange-color-7);
      }

      .about-features__card:nth-child(3) {
        border-top: 5px solid var(--purple-color-7);
      }

      .about-features__card {
        background-color: var(--background-color-9);
        padding: 1rem;
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;

        .about-features__card-media {
          flex: 30%;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            max-inline-size: 100%;
            block-size: auto;
            border-radius: var(--radius-md);
            object-fit: cover;
          }
        }

        .about-deatures__card-content {
          flex: 65%;

          .about-features__card-heading {
            color: var(--foreground-color-white);
          }

          .about-features__card-para {
            color: var(--foreground-color-5);
          }

          .about-features__card-list {
            padding-inline-start: unset;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 1rem;

            li {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0.875rem;

              i {
                color: var(--brand-color);
                padding: 0.325rem;
                background-color: var(--emerald-color-3);
                border-radius: var(--radius-md);
              }

              p {
                margin-block: unset;
                color: var(--foreground-color-5);
              }
            }
          }
        }
      }
    }
  }

  /* Tablet About Features Style */

  @media (min-width: 768px) {
    .about-features {
    }

    .about-features__container {
      padding: 5rem 2rem;

      .about-features__cards-container {
        .about-features__card {
          .about-features__card-media {
            img {
              inline-size: 100%;
              block-size: 20rem;
            }
          }
        }
      }
    }
  }

  /* Desktop About Features Style */
  @media (min-width: 1024px) {
    .about-features {
    }

    .about-features__container {
      padding: 7rem 2.5rem;

      .about-features__cards-container {
        flex-direction: row;
        .about-features__card {
          flex: 30%;

          .about-features__card-media {
            img {
              block-size: 15rem;
            }
          }
        }
      }
    }
  }

  /* Mobile Our initiatives Style */
  .initatives-hero {
  }

  .initiatives-hero__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .initiatives-hero__heading {
      margin-block-start: unset;
      margin-block-end: 1.5rem;
      text-align: start;

      span {
        color: var(--brand-color);
      }
    }
  }

  /* Tablet Our initiatives Style */
  @media (min-width: 768px) {
    .initatives-hero {
    }

    .initiatives-hero__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Our initiatives Style */

  @media (min-width: 1024px) {
    .initatives-hero {
    }

    .initiatives-hero__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile Initiatives features Style */
  .initiatives-features {
    background-color: var(--background-color-1);
  }

  .initiatives-features__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .initiatives-features__cards-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 1.5rem;

      .initiatives-features__card {
        padding: 1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--background-color-3);
        background-color: var(--background-color-white);
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        cursor: pointer;
        transition: all 0.1s ease-in;

        .initiatives-features__card-media {
          flex: 30%;
          display: flex;
          justify-content: stretch;
          align-items: stretch;

          img {
            flex: 30%;
            object-fit: cover;
            max-inline-size: 100%;
            block-size: auto;
            border-top-left-radius: var(--radius-md);
            border-top-right-radius: var(--radius-md);
          }
        }

        .initiatives-features__card-content {
          flex: 65%;
          display: flex;
          flex-direction: column;
          justify-content: top;
          align-items: stretch;
          gap: 1rem;
          padding: 1rem;
          border-radius: var(--radius-md);
          background-color: var(--background-color-1);
          margin-block-end: 1rem;
          border-bottom-left-radius: var(--radius-md);
          border-bottom-right-radius: var(--radius-md);

          .initiatives-features__card-heading {
            font-weight: bold;
            font-size: 1.25rem;
            color: var(--brand-color);
          }

          .initiatives-features__card-para {
            margin-block: unset;
          }
        }

        .initiatives-features__card-highlights {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: var(--background-color-1);
          padding: 1rem;
          border-radius: var(--radius-md);

          ul {
            padding-inline-start: unset;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 1rem;

            li {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0.5rem;

              i {
                color: var(--brand-color);
              }
              p {
                margin-block: unset;
              }
            }
          }
        }
      }

      .initiatives-features__card:hover,
      .initiatives-features__card:focus {
        filter: drop-shadow(0px 0px 10px var(--brand-color));
        border: 1px solid var(--brand-color);
      }
    }
  }

  /* Tablet Initiatives features Style */
  @media (min-width: 768px) {
    .initiatives-features {
    }

    .initiatives-features__container {
      padding: 5rem 2rem;

      .initiatives-features__cards-container {
        .initiatives-features__card {
          .initiatives-features__card-media {
            img {
            }
          }

          .initiatives-features__card-heading {
          }

          .initiatives-features__card-para {
          }
        }
      }
    }
  }

  /* Desktop Initiatives features Style */
  @media (min-width: 1024px) {
    .initiatives-features {
    }

    .initiatives-features__container {
      padding: 7rem 2.5rem;

      .initiatives-features__cards-container {
        flex-direction: row;
        flex-wrap: wrap;

        .initiatives-features__card {
          flex: 45%;
          padding: 1.5rem;

          .initiatives-features__card-media {
            img {
              block-size: 20rem;
            }
          }

          .initiatives-features__card-heading {
          }

          .initiatives-features__card-para {
          }
        }
      }
    }
  }

  /* Mobile Resources articles Style */
  .resources-articles {
  }

  .resources-articles__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .resources-articles__intro-container {
      padding-block-end: 3rem;

      .resources-articles__intro-heading {
        margin-block-start: unset;
        margin-block-end: 1.5rem;
        text-align: center;

        span {
          color: var(--brand-color);
        }
      }

      .resources-articles__intro-para {
        max-inline-size: 30rem;
        text-align: center;
        margin-inline: auto;
      }
    }

    .resources-articles__cards-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;

      .resources-articles__card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;

        .resources-articles__card-media {
          flex: 30%;
          display: flex;
          justify-content: stretch;
          align-items: stretch;

          img {
            object-fit: cover;
            max-inline-size: 100%;
            block-size: auto;
            border-top-left-radius: var(--radius-md);
            border-top-right-radius: var(--radius-md);
          }
        }

        .resources-articles__card-content {
          flex: 65%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 1rem;
          padding-block-start: 1rem;
          background-color: var(--background-color-1);
          padding: 1rem;
          border-bottom-left-radius: var(--radius-md);
          border-bottom-right-radius: var(--radius-md);

          .resources-articles__card-heading {
            margin-block: unset;
          }

          .resources-articles__card-para {
            margin-block: unset;
          }

          .resources-articles__card-link {
            text-decoration: none;
            color: var(--brand-color);
          }
        }
      }
    }
  }

  /* Tablet Resources articles Style */

  @media (min-width: 768px) {
    .resources-articles {
    }

    .resources-articles__container {
      padding: 5rem 2rem;

      .resources-articles__cards-container {
        flex-direction: row;
        gap: 2rem;

        .resources-articles__card {
          flex: 100%;
          flex-direction: row;

          .resources-articles__card-media {
            img {
              border-top-right-radius: unset;
              border-bottom-left-radius: var(--radius-md);
            }
          }

          .resources-articles__card-content {
            border-bottom-left-radius: unset;
            border-top-right-radius: var(--radius-md);
          }
        }
      }
    }
  }

  /* Desktop Resources articles Style */
  @media (min-width: 1024px) {
    .resources-articles {
    }

    .resources-articles__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile Work with us info Style */
  .work-with-us-info {
  }

  .work-with-us-info__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .work-with-us-info__intro-container {
      .work-with-us-info__intro-heading {
        margin-block-start: unset;
        margin-block-end: 1rem;

        span {
          color: var(--brand-color);
        }
      }

      .work-with-us-info__intro-para {
        margin-block: unset;
      }
    }

    .work-with-us-info__cards-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 2rem;
      padding-block-start: 3rem;

      .work-with-us-info__card {
        background-color: var(--background-color-1);
        padding: 1rem;
        border-radius: var(--radius-md);
        border-left: 3px solid var(--brand-color);

        .work-with-us-info__card-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 1rem;

          .work-with-us-info__card-heading {
            margin-block: unset;
          }

          .work-with-us-info__card-para {
            margin-block: unset;
          }
        }
      }
    }
  }

  /* Tablet Work with us info Style */
  @media (min-width: 768px) {
    .work-with-us-info {
    }

    .work-with-us-info__container {
      padding: 5rem 2rem;

      .work-with-us-info__cards-container {
        gap: 3rem;

        .work-with-us-info__card {
          .work-with-us-info__card-content {
          }
        }
      }
    }
  }

  /* Desktop Work with us info Style */
  @media (min-width: 1024px) {
    .work-with-us-info {
    }

    .work-with-us-info__container {
      padding: 7rem 2.5rem;

      .work-with-us-info__cards-container {
        .work-with-us-info__card {
          .work-with-us-info__card-content {
          }
        }
      }
    }
  }

  /* Mobile Contact form Style */
  .contact-form {
  }

  .contact-form__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;

    .contact-form__intro-container {
      padding-block-end: 2rem;

      .contact-form__intro-heading {
        margin-block-start: unset;
        margin-block-end: 1rem;
        text-align: start;

        span {
          color: var(--brand-color);
        }
      }

      .contact-form__intro-para {
        margin-block: unset;
        max-inline-size: 40rem;
      }
    }

    .contact-form__inner-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 3rem;

      .contact-form__cards-container {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 1rem;

        .contact-form__card {
          flex: 1;
          background-color: var(--background-color-1);
          padding: 1rem;
          border-radius: var(--radius-md);
          transition: all 0.1s ease-in;
          cursor: pointer;
          border-top: 5px solid var(--brand-color);
          max-inline-size: 100%;
          block-size: auto;

          .contact-form__card-media {
            display: flex;
            justify-content: start;
            align-items: center;

            i {
              color: var(--brand-color);
              padding: 2rem 0rem;
            }
          }

          .contact-form__card-list {
            ul {
              padding-inline-start: unset;
              list-style: none;

              li {
                a {
                  text-decoration: none;
                  color: var(--foreground-color-6);
                }
              }
            }
          }
        }

        .contact-form__card:hover,
        .contact-form__card:focus {
          background-color: var(--emerald-color-3);
        }
      }

      .contact-form__content {
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        
        div {
          flex: 1;
        }

        form {
          flex: 1;
          background-color: var(--background-color-10);
          padding: 1rem;
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 1rem;

          span {
            color: var(--brand-color);
            margin-inline: auto;
            font-size: 1.25rem;
            font-weight: bold;
          }

          fieldset {
            border: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            padding: unset;
            gap: 0.325rem;

            label {
              flex: 50%;
              color: var(--foreground-color-5);
            }

            input:not(input[type="checkbox"]),
            input:not(input[type="radio"]) {
              padding: 0.325rem;
              border-radius: var(--radius-sm);
            }

            textarea {
              padding: 0.325rem;
            }
          }
        }
      }
    }
  }

  /* Tablet Contact form Style */
  @media (min-width: 768px) {
    .contact-form {
    }

    .contact-form__container {
      padding: 5rem 2rem;

      .contact-form__intro-container {
        padding-block-end: 3rem;
      }

      .contact-form__inner-container {
        .contact-form__content {
          flex: 45%;

          form {
            padding: 2rem;
          }
        }

        .contact-form__cards-container {
          flex: 45%;
          flex-direction: row;
          gap: 1.5rem;

          .contact-form__card {
            flex: 45%;
          }
        }
      }
    }
  }

  /* Desktop Contact form Style */

  @media (min-width: 1024px) {
    .contact-form {
    }

    .contact-form__container {
      padding: 7rem 2.5rem;

      .contact-form__inner-container {
        flex-direction: row;

        .contact-form__cards-container {
          .contact-form__card {
            .contact-form__card-media {
            }
          }
        }
      }
    }
  }

  /* Mobile Contact map Style */
  .contact-map {
    background-color: var(--background-color-1);
  }

  .contact-map__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    .contact-map__heading {
      margin-block-start: unset;
      margin-block-end: 3rem;
      text-align: center;

      span {
        color: var(--brand-color);
      }
    }

    .contact-map__media {
      display: flex;
      justify-content: stretch;
      align-items: stretch;

      iframe {
        flex: 1;
        block-size: 20rem;
        border-radius: var(--radius-md);
      }
    }
  }

  /* Tablet Contact map Style */
  @media (min-width: 768px) {
    .contact-map {
    }

    .contact-map__container {
      padding: 2.5rem 2rem;
    }
  }

  /* Desktop Contact map Style */
  @media (min-width: 1024px) {
    .contact-map {
    }

    .contact-map__container {
      padding: 3.5rem 2.5rem;
    }
  }

  /* Mobile Privacy info Style */
  .privacy-info {
  }

  .privacy-info__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
  }

  /* Tablet Privacy info Style */

  @media (min-width: 768px) {
    .privacy-info {
    }

    .privacy-info__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Privacy info Style */
  @media (min-width: 1024px) {
    .privacy-info {
    }

    .privacy-info__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile Terms of use info Style */
  .terms-of-use-info {
  }

  .terms-of-use-info__container {
    max-inline-size: var(--column-width);
    margin: 0 auto;
    padding: 4rem 1rem;
  }

  /* Tablet Terms of use info Style */
  @media (min-width: 768px) {
    .terms-of-use-info {
    }

    .terms-of-use-info__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Terms of use info Style */
  @media (min-width: 1024px) {
    .terms-of-use-info {
    }

    .terms-of-use-info__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile Style */

  /* Tablet Style */

  /* Desktop Style */

  /* Tablet Not Found Style */
  @media (min-width: 768px) {
    .not-found {
    }

    .not-found__container {
      padding: 5rem 2rem;
    }
  }

  /* Desktop Not Found Style */
  @media (min-width: 1024px) {
    .not-found {
    }

    .not-found__container {
      padding: 7rem 2.5rem;
    }
  }

  /* Mobile Footer Style */

  footer {
    background-color: var(--background-color-10);
  }

  .footer__container {
    .footer__widget-container {
      max-inline-size: var(--column-width);
      margin: 0 auto;
      padding: 4rem 1rem 2rem;
      display: flex;
      justify-content: center;
      align-items: start;
      flex-wrap: wrap;
      gap: 2rem;

      .footer__widget-one {
        flex: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 1.5rem;

        .footer__brand-info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          gap: 1rem;

          span {
            color: var(--brand-color);
            font-size: 1.5rem;
            font-weight: bold;
          }

          p {
            margin-block: unset;
            color: var(--foreground-color-5);
            font-size: 0.875rem;
          }
        }
        
        /*
        .footer__newsletter-signup {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          gap: 1rem;

          span {
            color: var(--foreground-color-white);
            font-size: 1.25rem;
          }

           form {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.1rem;
            input[type="email"] {
              border-top-left-radius: var(--radius-md);
              border-bottom-left-radius: var(--radius-md);
              padding: 0.5rem 0.875em;
              border: none;
            }

            input[type="button"] {
              background-color: var(--brand-color);
              color: var(--foreground-color-white);
              border-top-right-radius: var(--radius-md);
              border-bottom-right-radius: var(--radius-md);
              padding: 0.5rem 0.875em;
              border: none;
              cursor: pointer;
            }
          } 
        }*/
      }

      .footer__widget-two {
        flex: 100%;

        .footer__address-info {
          span {
            color: var(--foreground-color-white);
            font-size: 1.25rem;
          }

          ul {
            padding-inline-start: unset;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            gap: 1rem;

            li {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0.875rem;

              i {
                color: var(--brand-color);
              }

              p {
                margin-block: unset;
                color: var(--foreground-color-5);
                font-size: 0.875rem;
              }
            }
          }
        }
      }

      .footer__widget-three {
        flex: 100%;

        .footer__quick-links {
          span {
            color: var(--foreground-color-white);
            font-size: 1.25rem;
          }

          ul {
            padding-inline-start: unset;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            gap: 0.875rem;

            li {
              display: flex;
              justify-content: start;
              align-items: center;
              gap: 0.5rem;

              i {
                color: var(--brand-color);
              }

              a {
                text-decoration: none;
                color: var(--foreground-color-5);
                font-size: 0.875rem;
              }

              a:hover {
                color: var(--foreground-color-white);
              }
            }
          }
        }
      }

      .footer__widget-four {
        flex: 100%;

        .footer__get-in-touch {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
          gap: 1rem;

          span {
            color: var(--foreground-color-white);
            font-size: 1.25rem;
          }

          p {
            margin-block: unset;
            color: var(--foreground-color-5);
            font-size: 0.875rem;
          }

          ul {
            padding-inline-start: unset;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 0.5rem;

            li {
              img {
                padding: 0.5rem;
                background-color: var(--brand-color);
                border-radius: var(--radius-sm);
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .footer__divider {
      border: none;
      border-top: 1px solid var(--background-color-9);
    }

    .footer__bottom-container {
      max-inline-size: var(--column-width);
      margin: 0 auto;
      padding: 2rem 1rem 2rem;

      .footer__copyright {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-size: 0.875rem;
          color: var(--foreground-color-white);
        }
      }

      .footer__links-container {
        ul {
          padding-inline-start: unset;
          list-style: none;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1rem;

          li {
            color: var(--brand-color);

            a {
              color: var(--brand-color);
              font-size: 0.875rem;
            }
          }
        }
      }
    }
  }

  /* Tablet Footer Style */

  @media (min-width: 768px) {
    footer {
    }

    .footer__container {
      .footer__widget-container {
        padding: 5rem 2rem 2rem;

        .footer__widget-one {
        }

        .footer__widget-two {
        }

        .footer__widget-three {
        }

        .footer__widget-four {
        }
      }

      .footer__divider {
      }

      .footer__bottom-container {
        padding: 2rem 2rem;

        .footer__copyright {
        }

        .footer__links-container {
        }
      }
    }
  }

  /* Desktop Footer Style */
  @media (min-width: 1024px) {
    footer {
    }

    .footer__container {
      .footer__widget-container {
        padding: 5rem 2.5rem 2rem;
        flex-wrap: nowrap;
        gap: 3rem;

        .footer__widget-one {
          flex: 30%;
        }

        .footer__widget-two {
          flex: 25%;
        }

        .footer__widget-three {
          flex: 18%;
        }

        .footer__widget-four {
          flex: 18%;
        }
      }

      .footer__divider {
      }

      .footer__bottom-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 2.5rem;

        .footer__copyright {
        }

        .footer__links-container {
        }
      }
    }
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }

  .hidden {
    display: none;
  }

  .border-radius {
    border-radius: 1rem;
  }
}