@font-face {
        font-family: boba;
        src: url(fonts/subset-DomaineDisplayCd-Regular.woff2);
    }

    @font-face {
        font-family: boba1;
        src: url(fonts/fa-brands-400.woff2);
    }

    @font-face {
        font-family: boba2;
        src: url(fonts/subset-Spoof-Light.woff2);
    }

    * {
        margin: 0;
        padding: 0;
    }

    html body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
        font-family: boba;
        background: linear-gradient(45deg,red,orange);
        scroll-behavior: smooth;
    }
    .nav-container {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 0;
      top: 0;
      right: 0;
      transition: all 0.3s ease;
    }

    .active {
      display: block;
    }
    

    .loader {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #ffb700;
      z-index: 9999;
      font-weight: 1000;
    }

    .loader h1 {
      font-size: 3rem;
      animation: rotate 1.5s ease-in-out;
    }

    @keyframes rotate {
      0% {
        transform: rotate(-360deg);
        scale: 1.2;

      }

      100% {
        transform: rotate(360deg);
        scale: 0.6;
        opacity: 0.7;
      }
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      height: 100%;
      right: 0;
      width: 20%;
    }

    .nav ul {
      display: flex;
      flex-direction: column;
      list-style: none;
      gap: 20px;
      font-family: boba2;

    }

    .nav ul li {
      margin: 0 20px;
    }

    .nav ul li a {
      text-decoration: none;
      color: white;
      font-size: 1.5rem;
      font-weight: 500;
      transition: all 0.3s ease;
      font-weight: bold;
    }

    .logo {
      position: fixed;
      box-sizing: border-box;
      padding: 12px 13px;
      border-radius: 50%;
      font-size: 1.2rem;
      background-color: white;
      margin: 40px 60px 0 0;
      right: 0;
      top: 0;
      filter: invert(1);
      cursor: pointer;
      z-index: 6969;
    }

    .main {
      transition: all 0.6s ease;
    }

    .naved {
      transform: translateX(-20%);
    }
    .footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgb(255, 191, 0);
            padding: 50px 80px 20px 100px;
        }

        .footer-header {
            display: flex;
            width: 100%;
        }

        .footer-first {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding-bottom: 40px;
        }

        .footer-logo {
            width: 30%;
        }

        .footer-second {
            display: flex;
            width: 20%;
        }

        .footer-second img {
            width: 100%;
        }

        .footer-about {
            display: flex;
            flex-direction: column;
            font-family: boba2;
            font-weight: 100;
            gap: 10px;
        }

        .footer-contact {
            display: flex;
            flex-direction: column;
            font-family: boba2;
            font-weight: 100;
            gap: 10px;
        }

        .footer-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            width: 100%;
        }

        .footer-footer i {
            padding: 20px;
            font-size: 1.2rem;
            cursor: pointer;
        }

        hr {
            width: 100%;
            border: 0.5px solid rgba(0, 0, 0, 0.481);
        }
        .text-sliding {
      width: 100%;
      overflow: hidden;
      padding: 20px 0;
      background-color: #f0e5d8;
    }

    .slide {
      display: flex;
      text-align: center;
      width: max-content;
      animation: slide 10s linear infinite;
    }

    .slide1 {
      display: flex;
      text-align: center;
      width: max-content;
      animation: slide1 10s linear infinite;
    }

    .text-sliding span {
      font-size: 5rem;
      font-weight: 100;
      margin-right: 20px;
      white-space: nowrap;

    }

    @keyframes slide {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(-33.333%, 0, 0);
      }
    }

    @keyframes slide1 {
      from {
        transform: translate3d(-33.333%, 0, 0);
      }

      to {
        transform: translate3d(0, 0, 0);
      }
    }
    a {
      text-decoration: none;
      color: black;
    }