* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Outfit', sans-serif;
      color: #1a2930;
      /* background: url('your-background.jpg') no-repeat center center / cover; */
    }

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

    /* Header */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      background-color: rgb(254, 248, 232);
      padding: 16px 32px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    main {
      padding-top: 110px;
    }

    /* Logo Containers */
    .logo-container,
    .logo-containerm {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .logo-containerm {
      display: none;
    }

    .logo-container img,
    .logo-containerm img {
      width: 65px;
      height: auto;
    }

    .logo-text,
    .mobile-logo-text {
      font-weight: normal;
      font-size: 1.5rem;
      line-height: 1.2;
      color: #1a2930;
    }

    /* Desktop Nav */
    nav {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
    }

    nav a {
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 8px 0;
      transition: border-bottom 0.3s ease;
    }

    nav a:hover,
    nav a:focus {
      border-bottom: 1px solid #3a5160;
      outline: none;
    }

    /* Buttons */
    .contact-btn,
    .contact-btns,
    .mobile-contact-btn {
      background-color: #1a2930;
      color: #fef8e8;
      border: none;
      padding: 12px 24px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: background-color 0.3s ease;
    }

    .contact-btn:hover,
    .contact-btn:focus,
    .contact-btns:hover,
    .contact-btns:focus,
    .mobile-contact-btn:hover,
    .mobile-contact-btn:focus {
      background-color: #ffffff;
      color: black;
      border: 1px solid black;
      outline: none;
    }

    /* Mobile Specific Styles */
    .mobile-menu-button {
      display: none;
      background: none;
      border: none;
      font-size: 1.8rem;
      cursor: pointer;
      color: #1a2930;
      margin-left: 10px;
    }

    .mobile-menu {
      visibility: hidden;
      opacity: 0;
      transform: translateY(-20px);
      /* animation direction */
      pointer-events: none;
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #fef8e8;
      z-index: 1001;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }


    .mobile-menu.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      display: flex
    }


    .mobile-menu a {
      margin: 12px 0;
      font-size: 1.25rem;
      font-weight: 600;
    }

    .close-menu {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 2rem;
      background: none;
      border: none;
      color: #1a2930;
      cursor: pointer;
    }

    /* Sections */
    .check {
      background-color: rgb(254 248 232);
      padding: 50px 32px;
      line-height: 1.2;
    }

    .check h1 {
      font-size: 30px;
      margin: 0;
      font-weight: 700;
      animation: fadeSlideUp 1s ease forwards;
      opacity: 0;
    }

    .check h5 {
      font-weight: normal;
      font-size: 18px;
      margin-top: 10px;
      margin-bottom: 20px;
      animation: fadeSlideUp 1s ease forwards;
      opacity: 0;
      animation-delay: 0.8s;
    }

    .check h1:nth-child(1) {
      animation-delay: 0.2s;
    }

    .check h1:nth-child(2) {
      animation-delay: 0.5s;
    }

    .welcome {
      background-color: #1a2930;
      color: rgb(254, 248, 232);
      display: flex;
      justify-content: space-evenly;
      padding: 50px;
      margin-top: -15px;
      align-items: center;
      margin-bottom: -35px;
    }

    .head h1 {
      margin: 0;
      font-size: 3em;
      line-height: 1.5;
    }

    .bot {
      margin-top: 20px;
      width: 40%;
    }

    .bot h4 {
      font-weight: normal;
      line-height: 2;
      margin: 10px 0;
    }

    .bot hr {
      border: 1px solid rgb(254, 248, 232);
      width: 65px;
      margin: 20px 0;
    }

    .read-more {
      font-size: 15px;
      cursor: pointer;
      transition: transform 0.3s ease;
      margin-top: 0;
      font-weight: bolder;
    }

    .read-more:hover {
      transform: translateX(5px);
    }

    /* Keyframes */
    @keyframes fadeSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }



    @media (min-width: 768px) {
      .check {
        padding: 80px 64px;
      }

      .check h1 {
        font-size: 80px;
        margin-bottom: 0;
      }

      .check h5 {
        font-size: 25px;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      nav {
        display: flex !important;
      }

      .contact-btn {
        display: inline-block !important;
      }
    }

    .backimag {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      /* behind everything */
      overflow: hidden;
    }

    .backimag img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease, filter 0.4s ease;
    }

    .backimag:hover img {
      transform: scale(1.05);
      filter: brightness(0.85);
    }

    .spacer {
      height: 100vh;
      /* Adds a full screen height */
    }

    .backimagm {
      display: none;
    }

    .impact {
      background-color: rgb(254, 248, 232);
      text-align: center;
      padding: 25px;
    }

    .impact h1 {
      font-size: 45px;

    }

    .impact .box {
      display: flex;
      padding: 20px 20px;
      gap: 20px;
    }

    .impact .box>div {
      width: 100%;
      max-width: 100%;
      height: 330px;
      /* remove fixed height */
      padding: 25px 25px;
      background-color: #1a2930;
    }

    .impact .box h1 {
      font-size: 100px;
      color: rgb(254, 248, 232);
      /* margin: 0; */
      font-weight: normal;
    }

    .impact .box h3 {
      font-size: 30px;
      font-weight: bold;
      color: rgb(254, 248, 232);
      margin-top: -65px;
    }

    .null {
      display: none;
    }

    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease-out;
    }

    .fade-up.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .commitement {
      background-color: rgb(254, 248, 232);
      padding: 50px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

    .commitement .com {
      flex: 1 1 50%;
    }

    .commitement .com h1 {
      font-size: 2.5em;
      margin-bottom: 20px;
    }

    .commitement .com h4 {
      font-size: 1.1em;
      line-height: 1.6;
      font-weight: normal;
    }

    .commitement img {
      flex: 1 1 40%;
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }

    .strategy {
      background-color: rgb(254, 248, 232);
      padding: 10px;
    }

    .strategy h1 {
      margin-left: 25px;
    }

    .strategy .box2 {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 20px;
    }

    .strategy .box2>div {
      flex: 1 1 45%;
      background-color: #fef8e8;
      padding: 80px;
      text-align: center;
      border: 1px solid black;

    }

    .strategy .box2 h1 {
      font-size: 35px;
      color: #1a2930;
    }

    .strategy .box2 h3 {
      font-size: 16px;
      color: #333;
      line-height: 1.5;
      font-weight: normal;
    }

    .strategy .box2 hr {
      border: none;
      border-top: 2px dashed #1a2930;
      width: 70%;
      margin: 10px auto;
    }

    .services {
      background-color: black;
      padding: 25px;
      color: #fef8e8;
    }

    .services .ser h1 {
      font-size: 40PX;
    }

    .services .ser h4 {
      font-weight: normal;
      font-size: 20px;
      line-height: 30px;
    }

    .services .ser {
      width: 45%;
    }

    hr {
      border: none;
      border-top: 3px dashed rgb(254, 248, 232);
      margin: -1px auto;
    }

    .services .ser.left {
      margin-left: 0;
      margin-right: auto;
      text-align: left;
    }

    .services .ser.right {
      margin-left: 45%;
      margin-right: 0;
      text-align: left;
    }

    .benefits {
      background-color: rgb(254, 248, 232);
      padding: 25px;
    }

    .benefits h1 {
      text-align: center;
      font-size: 50px;
      margin-bottom: 7%;
    }

    .benefits .bimg {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 7%;
    }

    .last .box2 {
      display: flex;
      padding: 20px;
      flex-wrap: nowrap;
    }

    .last .box2>div {
      flex: 1 1 45%;
      background-color: #fef8e8;
      padding: 80px;
      text-align: center;
      border: 1px solid black;

    }

    .last .box2 h1 {
      font-size: 35px;
      color: #1a2930;
    }

    .last .box2 h3 {
      font-size: 16px;
      color: #333;
      line-height: 1.5;
      font-weight: normal;
    }

    .last .box2 h2 {
      font-size: 20px;
      color: #333;
      line-height: 1.5;
      font-weight: normal;
    }

    .last .box2 hr {
      border: none;
      border-top: 2px dashed #1a2930;
      width: 70%;
      margin: 10px auto;
    }

    .last h1 {
      text-align: center;
    }

    .last {
      background-color: rgb(254, 248, 232);
      padding: 25px;
    }

    .footer {
      background-color: #000;
      color: rgb(254, 248, 232);
      padding: 40px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
    }

    .footer-left {
      flex: 1 1 200px;
      border-right: 1px dotted rgb(254, 248, 232);
      font-size: 30px;
    }

    .footer-right {
      /* flex: 2 1 300px; */
      width: 45%;
      font-size: 20px;
    }

    .footer h3,
    .footer h4 {
      margin: 10px 0;
      font-weight: normal;
    }

    .footer a {
      color: rgb(254, 248, 232);
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    .footer hr {
      border: 0;
      border-top: 1px dotted rgb(254, 248, 232);
      margin: 20px 0;
      width: 75%;
    }

    /* Media Queries */
    @media (max-width: 767px) {
      .logo-container {
        display: none;
      }

      .logo-containerm {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 0 16px;
      }

      .logo-containerm .ma {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: flex-end;
      }

      nav,
      .contact-btn {
        display: none !important;
      }

      .mobile-menu-button {
        display: block;
      }

      .mobile-contact-btn {
        display: block;
        padding: 10px 85px;
        font-size: 20px;
        border-radius: 0;
      }

      .welcome {
        display: inline-block;
        padding: 20px;
      }

      .head h1 {
        line-height: 1;
        font-size: 2em;
      }

      .bot {
        width: 100%;
      }

      .backimagm {
        display: block;
      }

      .spacer {
        display: none;
      }

      .impact {
        padding: 0;
      }

      .impact h1 {
        font-size: 25px;
      }

      .impact .box {
        flex-direction: column;
        padding: 0px 5px;
        gap: 10px;
      }

      .impact .box>div {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 25px 15px;
      }

      .impact .box h1 {
        font-size: 50px;
      }

      .impact .box h3 {
        font-size: 20px;
        margin-top: -25px;
      }

      .null {
        display: block;
        height: 15px;
        background-color: rgb(254, 248, 232);
      }

      .commitement {
        flex-direction: column;
        padding: 10px;
        gap: 0;
      }

      .commitement .com h1 {
        font-size: 30px;
      }

      .commitement img {
        width: 100%;
        margin-top: 20px;
        border-radius: 0;
      }

      .strategy h1 {
        font-size: 28px;
        margin: auto;
        text-align: center;
      }

      .strategy .box2 {
        padding: 20px 0px 0px 0px;
      }

      .strategy {
        padding: 0px;
      }

      .strategy .box2>div {
        flex: 1 1 51%;
        background-color: #fef8e8;
        padding: 25px 10px 25px 10px;
        text-align: center;
        border-top: 1px solid black;
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
      }

      .strategy .box2 h1 {
        font-size: 32px;
        color: #1a2930;
      }

      .br {
        display: none;
      }

      .services .ser h1 {
        font-size: 24.5PX;
      }

      .services .ser {
        width: 100%;
      }

      .services .ser.right {
        margin-left: 0;
        margin-right: 0;
        /* text-align: left; */
      }

      .benefits h1 {
        font-size: 25px;
      }

      .benefits .bimg {
        display: grid;
        gap: 25px;
      }

      .last h1 {
        font-size: 25px;
        margin: auto;
        text-align: center;
        padding: 20px;
      }

      .last .box2 {
        padding: 20px 0px 0px 0px;
        display: block;
      }

      .last {
        padding: 0px;
      }

      .last .box2>div {
        flex: 1 1 45%;
        background-color: #fef8e8;
        padding: 25px 10px 25px 10px;
        text-align: center;
        border-top: 1px solid black;
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
      }

      .last .box2 h1 {
        font-size: 32px;
        color: #1a2930;
      }

      .spacer2 {
        display: none;
      }

      .footer {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-right {
        /* flex: 2 1 300px; */
        width: 100%;
        font-size: 20px;
        line-height: 30px;
      }

      .footer-left {
        flex: 1 1 85px;
        border-bottom: 2px dotted rgb(254, 248, 232);
        font-size: 30px;
        border-right: 0;
        width: 100%;
      }

      .footer hr {
        border: 0;
        border-top: 2px dotted rgb(254, 248, 232);
        margin: 20px 0;
        width: 100%;
      }

      .footer h3,
      .footer h4 {
        text-align: left;
      }
    }