body {
  height: 100%;
  font-family: DiodrumArabic;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  > header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background-color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);

    .logo-and-title {
      .logo {
        width: 60px;
      }
      .title{
        line-height: 1.5;
      }
    }

    .login-button {
      height: fit-content;
      text-decoration: none;
      color: #ffffff;
      padding: 12px 17px;
      font-weight: 500;
      background-color: #6a9ac2;
      border-radius: 10px;

      img {
        width: 20px;
      }

      span{
        display: block;
        width: max-content;
      }
    }

    .profile {
      position: relative;
      width: fit-content;

      &:hover > .items {
        visibility: visible;
        opacity: 1;
      }

      > img {
        width: 64px;
      }
      > .items {
        visibility: hidden;
        position: absolute;
        top: 60px;
        left: 0;
        opacity: 0;
        transition: 0.25s;

        > .box {
          width: max-content;
          background-color: #ffffff;
          margin-top: 10px;
          border-radius: 10px;
          box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);

          &::after {
            content: '';
            position: absolute;
            left: 25px;
            top: 0px;
            transform: rotate(45deg);
            z-index: 2;
            width: 16px;
            height: 16px;
            background-color: #ffffff;
          }

          > .name {
            color: #7e94a2;
            font-size: 17px;
            font-weight: 500;
          }
          > .line {
            width: 100%;
            height: 1px;
            background-color: #c4c4c4;
            margin: 10px 0;
          }
          > .logout {
            background-color: transparent;
            color: #ff4a32;
            font-size: 15.5px;
            font-weight: 500;
            border: none;

            > img {
              width: 19px;
              margin-right: 2px;
            }
          }
        }
      }
    }

    @media (max-width: 768px) {
      .logo-and-title {
        .logo {
          width: 44px;
        }
        .title {
          max-width: 150px;
          font-size: 20px;
        }
      }

      .login-button {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 6px;

        img {
          width: 17px;
        }
      }

      @media (max-width: 360px) {
        .logo-and-title {
          .title{
            font-size: 18px;
          }
        }
      }

      .profile {
        > img {
          width: 40px;
        }

        > .items {
          top: 35px;

          > .box {
            margin-top: 5px;
            padding: 10px !important;
            border-radius: 8px !important;

            &::after {
              left: 15px;
              width: 11px;
              height: 11px;
            }

            > .name {
              font-size: 14px;
            }

            > .line {
              margin: 7px 0;
            }

            > .logout {
              font-size: 13px;

              img {
                width: 18px;
              }
            }
          }
        }
      }
    }
  }

  > footer {
    background-color: #7e94a2;
    color: #ffffff;
    font-weight: 300;

    > .container {
      > .paragraph {
        text-align: justify;
        line-height: 1.75;
      }
      > .info {
        line-height: 2.5;

        .phone {
          letter-spacing: 2px;
        }
      }
      > .enamad {
        > a {
          > img {
            width: 200px;
          }
        }
      }
    }

    >.footer-bottom{
      padding: 15px 20px;
      background-color: #f5f5f5;
      color: #434343;
      text-align: center;
      font-weight: 500;
      
      >span{
        color: #6a9ac2;
      }
    }

    @media (max-width: 768px) {
      font-size: 14px;

      > .container {
        > .enamad {
          > a {
            > img {
              width: 150px;
            }
          }
        }
      }
    }
  }
}